• jQuery
• WordPress

Cómo añadir jQuery a nuestro tema WordPress de forma adecuada

A pesar de que WordPress lleva ya años entre nosotros y de que el método para añadir scripts a nuestros temas y plugins ha permanecido inalterado durante este tiempo, todavía existe cierta confusión sobre cómo exactamente debemos hacerlo.  Como jQuery es uno de los frameworks más usados de javascript veamos como anexarlo a nuestro tema o plugin de WordPress.

El problema: jQuery’s Compatibility Mode

Antes de empezar a anexar scripts a WordPress, vamos cuál es la compatibilidad con WordPress. WordPress viene con una copia de jQuery que podemos usar en nuestro código. Cuando el jQuery de WP es cargado, usa el modo de compatibilidad, que es un mecanismo que evita conflictos con otros lenguajes. Por ello no podemos usar el símbolo $ directamente como lo hacemos en otros proyectos al escribir jQuery. Cuando escribamos jQuery para WordPress debemos usar jQuery en lugar de $. Por ejemplo, veamos el siguiente código:

/* Regular jQuery */
$('.hideable').on('click', function() {
      $(this).hide();
})

/* Compatibility Mode */ 
jQuery('.hideable').on('click', function() { 
     jQuery(this).hide(); 
})

Recordemos que, si estamos aprendiendo jQuery, el símbolo $ no es más que un alias de jQuery(), es decir, un alias a la función. La sintaxis básica es:

$(selector).action():

Donde tenemos:

• Un símbolo dólar para definir la función jQuery.
• Un (selector) para acceder a los elementos HTML.
• Una acción jQuery que será desarrollada sobre los elementos.

Pero que no cunda el pánico, con unas pequeñas modificaciones podremos usar el símbolo $ con WordPress tal y como lo hacemos de forma regular, ya que muchos piensan que usar jQuery hace el código más largo y difícil de leer.

Podemos envolver el código en una función anónima que mapeará jQuery a $, de la siguiente manera:

jQuery(document).ready(function ($) {
          alert('jQuery está cargado');
});

Enlazando nuestros scripts jQuery a nuestro tema.

Ahora que ya sabemos como escribir código válido jQuery para WordPress, vamos a enlazar nuestros propios scripts a nuestro tema. Este proceso se llama en WordPress enqueueing (poner en la cola). En un sitio WordPress normal usamos un elemento <link> para añadir scripts.

WordPress acabará haciendo lo mismo al final, pero en este caso debemos usar una función específica de WordPress para lograrlo. De esta forma, WordPress se encargará de todas las dependencias por nosotros.

Si estamos trabajando en un tema de WordPress, podemos usar la función wp_enqueue_script() en nuestra archivo functions.php. Por ejemplo:

function my_theme_scripts() {
    wp_enqueue_script( 'my-great-script', get_template_directory_uri() . '/js/my-great-script.js', array( 'jquery' ), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_theme_scripts' );

La función admite cinco argumentos. El primero de ellos es un identificador que usaremos para referirnos al script, el segundo es la localización del script, el tercero es un array de dependencias. En el ejemplo se ha añadido jQuery como dependencia porque el script lo usará. Si creásemos otro script que dependiera de éste que acabamos de poner en la cola deberíamos añadirlo a sus dependencias, de esa forma WordPress sabrá que script cargará primero.

El cuarto parámetro es la versión del script y el quinto permite a WordPress saber dónde poner el script. Por defecto los scripts serán cargados en la cabecera del sitio, lo cual supone una mala praxis porque ralentizará la carga de la página (los navegadores interrumpen la carga de cualquier elemento cuando encuentra un bloque javascript). Deberíamos cargar todos nuestros scripts en el footer siempre que sea posible, por lo que este quinto parámetro siempre debería valer true.

Enlazando nuestros scripts jQuery a nuestro tema (ACTUALIZADO).

Hasta hace poco ésta era la forma de enlazar nuestros scripts y especificar sus dependencias, pero si leemos el Codex de WordPress comprobaremos que para las últimas versiones se recomienda primero registrar el script con la función wp_register_script() y luego ponerlo en la cola. Si sólo lo ponemos en la cola no se producirá ningún error, pero puede que el script no llegue a ejecutarse nunca. Por tanto, el código actualizado para las últimas versiones de WordPress quedaría así:

function my_theme_scripts() {
    wp_register_script( 'my-great-script', get_template_directory_uri() . 
          '/js/my-great-script.js', array( 'jquery' ), '', true );
    wp_enqueue_script( 'my-great-script' );
}
add_action( 'wp_enqueue_scripts', 'my_theme_scripts' );

Añadiendo scripts al área del administrador

Podemos añadir también scripts al admin área de WordPress. Las funciones para llevar esto a cabo son las mismas, lo único que en este caso debemos usar un hook diferente; en lugar de usar el hook wp_enqueue_scripts necesitamos usar admin_enqueue_scripts. Por ejemplo:

function my_admin_scripts() {
    wp_enqueue_script( 'my-great-script', plugin_dir_url( __FILE__ ) .
          '/js/my-great-script.js', array( 'jquery' ), '1.0.0', true );
}
add_action( 'admin_enqueue_scripts', 'my_admin_scripts' );