WordPress y Divi hacen muchas cosas maravillosas listas para usar 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 de las mejores prácticas para usar fragmentos de JavaScript externos con Divi.
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 temas y realizar todo tipo de funciones a través del navegador que no serían posibles solo con HTML o CSS.
JQuery (una de las bibliotecas de JavaScript más populares ) ha hecho que sea realmente fácil agregar fragmentos de JavaScript a sus sitios web que funcionarán en diferentes tipos de navegadores. Es por eso que hoy en día se usa 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 tiene el formato adecuado.
Formato adecuado de fragmentos de JQuery en Divi/WordPress
Uso de la función Documento listo
En la mayoría de los casos, sugeriría usar $(document).ready()en sus fragmentos de jQuery. Cualquier JavaScript agregado $(document).ready()se asegurará de que el documento (o DOM) esté cargado y listo antes de ejecutar el JavaScript. Esto evita ciertas situaciones en las que se puede ejecutar JavaScript cuando la página no está lista para ser manipulada de forma segura.
En Divi, la función debería verse así…
|
01
02
03
04
05
|
jQuery( document ).ready(function() { // Add jQuery code here to be loaded once the DOM is ready}); |
Usar «jQuery» en lugar de «$» cuando se usa 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 evitar que entre en conflicto con otras bibliotecas de JavaScript que puede o no usar en WordPress. En su lugar, deberá usar jQueryen lugar del $atajo.
Así que esto…
|
01
02
03
04
05
|
$(document).ready(function(){ $("p").click(function(){ $(this).hide(); });}); |
Tendría que convertirse en esto…
|
01
02
03
04
05
|
jQuery(document).ready(function(){ jQuery("p").click(function(){ jQuery(this).hide(); });}); |
Sin embargo, si desea mantener el código menos inflado y mantener esos $accesos directos, puede usar $en lugar de jQuerysi agrega $como argumento pasado a la función de documento listo. Esto le permitirá mantener el $ en el fragmento jQuery contenido en esa función.
Así es como se vería…
|
01
02
03
04
|
jQuery( document ).ready(function( $ ) { // Add jQuery code here, using $ to refer to jQuery. $( "div" ).hide();}); |
O puede pasar el $formulario jQuerycon una función simple como esta junto con la función de documento listo…
|
01
02
03
04
05
06
07
08
09
10
|
(function($) { // Add jQuery code here, using $ to refer to jQuery. $(document).ready(function(){ $( "div" ).hide(); }); })( jQuery ); |
Ahora que entendemos algunas de las mejores prácticas sobre cómo formatear fragmentos de JavaScript, exploremos cómo agregarlos correctamente a su sitio Divi.
Adición de fragmentos de JavaScript a una sola página mediante 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 en todas las páginas innecesariamente, lo que provocará un aumento menor en el tiempo de carga de la página en las páginas que ni siquiera lo necesitan.
Aquí está cómo hacerlo. Primero, active el generador divi al editar la página que necesita el fragmento JS. Luego, agregue un módulo de código a su página.
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 incluir el código en una <script>etiqueta para que se reconozca como JavaScript.
No olvide asegurarse de que su fragmento esté codificado con el formato correcto envolviéndolo con la <script>etiqueta para que el código se reconozca como JavaScript. Y si está utilizando jQuery, incluya la función de documento listo para que se cargue cuando el documento esté listo para ello. Además, deberá usar jQueryen su fragmento en lugar de la abreviatura $.
¡Eso es todo! Su fragmento debe ejecutarse en la página como se esperaba.
Nota: la <script>etiqueta generalmente requiere que especifique el tipo de medio del script de la siguiente manera…
|
01
02
|
<script type="text/javascript"></script> |
Sin embargo, dado que «text/javascript» es el tipo predeterminado, está bien omitirlo cuando se usa para fragmentos de código JavaScript.
Adición de fragmentos de JavaScript a todas las páginas/publicaciones mediante las opciones del tema Divi (no se necesita un tema secundario)
Los fragmentos de JavaScript también se pueden agregar a Divi usando la pestaña de integración de código de Divi en Opciones de tema. Este método funciona bien para los 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, vaya a Divi > Opciones de tema y haga clic en la pestaña Integración.
Averiguar dónde colocar su fragmento de JavaScript
Allí verá cuatro áreas en las que puede agregar un código personalizado a su sitio Divi. Para la mayoría de los casos, sería mejor agregar fragmentos de JS al cuerpo. Esto realmente colocará su fragmento en la parte inferior de su página para que se cargue después de todo lo demás, lo cual es excelente 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 pueda cargarse antes (o si su documento depende de que JavaScript se ejecute antes). Por lo tanto, tendrá que 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 agregue 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 su parte superior del pliegue luciendo feo para los visitantes por un breve momento. Sin embargo, si lo cargaras en la cabeza, no tendrías ese retraso en el peinado.
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 del blog. Esto evitará que el código se cargue en otras páginas innecesariamente.
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 la <script>etiqueta.
Agregar fragmentos de JS a Divi desde un archivo JS separado (usando un tema secundario)
Siempre se recomienda utilizar un tema secundario para su sitio Divi. Y una vez que haya configurado correctamente el tema secundario , también puede incorporar un archivo JS que se puede usar para almacenar sus fragmentos JS personalizados.
Esta es definitivamente la forma preferida de manejar javascript en los sitios de WordPress y también funciona bien con Divi.
Crear el archivo JS en su tema hijo
Siempre es una gran idea configurar un tema secundario de Divi , especialmente si planea realizar cambios en los archivos del tema. Una vez que haya creado un tema secundario Divi, puede crear fácilmente un archivo JavaScript donde puede colocar todos sus fragmentos JS en un solo lugar.
Aquí está cómo hacerlo.
Cree un archivo JavaScript y agréguelo a su Carpeta de tema infantil
Usando un editor de código, cree un nuevo archivo y guárdelo como un archivo JavaScript. Por ejemplo, si guardó el archivo como tipo «js» con el nombre «scripts», el nombre completo del archivo sería «scripts.js». Aquí es donde agregaría todos los fragmentos js que desea agregar a Divi. No necesita envolver los fragmentos en una <script>etiqueta ya que el archivo se guarda como un archivo js.
Una vez que se ha creado el archivo, debe agregarlo a la carpeta de su tema secundario. Me gusta crear una carpeta js para guardar mis archivos js personalizados para una mejor organización. Para hacer esto, simplemente cree una nueva carpeta llamada «js» en la raíz de la carpeta de su tema secundario y agregue el archivo «scripts.js» a esa carpeta.
Poner en cola los scripts en el archivo Functions.php de su Child Theme
Ahora necesitamos poner en cola el archivo js para que se cargue en Divi. Si ya tiene un tema secundario creado, debe tener un archivo functions.php ya creado en el que ya ha puesto en cola el archivo style.css para el tema secundario que debería verse así…
|
01
02
03
04
|
function theme_enqueue_styles() { wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );}add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' ); |
Ahora deberá hacer lo mismo con su nuevo archivo js. Para hacer esto, deberá agregar el siguiente fragmento de código a la función.
|
01
|
wp_enqueue_script( 'custom-js', get_stylesheet_directory_uri() . '/js/scripts.js', array( 'jquery' ), '1.0.0' , true ); |
El código final necesario para poner en cola el archivo style.css y scripts.js se vería así…
|
01
02
03
04
05
|
function theme_enqueue_styles() { wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' ); wp_enqueue_script( 'custom-js', get_stylesheet_directory_uri() . '/js/scripts.js', array( 'jquery' ), '1.0.0' , true );}add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' ); |
Pensamientos finales
Si es nuevo en el diseño web o acaba de comenzar con Divi, es posible que no esté familiarizado con JavaScript o cómo agregarlo a su sitio web. Con suerte, esta publicación fue útil para orientarlo en la dirección correcta y proporcionar algunas de las mejores prácticas que incluso los desarrolladores web experimentados pueden apreciar.
Espero escuchar de usted en los comentarios.
¡Salud!