This Banner is For Sale !!
Get your ad here for a week in 20$ only and get upto 15k traffic Daily!!!

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


Presentación:
Un saludo mi nombre es Lenin Mendoza y en este submit quiero compartir con ustedes algo que no lo había en web hasta este submit, 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 concept es que todo el código quede en native), 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 period a modo de pruebas lo integre directamente en el archivo capabilities.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 period 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:

Image description

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 apppublicwp-contentthemeshello-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:

Image description

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

Image description

Ahora cumplido esos pasos vayamos a el archivo capabilities.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 Look > Theme File Editor > Choose theme to edit: Good day Elementor > Theme Capabilities (capabilities.php):

Image description

El código:

// React

// Función para cargar el contenido del archivo HTML mediante un shortcode
perform 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 precise
    include_once(get_template_directory() . '/dist/index.html'); // Ruta al archivo HTML

    // Agrega el script de tipo módulo desde la ruta /dist/property/index-6qsmj8p8.js
    ?>
    <script kind="module" src="https://style-tricks.com/mendozalz/<?php echo get_template_directory_uri(); ?>/dist/property/index-6qsmj8p8.js"></script>

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

// Registro del shortcode para mostrar el archivo HTML
perform 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'); 

Enter fullscreen mode

Exit fullscreen mode

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 precise (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/property/index-6qsmj8p8.js donde (/index-6qsmj8p8.js) es el archivo construido de manera automática al momento de construct 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/property/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.

  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.

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 capabilities.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 capabilities.php y para que tu tengas el management 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

The Article was Inspired from tech community site.
Contact us if this is inspired from your article and we will give you credit for it for serving the community.

This Banner is For Sale !!
Get your ad here for a week in 20$ only and get upto 10k Tech related traffic daily !!!

Leave a Reply

Your email address will not be published. Required fields are marked *

Want to Contribute to us or want to have 15k+ Audience read your Article ? Or Just want to make a strong Backlink?