Mejores prácticas para usar fragmentos de JavaScript externos con Divi


WordPress y Divi hacen muchas cosas maravillosas fuera de la caja para facilitarnos la creación de un sitio web. Pero a veces necesitamos una funcionalidad más avanzada que solo se puede lograr con JavaScript.

Con Divi, puede agregar fácilmente fragmentos de JavaScript o jQuery (fragmentos de código) a su tema o página web sin un complemento, incluso si no tiene un tema secundario configurado. En este tutorial, repasaremos algunas prácticas recomendadas para utilizar fragmentos de JavaScript externos con Divi.

Una palabra rápida en JavaScript y jQuery

JavaScript es la magia detrás de la funcionalidad dinámica que ves en un sitio web. Es un lenguaje de codificación del lado del cliente creado para la web que puede acceder a todos sus archivos de tema y realizar todo tipo de funciones a través del navegador que no sería posible solo con HTML o CSS.

JQuery (uno de los más populares Bibliotecas JavaScript) ha hecho que sea muy fácil agregar fragmentos de JavaScript a sus sitios web que funcionarán en diferentes tipos de navegador. Es por eso que hoy se utiliza mucho jQuery en los sitios web. JQuery también está integrado en WordPress, por lo que cualquier código jQuery que agregue a Divi funcionará si está formateado correctamente.

Formateo adecuado de fragmentos de JQuery en Divi / WordPress

Uso de la función de documento listo

En la mayoría de los casos, sugeriría usar $(document).ready() en tus fragmentos de jQuery. Cualquier JavaScript agregado en $(document).ready() se asegurará de que el documento (o DOM) esté cargado y listo antes de ejecutar JavaScript. Esto evita ciertas situaciones en las que JavaScript puede ejecutarse cuando la página no está lista para ser manipulada de forma segura.

En Divi, la función debería verse así …

jQuery( document ).ready(function() {

    // Add jQuery code here to be loaded once the DOM is ready

});

Usar "jQuery" en lugar de "$" al usar jQuery en WordPress

Dado que WordPress ya viene con una versión de jQuery en modo de compatibilidad, el estándar $ para jQuery no funciona. Esto es para evitarlo en conflicto con otras bibliotecas de JavaScript puede o no usar en WordPress. En su lugar, deberá usar jQuery en lugar de la $ atajo.

Así que esto…

$(document).ready(function(){
  $("p").click(function(){
    $(this).hide();
  });
});

Tendría que convertirse en esto …

jQuery(document).ready(function(){
  jQuery("p").click(function(){
    jQuery(this).hide();
  });
});

Sin embargo, si desea mantener el código menos hinchado y mantener esos $ atajos, puedes usar $ en vez de jQuery si agregas $ como un argumento pasado a la función de documento listo. Esto le permitirá mantener el $ en el fragmento de jQuery contenido en esa función.

Así es como se vería …

jQuery( document ).ready(function( $ ) {
    // Add jQuery code here, using $ to refer to jQuery.
    $( "div" ).hide();
});

O puedes pasar el $ En para jQuery con una función simple como esta junto con la función de documento listo …

(function($) {
    
    // Add jQuery code here, using $ to refer to jQuery.
    $(document).ready(function(){

      $( "div" ).hide();

    });
    
})( jQuery );

Ahora que entendemos algunas prácticas recomendadas sobre cómo formatear fragmentos de código JavaScript, exploremos cómo agregarlos correctamente a su sitio Divi.

Agregar fragmentos de JavaScript a una sola página usando el módulo de código

Si está buscando agregar un fragmento de javascript (o jquery) a una sola página en Divi, puede usar el Módulo de Código. Esto asegurará que el JS no se cargue innecesariamente en cada página, lo que provocará un aumento menor en el tiempo de carga de la página en páginas que ni siquiera lo necesitan.

Aquí te explicamos cómo hacerlo. Primero, active el generador de divi cuando edite la página que necesita el fragmento JS. Luego, agregue un módulo de código a su página.

fragmentos de divi javascript

El código funcionará en cualquier lugar de la página, por lo que depende de usted dónde desea colocarlo.

Después de agregar el módulo de código, pegue el fragmento de JavaScript. Asegúrese de envolver el código en un

Sin embargo, dado que el "texto / javascript" es el tipo predeterminado, está bien dejarlo de lado al usarlo para fragmentos de código JavaScript.

Agregar fragmentos de JavaScript a todas las páginas / publicaciones usando las opciones del tema Divi (no se necesita un tema secundario)

Los fragmentos de JavaScript también se pueden agregar a Divi mediante la pestaña de integración de código de Divi en Opciones de tema. Este método funciona bien para fragmentos de JS que desea cargar en todas las páginas / publicaciones de su sitio web. Esta también es una buena opción si no tiene un tema secundario o si solo tiene algunos fragmentos de JS que deben agregarse a su sitio Divi y no desea incluirlos en un archivo JS externo.

Para encontrar la sección de integración de código, navegue hasta Divi> Opciones de tema y haga clic en la pestaña Integración.

fragmentos de divi javascript

Averiguar dónde poner su fragmento de JavaScript

Allí verá cuatro áreas en las que puede agregar código personalizado a su sitio Divi. Para la mayoría de los casos, sería mejor agregar fragmentos JS al cuerpo. En realidad, esto colocará su fragmento en la parte inferior de su página para que se cargue después de todo lo demás, lo que es ideal para la velocidad de carga de la página. En algunos casos, es posible que desee agregar el código al encabezado para que el código se pueda cargar antes (o si su documento depende de que JavaScript se ejecute antes). Por lo tanto, deberá probar y decidir la mejor opción que le brinde el mejor equilibrio entre rendimiento, sincronización y funcionalidad.

Por ejemplo, puede tener un fragmento de jQuery que agrega estilo a su encabezado. En ese caso, no querrás cargarlo en el cuerpo (al final de la página) porque el encabezado se cargaría inicialmente sin ese estilo hasta que se lea el fragmento. Esto dejaría a su visitante en la mitad superior de la página con un aspecto feo para los visitantes por un breve momento. Sin embargo, si lo cargó en la cabeza, no tendría ese retraso en el diseño.

También puede optar por agregar el fragmento JS al final de sus publicaciones si tiene un código que solo se aplica a las publicaciones de blog. Esto evitará que el código se cargue innecesariamente en otras páginas.

fragmentos de divi javascript

Las áreas de integración de código agregarán el código directamente a su página, por lo que deberá envolver sus fragmentos de código con el

LATEST POSTS