La popularidad de JavaScript hace que sea que compatible con muchísimos navegadores web, y es que este tipo de codificación permite agregar funciones y personalizaciones a la medida de forma fácil y segura.
Pero, aunque está integrado en WordPress de forma nativa es preciso saber cómo agregar los códigos para evitar incompatibilidades con complementos y otras funciones.
Recomendaciones para agregar código Javascript y JQuery en Divi
JavaScript sigue siendo el rey en cuanto agregar funciones que se ejecutan directamente en el navegador web. Esta cualidad de ser un lenguaje de programación orientado un más al front end del sitio hace que sea ideal para ayudar con el diseño y usabilidad.
Divi es compatible con JQuery, una de las librerías de Java más usadas. Con JQuery se pueden agregar fragmentos de códigos JavaScript que funcionan a la perfección si se usa el formato correcto al formular las funciones.
Evitando que los scripts se ejecuten antes de lo necesario
La primera recomendación es incluir el modelo de objetos del documento (DOM), agregando el archivo, el código “jQuery(document).ready()” e incluyendo el fragmento de código dentro como se muestra a continuación.
jQuery(document).ready(function(){// Agregar el fragmento de código dentro de las llaves});Esto evita que el script JQuery se ejecute antes de que la página este totalmente cargada y lista para funcionar el navegador.
Declarando variables y codificando con el formato correcto
Debido a que de forma nativa WordPress incorpora una versión de JQuery en el modo de compatibilidad, ciertas variables y funciones deben ser escritas sin usar reducciones o simplificaciones que se suelen usar, esto para evitar conflicto con la versión de JQuery usada en WordPress.
Por ejemplo, la reducción “$” de la variable “jQuery”, no puede usarse en Divi, porque podría causar conflictos.
Entonces todas las variables “$” incluidas en un fragmento de código JQuery debe convertirse en “jQuery” para que todo funcione correctamente.
Pero debido a que muchos fragmentos de código incluyen “$” y esto permite mantener un código más limpio y compacto, es posible agregar esta variable ($) si se declara como un argumento dentro del código document ready function señalado en el punto anterior. Esto le permitirá mantener $ en el fragmento de jQuery contenido en esa función.
Dando como resultado algo parecido a esto.
jQuery( document ).ready(function($) {// Se puede incluir el código dentro de las llaves. Usando $ en vez de jQuery.$(«div»).hide();});O haciendo todo lo contrario. Se puede crear una función simple que declare $ como variable y que contenta dentro el código document ready function, tal como se muestra aquí.
(function($){//Hay que poner el código antes de usar la variable y el document ready function .$(document).ready(function(){$(«div»).hide();});})( jQuery );Agregando los fragmentos de código Javascript donde deben ir
Existen dos formas de agregar fragmentos JQuery o Java en Divi. Una de estas opciones funciona para agregar código en una sola página y el otro a todas las páginas que se creen con Divi.
Para agregar código a una sola página hay que usar el módulo “Código” en la página que se desea. El fragmento funciona en cualquier parte de la página, pero es mejor colocarlo donde convenga más.
Solo hay que elegir editar la página con el constructor visual de Divi, agregar el módulo “Código” haciendo clic en el ícono con el símbolo + ubicado al centro de cualquier sección, fila o columna de la página.
Para que Divi y WordPress reconozcan el fragmento de código como Java o jQuery es necesario agregar el código dentro de las etiquetas <script> como en la siguiente imagen.
Para añadir fragmentos de código a todas las páginas, la forma más sencilla es hacerlo desde la pestaña “Integración”.
Desde el panel de administración de WordPress acceder a Divi y al apartado “Opciones del Tema”. Haciendo clic en la pestaña “Integración” se encuentran varias opciones que habilitan la capacidad de Divi de detectar y hacer funcionar código externo, y lo agrega a todas las páginas.
Todas las opciones las opciones permiten agregar el código en secciones específicas de la página debido a que esto puede ser necesario en ocasiones.
Por ejemplo, si tiene un código que realiza alguna función o modifica la apariencia de la cabecera del sitio se necesita que ese script se ejecute lo antes posible y no cuando el cuerpo o el pie del sitio hayan cargado. Por lo que lo más conveniente es agregarlo a la cabecera.
Es preciso añadir los fragmentos junto con el document ready function y dentro las etiquetas <script>.
A continuación mostramos en que casillas colocar el código dependiendo de la función.
Los fragmentos de código que hemos utilizado son cortos y poco funcionales para que sea más simple de entender la estructura.
Si se quiere usar un código funcional puede usar el siguiente fragmento, el cual cierra por completo todos los menús tipo acordeón que se hayan agregado usando el módulo “Acordeón” de Divi, porque por defecto está función muestra el primer ítem siempre cuando cargan.
<span class="hljs-tag"><<span class="hljs-name">script</span>></span><span class="javascript">jQuery(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">$</span>)</span>{ $(<span class="hljs-string">‘.et_pb_accordion .et_pb_toggle_open’</span>).addClass(<span class="hljs-string">‘et_pb_toggle_close’</span>).removeClass(<span class="hljs-string">‘et_pb_toggle_open’</span>); $(<span class="hljs-string">‘.et_pb_accordion .et_pb_toggle’</span>).click(<span class="hljs-function"><span class="hljs-keyword">function</span>() </span>{ $<span class="hljs-keyword">this</span> = $(<span class="hljs-keyword">this</span>); setTimeout(<span class="hljs-function"><span class="hljs-keyword">function</span>()</span>{ $<span class="hljs-keyword">this</span>.closest(<span class="hljs-string">‘.et_pb_accordion’</span>).removeClass(<span class="hljs-string">‘et_pb_accordion_toggling’</span>); },<span class="hljs-number">700</span>); }); }); </span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>