Usar jQuery en WordPress

Reading time aprox: 3 minutes, 59 seconds

Usar jQuery en WordPress. Actualizado el 14/09/2020.

Cuando te pones en la labor de hacer una página web, te encuentras con la necesidad de crear elementos que, para su correcto funcionamiento, han de ser interactivos.

Como no es función del marcado HTML¹ ni del CSS² realizar estas animaciones e interacciones, solo queda usar un lenguaje de programación.

El lenguaje que la mayoría de los navegadores usan, es el javascript³, a veces escrito JavaScript.

Este lenguaje NO tiene nada que ver con el lenguaje «Java».

Usar jQuery en WordPress.

Como sabes, WordPress está programado en PHP⁴, ¿Por qué no usar este mismo lenguaje?; la razón es que PHP está ejecutado en el servidor y NO en el navegador del cliente, así que no puede interactuar con este.

Por tanto, necesitamos del lenguaje javascript para hacer cosas como menús desplegables, cambios dinámicos de colores, cambios de fuente, etc. (la imaginación al poder).

Pero cuando tienes muchas cosas que necesitan control de interacción, es aconsejable usar ayudas; imagina que quieres saber cuánto es un valor (digamos 34) repetido unas cuantas veces (digamos 70), si quieres, puedes sumar el valor 34 unas 69 veces, pero es más fácil si puedes multiplicar 34 x 70.

A esta función, la hemos llamado «multiplicación», de igual manera, tenemos funciones que nos permiten agilizar el trabajo y evitar trabajos repetitivos en javascript y, estas funciones están agrupadas en «librerías» de funciones.

«jQuery» es una librería de funciones de javascript, que nos permite trabajar de forma cómoda con el DOM⁵ del navegador.

WordPress incorpora, de forma nativa, la biblioteca jQuery, por lo que cualquier programador de Temas o Plugins, puede hacer uso de ella.

Al ser parte del corazón de WordPress, esta biblioteca suele estar actualizada pero, hay razones para usar otras versiones de la biblioteca jQuery, distinta a la que viene incorporada.

Cómo instalar correctamente jQuery en WordPress

Si lo que quieres es hacer que un elemento de tu página sea interactivo, es posible que quieras desarrollar todo su entorno de funciones, acciones y reacciones, en javascript, a fin de cuentas, no vale la pena cargar tus páginas con código inútil, no necesitas una librería entera, para hacer una única cosa.

Pero si pretendes que varios elementos puedan ser interactivos, lo más sensato es cargar una librería que nos de apoyo a varios elementos, en distintas páginas.

Para hacer esta carga de librería, lo correcto es realizarla en la cabecera del documento, de forma que esté disponible para todos los elementos, no cargarla en un espacio específico (como un elemento «<div>» concreto). (Actualización: Si no recuerdas cómo actualizar la cabecera, consulta: Cómo poner código en la cabecera en WordPress).

Sobre el modo de compatibilidad de jQuery

Como he mencionado anteriormente, WordPress trae cargada una copia de la librería jQuery, pero al contrario de lo que se acostumbra en otros proyectos, no puedes usar la consabida llamada con el símbolo «$», por razones de compatibilidad.

Por lo general, estamos acostumbrados a que al usar la librería jQuery, tengamos código como:

$('.escondible').on('click', function() {
    $(this).hide();
})

pero por razones de compatibilidad, es decir, posibles conflictos con otras librerías, para usar jQuery en WordPress, debes usar:

jQuery('.escondible').on('click', function() {
    jQuery(this).hide();
})

Claro que, si tienes que escribir el nombre jQuery un millón de veces, el trabajo resultará tedioso, por lo que puedes usar una alternativa.

Como te has imaginado, el símbolo «$» no es más que un alias que la biblioteca asigna a «jQuery» para facilitar el trabajo, así que podemos hacer unos pequeños cambios, de forma que podamos usar un alias a nuestra elección.

Esto se puede hacer fácilmente, introduciendo una declaración de alias al principio del «script». Por ejemplo:

    var $j = jQuery.noConflict();

y entonces, las llamadas a la librería, debes hacerlas con «$j». Así, el ejemplo anterior sería:

$j('.escondible').on('click', function() {
    $j(this).hide();
})

Cómo añadir scripts jQuery en WordPress

Una de las formas más sencillas de añadir scripts jQuery en WordPress, es a través del proceso de «encolar» (no, no hay que usar cola para pegar nada); en este caso se trata de una traducción inexacta de la palabra en inglés «enqueue», que indica poner en la cola (el último de la fila).

En un proyecto realizado en HTML, usarías la etiqueta «link», pero en WordPress debes hacerlo de forma distinta (aunque el resultado en la página final sea el mismo):

Debes poner un pequeño «snippet» en el archivo functions.php:

function mi_tema_scripts() {
    wp_enqueue_script( 'mi_script_jquery', get_template_directory_uri() . '/js/mi-script-jquery.js', array( 'jquery' ), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'mi_tema_scripts' );

La función de «encolar» tiene cinco argumentos:

1. $handle (identificador) – es un identificador único que puedes usar para referirte a tu script.
2. $src – la localización del archivo que contiene el script.
3. $deps – un arreglo de dependencias.
4. $ver – el número de versión de tu script.
5. $in_footer – en caso de ser verdadero («true»), indica a WordPress que cargue este script en el pie de página (por defecto se carga en la cabecera).

No te aconsejo cargarlo en la cabecera, ya que puede ralentizar la carga de las páginas y provocar errores si el script se ejecuta sin estar el DOM totalmente cargado.

Si lo que quieres es usar la librería jQuery en la parte de administración de WordPress, el funcionamiento es el mismo, salvo que la función que debes usar, en lugar de add_action( ‘wp_enqueue_scripts’, ‘mi_tema_scripts’ ); ha de ser add_action( ‘admin_enqueue_scripts’, ‘mi_tema_scripts’ );, que usa los mismos parámetros.

Usar una versión de jQuery distinta.

En algunos casos, puede que quieras usar una versión de jQuery distinta de la que viene «de fábrica» y, aunque la forma de uso no cambiará, si debes asegurarte de cargar la versión que tu necesitas.

Para hacer esto, puedes recurrir a varios métodos; la forma simple y sin complicaciones, es usar:

Un plugin como «jQuery Updater» (https://es.wordpress.org/plugins/jquery-updater/), que te permite actualizar jQuery a su última versión, independientemente de WordPress.

El plugin «jQuery Manager for WordPress» (https://es.wordpress.org/plugins/jquery-manager/) te permite además escoger la versión que quieres cargar.

O de otra forma, la forma manual, es introducir en tu archivo functions.php:

function reemplazar_version_jquery() {
    wp_deregister_script( 'jquery' );
    // Cambia la URL si quieres cargar una copia en local de jQuery en tu servidor.
    wp_register_script( 'jquery', "https://code.jquery.com/jquery-3.1.1.min.js", array(), '3.1.1' );
}
add_action( 'wp_enqueue_scripts', 'reemplazar_version_jquery' );

Conclusión

Cualquiera que sea tu intención para usar jQuery, asegúrate de cargar correctamente los scripts, si quieres evitarte disgustos más adelante.

Recuerda que puedes cambiar el funcionamiento predeterminado de WordPress para que cargue exactamente la librería que quieres usar, pero eso también, siguiendo las reglas.

Bienvenido al mundo del desarrollo (por si no te lo han dicho antes). 🙂

Recuerda, #QuédateEnCasa, #UsaMascarilla, juega, experimenta y, sobre todo, ¡divertirte!

¡Gracias por leernos!

¡Tus comentarios y preguntas nos ayudan a mejorar, por favor comenta!

1. HyperText Marckup Language ↩

2. Cascading Style Sheets ↩

3. Un lenguaje de programación de secuencias de comandos que se usa con más frecuencia para agregar funciones interactivas a páginas web. ↩

4. Personal Home Page ↩

5. Document Object Model ↩