Cómo usar jQuery en sitios web de WordPress

La librería (jQuery) es una de las librerías de JavaScript más famosas. El objetivo principal de esta librería es proporcionar una tecnología gratuita y de código abierto para desarrolladores y diseñadores de sitios web, permitiéndoles usar el lenguaje JavaScript fácilmente mientras diseñan las interfaces frontales de sitios de Internet. A través de este artículo te presentaremos la librería jQuery, su importancia, por qué la usamos en el desarrollo de sitios web, y cómo se trabaja con la librería jQuery en WordPress usando complementos o sin ellos. También explicaremos cómo puedes usar una versión diferente de la librería jQuery en WordPress en lugar de la versión actual que viene integrada automáticamente.

Contenido del artículo Métodos para cargar jQuery en sitios web Uso de jQuery en WordPress Concepto del modo de compatibilidad (sin conflictos) en WordPress Métodos de uso de jQuery en sitios WordPress Primero: Usar la librería jQuery integrada en WordPress Primer método: Usando complementos de WordPress.

Segundo método Incluir scripts jQuery en WordPress manualmente

Segundo: Trabajar con la librería jQuery estándar dentro de WordPress ¿Qué es la librería jQuery? jQuery es una librería famosa de librerías de JavaScript creada en 2006 por John Resig bajo el lema (write less, do more) es decir (escribe menos, haz más) para facilitar a los desarrolladores y diseñadores de sitios web el uso de JavaScript en sus sitios.

En lugar de escribir largas y tediosas instrucciones de código en JavaScript para lograr una tarea específica, puedes usar instrucciones jQuery abreviadas que logran la misma tarea con menos recursos. Sin embargo, para aprender a usar jQuery es necesario que tengas conocimientos básicos del lenguaje JavaScript y comprendas la lógica de programación. Si no tienes suficiente conocimiento de JavaScript, te recomiendo que leas este artículo.

En resumen, jQuery es una librería JavaScript ligera diseñada para facilitar la escritura de código JavaScript para navegadores web. Se puede expresar en una sola oración como (una forma de escribir JavaScript más fácilmente). Si aprendes jQuery bien, podrás agregar comportamiento dinámico y efectos de animación a sitios web estáticos que no se pueden lograr solo con código HTML y CSS.

Esto se hace usando instrucciones fáciles y simples. Ya sea que quieras navegar suavemente en tu página web, agregar efectos de animación o formatos específicos o realizar acciones específicas en algunos elementos de la página, o llamar a scripts Ajax u otras tareas... aprender jQuery te facilitará llevar esto a cabo.

Para aprender jQuery necesitas entender el concepto de Eventos que ocurren en los elementos, que son simplemente métodos que expresan comportamientos que los visitantes realizan mientras interactúan con las páginas web, como hacer clic con el ratón en un elemento de la página, o presionar una de las teclas del teclado...

También debes entender el concepto de Acciones, que representan las instrucciones que ejecutarás cuando ocurra un evento específico en uno de los elementos del sitio (en resumen, es la acción que debe realizarse cuando ocurre el evento). Este escenario se expresa en el lenguaje jQuery dentro del código de interfaz frontal de las páginas de la siguiente manera: $("element").event_name(function() {// action}); Nota que las instrucciones de jQuery comienzan con el símbolo $ seguido por el elemento al que queremos escuchar los eventos que ocurren en él, para ejecutar la acción cuando ocurra el evento requerido. La declaración anterior significa en resumen (siempre que ocurra un evento event en un elemento element, ejecuta una acción action específica).

Para aclarar mejor la idea, supongamos que queremos escribir un código que haga lo siguiente: cuando el usuario haga clic con el ratón dentro de un elemento de menú específico en una página web (menu-item-1), se cambiará el color de otro elemento específico en la página con la identificación p2 al color amarillo. Para escribir el código anterior en lenguaje JavaScript debemos escribir lo siguiente: document.querySelector('#menu-item-1').addEventListener('click',function(){ document.getElementById("p2").style.color = "yellow"; }); En cambio, se puede simplificar la tarea anterior y hacerlo usando jQuery de la siguiente manera: $('#menu-item-1').click(function(){ $("p2").css("background-color", "yellow"); }); Nota que hemos acortado las instrucciones de programación y hemos hecho la redacción mucho más simple y comprensible.

La función addEventListener de JavaScript en el primer código fue reemplazada, que aquí escucha el evento click que ocurre cuando el usuario hace un clic con el botón izquierdo del ratón

en un elemento

de menú específico, que es el elemento menu-item-1. En su lugar, fue reemplazado en el segundo código por un evento llamado click en jQuery, y solo necesitábamos escribir una palabra después del nombre del elemento menu-item-1.

De este ejemplo simple, podemos deducir la diferencia fundamental entre usar JavaScript y jQuery, especialmente cuando se trata de la simplicidad en la comprensión y la velocidad de ejecución que destaca el código implementado usando la librería jQuery sobre su contraparte en JavaScript. Lee también sobre la librería jQuery en la enciclopedia Hasub Métodos para cargar jQuery en sitios web Hay dos formas generales de cargar jQuery o cualquier script en cualquier sitio web. Primer método: Descargar el script jQuery y cargarlo directamente en la carpeta principal del sitio. Por ejemplo, puedes descargar el archivo jquery.js a una carpeta js en tu sitio, luego puedes copiar y pegar el siguiente código en el encabezado Html de las páginas del sitio.

Segundo método: Leer el script jQuery a través de una red de entrega de contenidos CDN. Después de seleccionar la versión que deseas descargar para tu sitio

(por ejemplo, jQuery versión 3.x) puedes referirte a ella escribiendo el siguiente código en el encabezado Html de las páginas del sitio: Si quieres usar la librería jQuery oficial, escribe el siguiente código: Y si quieres usar la librería jQuery que proporciona Google, escribe lo siguiente: Después de llamar a la librería, puedes comenzar a llamar a instrucciones jQuery, donde las instrucciones se escriben de manera similar a escribir instrucciones JavaScript dentro de las etiquetas >script< donde la forma general de escribir instrucciones es la siguiente:

$('#foo')… También puedes guardar las instrucciones que desees en un archivo con extensión .js, digamos que se llama my-jquery.js, y luego llamarlo a través del enlace del archivo, aquí no hay necesidad de las etiquetas >/script< dentro del archivo sino que puedes escribir las instrucciones (que comienzan con $) directamente en el archivo.

Características de la librería jQuery Aunque existen muchas

librerías de JavaScript, la librería jQuery ha ganado gran popularidad por ser: Ligera: El pequeño tamaño de la librería jQuery no ralentiza significativamente las aplicaciones y los sitios web, además puedes agregarla a tu sitio a través de una red de entrega de contenidos (CDN) y evitar su descarga en tu sitio. Compatible con la mayoría de navegadores: La librería jQuery funciona eficientemente en todos los navegadores, incluso los antiguos. De código abierto: Por lo tanto, cualquier desarrollador puede desarrollar sus complementos usando esta librería.

Fácil de aprender: Los desarrolladores pueden aprenderla en poco tiempo en comparación con otras librerías y marcos de JavaScript y otras tecnologías de programación, porque es concisa y breve. Facilita el uso de la tecnología AJAX sin esfuerzo o código largo: AJAX es una tecnología que funciona de forma asincrónica con el resto del código en el sitio, por lo que puedes actualizar su contenido sin necesidad de actualizar toda la página. Proporciona soporte: La librería jQuery tiene una excelente documentación donde puedes encontrar mucha información útil sobre todo en esta librería y aprender cómo usarla e instalarla.

Uso de jQuery en WordPress WordPress viene con una versión de la librería jQuery cargada implícitamente, lo que significa que puedes usar instrucciones jQuery directamente sin escribir ninguna llamada a la librería oficial en el código de las páginas e implementar los cambios diferentes que deseas en tu sitio. Puedes verificar esto y asegurarte de que jQuery se cargue por defecto en tu sitio WordPress viendo la fuente de cualquier página del sitio.

Notarás un código similar al siguiente

Por supuesto, el número de versión varía según tu versión de WordPress. Esto significa que puedes usar instrucciones jQuery directamente en tu sitio WordPress.

Sin embargo, en realidad debes notar que jQuery integrado en WordPress por defecto es ligeramente diferente de jQuery estándar, está diseñado específicamente para WordPress y no usa instrucciones jQuery estándar que comienzan como explicamos con el símbolo especial $. La razón por la que no podemos usar instrucciones jQuery estándar que comienzan con el símbolo de dólar $ y deshabilitarlas en WordPress es evitar conflictos con otras librerías de JavaScript disponibles en WordPress, ya que muchas librerías de JavaScript usan el símbolo de dólar $ como función o nombre de variable.

Y quizás la pregunta que se te ocurre ahora es: ¿Cómo puedo entonces distinguir instrucciones jQuery en WordPress? Para resolver este problema, el símbolo $ en WordPress fue reemplazado por la palabra jQuery para evitar conflictos con otras librerías (se puede decir que la palabra jQuery es un alias o sustituto del símbolo $ en WordPress) y por lo tanto, si tenemos las siguientes instrucciones de código estándar en la librería jQuery estándar:

/* Regular jQuery */ $('.hideable').on('click', function() { $(this).hide(); }) escribirás las instrucciones de la siguiente manera para ser compatible con la librería jQuery de WordPress: /* Compatibility Mode */ jQuery('.hideable').on('click', function() { jQuery(this).hide(); }) Sin embargo, escribir jQuery varias veces en un texto lo hace difícil de leer e incrementa su tamaño. Por lo tanto, si aún deseas usar el símbolo de dólar antes de cada instrucción jQuery en WordPress como es normal, hay varias formas de sortear esto y hacer que el símbolo $ funcione sin conflictos.

Primera forma: Si quieres escribir el código en el encabezado

de la página, puedes usar la función ready del documento document y envolver el código estándar (Regular jQuery) dentro de él de la siguiente manera: jQuery(document).ready(function( $ ) { $('.hideable').on('click', function() { $(this).hide(); }) }) Segunda forma: Si quieres escribir el código de programación en el pie de página (que es lo que se prefiere hacer en la mayoría de los casos), puedes envolver el código en una función anónima cuya tarea es convertir $ a jQuery en el código estándar (Regular jQuery) de la siguiente manera: (function($) { $('.hideable').on('click', function() { $(this).hide(); }) })( jQuery ); Tercera forma: Hay otra forma simple de evitar escribir la palabra jQuery, que es definir una variable llamada $j o cualquier otro nombre que elijas y pasarle el siguiente valor para evitar conflictos: var $j = jQuery.noConflict(); Ahora $j se ha convertido en un alias para la función jQuery, después escribe el código como es normal reemplazando jQuery con $j (seguirás siendo capaz de usar el nombre jQuery además del nuevo alias $j en el resto del sitio) Concepto del modo de compatibilidad (sin conflictos) en WordPress El modo de compatibilidad (Compatibility Mode) o modo sin conflictos (No Conflict) en WordPress significa que una vez que se carga el código jQuery en WordPress, el sitio entra en un modo que ayuda a prevenir conflictos con cualquier otra librería de JavaScript que puedas usar en ese sitio.

En realidad, el modo noConflict significa que el símbolo $ estándar usado en jQuery (y otras librerías de JavaScript) no está disponible para su uso y debe ser reemplazado por la palabra jQuery. Ten en cuenta que la versión de jQuery que viene con WordPress llama automáticamente al método jQuery.noConflict. Sin embargo, si estás cargando una versión diferente de jQuery o deseas reemplazar la palabra jQuery con un símbolo más corto, tendrá que ser llamado manualmente.

Este modo se activa escribiendo la siguiente línea de programación antes de escribir cualquier código jQuery: jQuery.noConflict(); Por lo tanto, esta llamada tiene muchos beneficios, ya que garantiza que no haya conflictos entre la librería jQuery y cualquier otra librería en JavaScript, además de permitir al programador crear un nuevo símbolo que se coloque en lugar de la palabra jQuery como mencionamos anteriormente. var $wp = jQuery.noConflict() // evitar conflictos jQuery(document).ready(function($){ $wp('tr').change(function(){ $wp('.total input').text("wpar!"); }); });

Métodos de uso de jQuery en sitios WordPress Después de que

hemos aprendido sobre las formas de escribir instrucciones jQuery en el estilo compatible con WordPress, pasamos a explicar métodos de uso de jQuery con WordPress. Aquí tenemos dos casos: Primer caso: Usa jQuery integrado en WordPress. Segundo caso: Descargar una versión estándar de jQuery y usarla en lugar de jQuery integrado en WordPress Primero: Usar la librería jQuery integrada en WordPress Tienes dos formas de usar la librería jQuery integrada en WordPress, ya sea usando complementos listos o manualmente a través del código. En los siguientes párrafos te explicaremos estos dos métodos y aclararemos cuál es la diferencia entre ellos, ¿cuál es el método que se adapta a ti?

Primer método: Usando complementos de WordPress. Existen varios complementos mediante los cuales puedes agregar scripts y textos de programación a WordPress, y el complemento (Insert Headers and Footers) se considera uno de los mejores complementos gratuitos a través del cual puedes agregar códigos jQuery o JavaScript e incluso CSS a tu sitio WordPress fácilmente. Después de instalar y activar el complemento, puedes ir a la pestaña Configuración dentro del panel de control de WordPress e identificar el nombre del complemento Insert Headers and Footers de la siguiente manera: Se abrirá una ventana que contiene tres cuadros de texto que te permiten escribir el código en una de las siguientes ubicaciones en la página (Header/Footer/Body). Puedes colocar los códigos específicos de jQuery en la sección que desees para que se escriba en uno de los archivos de plantilla actual en tu sitio como se muestra en la imagen: Nota: Recuerda que la mejor práctica es llamar a los códigos jQuery

como es el caso con todos los códigos de JavaScript en el pie de página para que se carguen al final de la página y no afecten la velocidad de carga. Segundo método Incluir scripts jQuery en WordPress manualmente Al trabajar con WordPress, no se recomienda que agregues scripts jQuery a las páginas de tu sitio de la manera tradicional usando la etiqueta >script< para evitar conflictos y otros problemas potenciales, tendrás que cargar jQuery usando el siguiente método:

1-Crea el archivo de texto en el que deseas escribir las instrucciones, y debe tener la extensión js, por ejemplo new-jquery.js. Cárgalo en los archivos de la plantilla de tu sitio. 2-Accede a los archivos del sitio a través de un programa FTP, o iniciando sesión en el panel de control de alojamiento Cpanel, selecciona Filemanager, luego especifica la carpeta raíz de tu sitio public_html, seguido de la carpeta wp-content, luego themes, e ingresa a la carpeta de la plantilla actual instalada como plantilla predeterminada en tu sitio, digamos que la plantilla instalada es una plantilla de periódico, por ejemplo.

3-Carga tu archivo new-jquery.js en la carpeta de la plantilla (es preferible que organices tus archivos y coloques este archivo en una nueva subcarpeta dentro de la carpeta principal de tu plantilla, digamos una carpeta llamada js). Nota: También es recomendable crear una plantilla secundaria para la plantilla actual en tu sitio y escribir las instrucciones en ella, ya que esto te garantizará que los archivos de tu plantilla original permanezcan igual en caso de que la plantilla principal padre se actualice. 5- Ahora debes vincular este archivo de texto new-jquery.js que contiene códigos jQuery al archivo functions.php de tu plantilla. Encontrarás el archivo Functions.php dentro de la carpeta de plantilla actual de tu sitio.

El archivo functions.php se considera uno de los archivos más importantes de la plantilla, ya que la información de programación redactada dentro de él se ejecuta directamente cuando el sitio web se carga en el navegador. Puedes consultar una explicación detallada sobre este archivo en nuestro siguiente artículo. Ahora debes indicarle a la plantilla que registre el archivo new-jquery.js y lo muestre en su lugar correcto. Para hacer esto, usaremos la función predefinida wp_enqueue_script().

Esta función obtiene archivos jQuery (o cualquier archivo de script en general) de la ruta que se le pasa, y ayuda a WordPress a saber qué archivo debe cargarse primero indicándole cuándo cargar un archivo, dónde cargarlo y cuáles son sus dependencias. Esta función añade los scripts que deben ejecutarse a una cola de espera según el principio de Enqueueing, que es uno de los métodos más apropiados para el sistema de gestión de contenidos para agregar textos jQuery o scripts de programación en general a WordPress. Es una forma metódica de cargar códigos jQuery o Javascript en WordPress conociendo sus dependencias.

WordPress proporciona a través de esta función una cola de espera para cada archivo agregado a la fila para asegurar que todo funcione correctamente. Puedes cargar esta función en el archivo Functions.php como se muestra en el siguiente código, que se encarga de cargar el archivo new-jquery.js en todas las páginas del sitio en la sección Footer. El lugar para escribir este código es debajo de donde se cargó jQuery de WordPress y antes del siguiente código:

La primera línea en el código anterior ("wp_deregister_script ('jquery") es una instrucción para no leer jQuery que proporciona WordPress de forma predeterminada. La segunda línea wp_enqueue_script se encarga de leer la nueva versión de jQuery que queremos usar en nuestro sitio WordPress (pasamos aquí el enlace de la versión 3.3.1) y puedes escribir la dirección URL de la versión apropiada que deseas usar en tu sitio. También, en lugar de modificar el archivo header, puedes agregar el siguiente código en el archivo functions.php if(!function_exists('wpc_redefine_assets')){ function wpc_redefine_assets(){ wp_deregister_script( 'jquery' ); wp_register_script( 'jquery','https://code.jquery.com/jquery-3.6.0.js', [], '3.6.0', false ); } add_action( 'wp_enqueue_scripts', 'wpc_redefine_assets' ); } Como mencionamos anteriormente, WordPress viene con una versión específica de la biblioteca jQuery, y se puede usar una versión diferente de la biblioteca jQuery, pero esto causa conflictos en muchas de las características que proporciona la biblioteca jQuery, y la razón es la existencia de dos versiones de jQuery.

Por esta razón, se encontró una solución a este problema usando wp_deregister_script() para desregistrar jQuery de WordPress y luego incluir la versión de jQuery que deseas agregar como se muestra en el código anterior. Después de eso, puedes escribir códigos jQuery de las mismas formas que explicamos anteriormente (a través de plugins o manualmente modificando los archivos de la plantilla). Conclusión. En el artículo de hoy ofrecimos una descripción general de la biblioteca jQuery, que se considera una de las bibliotecas de Javascript más famosas, también mostramos su importancia y cómo incluirla en un sitio WordPress de diferentes formas, ya sea a través de plugins o código manual, y explicamos cómo usar la biblioteca incluida con WordPress por defecto o usar otra biblioteca estándar.

Explicamos el concepto del modo de no conflicto, cuyo objetivo es ayudar a garantizar que no haya problemas de compatibilidad entre jQuery y otras bibliotecas de JavaScript cargadas en WordPress. Finalmente, te recordamos que adquirir habilidad en cómo trabajar con jQuery hará que tu trabajo sea más fácil y de mejor calidad, así que no dudes en probarlo en tu sitio y conocer los efectos visuales que te proporciona y que no se pueden crear usando solo HTML o CSS para distinguir la apariencia de tu sitio.