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

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

function cargar_archivo_html() {
    ob_start();
    include_once(get_template_directory() . '/dist/index.html'); 
    return ob_get_clean(); 
}

function registrar_shortcode_html() {
    add_shortcode('mostrar_archivo_html', 'cargar_archivo_html');
}

function enqueue_react_assets() {
    wp_enqueue_script('react-app', get_template_directory_uri() . '/dist/assets/index.js', array(), null, true);
    wp_enqueue_style('react-app-css', get_template_directory_uri() . '/dist/assets/index.css', array(), null);
}

add_action('wp_enqueue_scripts', 'enqueue_react_assets');

add_action('init', 'registrar_shortcode_html');

Explicando el código:

1. 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 te recomiendo que para fines prácticos lo renombres y lo dejes solo como index.js tal como se ve en el codigo de arriba, si lo renombras es probable que tengas que hacer cambios dentro de index.html por si no te funciona (en mi caso no fue necesario).

• 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, una vez más te recomiendo renombrarlo a index.css.

• Utiliza ob_get_clean() para obtener y limpiar el contenido almacenado en el búfer y lo devuelve.

1. Función registrar_shortcode_html():

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

1. 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.

Observación en esta actualización 23.5.24 se ha cambiado el código para registrar los archivos index.js y index.css tal como lo recomienda 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: He trabajado los estilos con Tailwind CSS es posible que si no logras ver los estilos es por que deberías trabajarlo como lo hice yo...

Saludos y gracias a Rigoberto Nava por reportar el caso.

Comments

[JOSE TOMAS MENDOZA PUENTES]

👍chevere

[Deivis Marchán Medina]

Very Good Lenin

[Rigoberto Nava]

Hago exactamente eso, pero al publicar el post el componente no se ve, solo en el editor
como podría solucionarse?

[Lenin Mendoza]

Rigoberto intenta hacerlo como lo he publicado en la actualización, he modificado el código; en mi caso si fue cierto que no me funcionaba pero debes tener en cuenta que al momento de verificar no puedes estar en la vista previa, puedes revisarlo en una pantalla de incognito, otra cosa para que se vean los estilo te recomiendo usar Tailwind. Me comentas.