Cómo Integrar un Componente React en WordPress con Elementor: Mi Experiencia y Solución

#react #wordpress #elementor

Presentación:
Un saludo mi nombre es Lenin Mendoza y en este post quiero compartir con ustedes algo que no lo había en internet hasta este post, lo cierto es que en una prueba técnica se me solicito que se implementara un componente de React (Contador de calorías) dentro de Wordpress con Elementor, en el repositorio de wordpress existen 3 complementos que uno de ellos tiene su ultima actualización hace 5 años, el otro se debe integrar el componente en un servidor aparte (la idea es que todo el código quede en local), y llamarlo como si fuese un iframe lo que no es muy recomendado, y el ultimo no me permitía renderizar el componente pues solo trabaja con el theme Twenty Twenty-One.

En fin la única alternativa que tuve fue implementar mi propio método y vaya que si me resulto.

Advertencia:
Es mi primera ves al crear un articulo, si ven que algo me he saltado o hace falta para que el contenido sea mas claro y preciso por favor no duden en escribirme en la caja de comentarios que con todo gusto aceptare sus recomendaciones, el fin de esto es ir mejorando de a poco.

Se entiende:
En este apartado doy por entendido que conoces como manipular código dentro de wordpress, y sabes construir un complemento (buildear) este mismo.

Comprendido lo ultimo mencionado pues vayamos al lio:

Este código en React tiene como objetivo cargar y mostrar el contenido de un archivo HTML utilizando shortcodes en WordPress, tal como lo hacemos al querer cargar estilos, fuentes o JavaScript. No lo cree como un plugins pues como era a modo de pruebas lo integre directamente en el archivo functions.php del theme (luego me animo y creo un complemento).
Aquí está una explicación detallada de cada parte y como lo hice:

Lo primero que debes hacer es tener tu componente de React definido, es decir que lógica quieres implementar dentro de Wordpress, en mi caso era un contador de calorías, donde le indicaba al usuario la cantidad de calorías quemadas según la distancia recorrida, estatura, edad y genero, aqui una imagen de lo que describo:

Ahora debes construir tu componente de React, es decir buildearla, en mi caso utilice VIT la cual te genera una carpeta “dist” esta carpeta dist asi mismo la subiremos por ftp si tienes tu Wordpress en un servidor en la nube, en mi caso yo utilizo localwp lo que me facilita muchas cosas, debes copiar y pegar esa carpeta dist en app\public\wp-content\themes\hello-elementor-child (es recomendable utilizar un child-theme pues en una actualización podrías perder el código), aqui una captura de donde deberás agregar tu carpeta dist:

En esa ruta pegaras tu carpeta dist con todo su contenido sin alterar nada y debería verse asi:

Ahora cumplido esos pasos vayamos a el archivo functions.php que podrías bien editarlo directamente basado en la ruta en VSC o como fue mi caso directamente en la ruta theme de tu dashboard de Wordpress lo cual lo consigues en Appearance > Theme File Editor > Select theme to edit: Hello Elementor > Theme Functions (functions.php):

El código:

// React

// Función para cargar el contenido del archivo HTML mediante un shortcode
function cargar_archivo_html() {
    // Inicia el almacenamiento en búfer para evitar problemas al renderizar el componente
    ob_start(); 

    // Incluye el contenido del archivo HTML ubicado en la ruta /dist/index.html del tema actual
    include_once(get_template_directory() . '/dist/index.html'); // Ruta al archivo HTML

    // Agrega el script de tipo módulo desde la ruta /dist/assets/index-6qsmj8p8.js
    ?>
    <script type="module" src="<?php echo get_template_directory_uri(); ?>/dist/assets/index-6qsmj8p8.js"></script>

    <!-- Agrega el enlace a la hoja de estilo CSS desde la ruta /dist/assets/index-fXWzvgFu.css -->
    <link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/dist/assets/index-fXWzvgFu.css">
<?php
    // Devuelve el contenido limpio del búfer
    return ob_get_clean(); 
}

// Registro del shortcode para mostrar el archivo HTML
function registrar_shortcode_html() {
    // Agrega un shortcode llamado 'mostrar_archivo_html' que está vinculado a la función cargar_archivo_html()
    add_shortcode('mostrar_archivo_html', 'cargar_archivo_html');
}

// Añade el shortcode al hook 'init', asegurando que la función se ejecute durante la inicialización de WordPress
add_action('init', 'registrar_shortcode_html');

Explicando el código:

Función cargar_archivo_html():

Implementa ob_start() para iniciar el almacenamiento en búfer (espacio de memoria temporal) de salida, sin esto se inyectaría directamente el código sin procesar y te daría problemas al renderizar el componente asi que no puedes omitirlo.
Incluye el contenido del archivo HTML ubicado en la ruta /dist/index.html del tema actual (recuerda que estamos dentro de la carpeta dist que creaste en tu componente de React).
Agrega la ruta de tu script de tipo módulo que esta dentro de la carpeta /dist/assets/index-6qsmj8p8.js donde (/index-6qsmj8p8.js) es el archivo construido de manera automática al momento de build y entiéndase que este nombre puede variar según sea el proceso de construcción y que de seguro en tu caso seria distinto, si lo prefieres puedes renombrarlo pero luego tienes que hacer cambios dentro de index.html, en mi caso para hacerlo todo mas sencillo lo deje asi ya que no es algo que estaremos tocando constantemente.
Tambien debes agregar un enlace a una hoja de estilo CSS desde la ruta /dist/assets/index-fXWzvgFu.css que igual al caso del scrip.js donde (/index-fXWzvgFu.css) este puede variar.
Utiliza ob_get_clean() para obtener y limpiar el contenido almacenado en el búfer y lo devuelve.

Función registrar_shortcode_html():

Registra un shortcode llamado 'mostrar_archivo_html' que está vinculado a la función cargar_archivo_html().

add_action('init', 'registrar_shortcode_html'):

Registra la función registrar_shortcode_html() para que se ejecute durante la fase de inicialización de WordPress.

Atención:
Antes de cualquier implementación siempre, siempre debes crear un respaldo de seguridad de tu sitio como buenas practicas.

Repito para implementar esto en tu proyecto, debes copiar y pegar este código en el archivo functions.php de tu tema de WordPress. Luego, puedes usar el shortcode [mostrar_archivo_html] en tus publicaciones o páginas para mostrar el contenido del archivo HTML y violà felicitaciones ya tienes tu componente de React dentro de Wordpress con Elementor sin ningún problema, libre de dependencias externas y posibles fallos en el futuro, pero es recomendado crearte tu propio plugins de manera tal que no quede inyectado directamente en el functions.php y para que tu tengas el control de ello al momento de querer depurar. Un saludo y espero que esto les sea de mucha utilidad.

PD: Pronto publicare como crear un CMS Headless con Airtable con un dashboard y Astro