5 consejos para usar jQuery con WordPress

A día de hoy pocos trabajan directamente con JavaScript para manejar la parte del cliente, se suelen usar frameworks que facilitan el trabajo y sin lugar a dudas, la referencia es jQuery. Cuando desarrollamos temas en WordPress (y plugins), por lo tanto, será bien probable que necesitemos de jQuery. Hay muchas formas de usarlo, pero vamos a explicar una serie de buenos métodos para evitar complicaciones.

Este texto es una traducción, adaptación y mejora del original en inglés: 5 tips for using jQuery with WordPress de Eric Martin.

1. Utiliza wp_enqueue_script()

Cuando manejamos jQuery a secas, sin WordPress, usamos directamente la etiqueta <script> y llamamos a nuestro fichero, ya esté en local o en un CDN. Sin embargo, en WordPress las cosas cambian, aunque pueda funcionar, no debemos hacerlo.

Para ello tenemos una función específica: wp_enqueue_script y podemos unir la carga de jQuery a una acción en concreto. Al igual que esta función existe otra para cargar estilos: wp_enqueue_style.

Lo ideal sería evitar asimismo que jQuery se cargue en el escritorio, ya que no hace falta y es una forma tonta de gastar recursos. El resultado:

function my_init() {
 if (!is_admin()) {
  wp_enqueue_script('jquery');
 }
}
add_action('init', 'my_init');

2. Cargar jQuery desde Google

Como WordPress incluye jQuery, al hacer lo anterior lo incluirá automáticamente gracias a que dentro de WordPress está el fichero y viene registrado. Sin embargo, si quieres cargar jQuery desde Google, MSDN, Yahoo!, el mismo sitio de jQuery o donde prefieras (para tener todo actualizado, por motivos de rendimiento, etc.), debes hacer lo siguiente:

function my_init() {
 if (!is_admin()) {
  // comment out the next two lines to load the local copy of jQuery
  wp_deregister_script('jquery'); 
  wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js', false, '1.3.2'); 
  wp_enqueue_script('jquery');
 }
}
add_action('init', 'my_init');

3. Carga jQuery en el pie de página

Por razones de rendimiento, sería conveniente que cargaras JavaScript al final de la página. Para ello, sólo debemos añadir el parámetro in_footer a nuestra petición en el registro del script:

wp_register_script('jquery', 'URL_fichero', false, '1.3.2', true);

4. Añade jQuery como una dependencia

Si usas jQuery como una dependencia de tu fichero mitema.js, lo mejor que puedes hacer es pedirle a WordPress de forma explícita que así lo haga y cargue dicho fichero una vez se haya cargado jQuery. ¿Cómo? Añadiendo un array de dependencias cuando registramos el script de mitema.js.

wp_enqueue_script('my_script', get_bloginfo('template_url') . '/mifuncion.js', array('jquery'), '1.0', true);

5. Referencias a jQuery

Ya sabréis si alguna vez habéis experimentado en este sentido que la popular notación de jQuery: $() no puede usarse directamente en estos casos. Para poder hacerlo, y evitar conflictos en el espacio de nombres con otros recursos en JavaScript, tendremos que hacer lo siguiente:

jQuery(function ($) {
 /* aquí podemos usar $ para referenciar jQuery */});