Cuando creas un theme o plugin para WordPress, muy frecuentemente se requiere usar jQuery (o cualquier otro framework javascript). WordPress tiene un API para manejar los ficheros que se incluyen, tanto scripts como estilos.
Estos son unos cuantos trucos muy útiles a la hora de usar javascript con WordPress.
En este post encontrarás...
Usa wp_enqueue_script()
La forma en que se incluye un script javascript en HTML es con el tag script. Incluir jQuery directamente sobre el theme con el tag script puede causar muchos conflictos. La manera correcta de hacerlo es:
function mi_inicio() {
if (!is_admin()) {
wp_enqueue_script('jquery');
}
}
add_action('init', 'mi_inicio');
De esta forma se incluye la última versión de jQuery. Con la instalación de WordPress se incluye la última versión de jQuery en el directorio wp-includes/js/jquery, así como otros frameworks conocidos.
Este código debe ser añadido en el plugin que estés desarrollando, o en el fichero functions.php de tu theme. La función is_admin se ejecuta para evitar que se incluya jQuery en tus páginas de administración.
Puedes encontrar más información sobre la función wp_enqueue_script en Anieto2K.
Cargar jQuery en WordPress desde el CDN de Google
La llamada a la función wp_enqueue_script(‘jquery’) cargará la última versión de jQuery, que se encuentra en el directorio wp-includes/js/jquery. Si deseas cargar jQuery desde el CDN de Google, deberás de usar el siguiente truco:
function mi_inicio() {
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', 'mi_inicio');
Hay varios motivos por los que cargar el framework javascript desde los servidores de Google.
También existen plugins que ya hacen este trabajo, como el plugin Use Google libraries.
Cargar jQuery al final del theme
Por defecto, cuando se usa la función wp_enqueue_script, se añade el script en la sección head del documento HTML. Puede ser que te interese incluir el framework javascript al final, justo antes de que se acabe el body, para disminuir la velocidad con que carga la página. En este caso debes de usar el parámetro $in_footer de la función wp_register_script. Puedes ver el código modificado a continuación.
function mi_inicio() {
if(!is_admin()) {
wp_deregister_script('jquery');
wp_register_script('jquery', '/wp-includes/js/jquery/jquery.js', false, '1.3.2', true);
//Con este código se cargaría en el pie, pero usando el API de Google
//wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js', false, '1.3.2', true);
wp_enqueue_script('jquery');
}
}
add_action('init', 'mi_inicio');
En el último parámetro se pasa un true que indica que el script se cargue en el pie de página.
Añadir jQuery como una dependencia
Si tienes un script que has desarrollado (theme.js), y este a su vez hace uso de otros scripts u otros frameworks (jQuery), es buena idea cargarlos como dependencia del script que estás creando, de esta forma se asegura que siempre se cargarán antes al ser una dependencia.
function mi_inicio() {
if (!is_admin()) {
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', true);
wp_enqueue_script('jquery');
// cargar el fichero js de mi theme: js/theme.js
wp_enqueue_script('my_script', get_bloginfo('template_url') . '/js/theme.js', array('jquery'), '1.0', true);
}
}
add_action('init', 'mi_inicio');
En el tercer parámetro pasamos un array con el conjunto de dependencias que queremos cargar para ese script, en este caso jQuery.
Usar jQuery adecuadamente
El framework jQuery incluido con WordPress llama automáticamente a la función jQuery.noConflict(). Esto provoca que la forma habitual de ejecutar la función jQuery, es decir, la función dolar ( $ ), por ejemplo $(‘id’).show() , no funcionará. Por el contrario, habrá que llamar a a la misma función de la siguiente forma: jQuery(‘id’).show().
Si estás usando el CDN de Google para cargar Javascript, es recomendable hacer la llamada a noConflict de forma manual para evitar posibles conflictos en el futuro.
Si quieres seguir usando la función dolar, puedes usar el siguiente código a modo de espacio de nombres:
jQuery(function ($) {
/* Puedes usar $ con seguridad para hacer referencia a jQuery */
});
Sabiendo estos trucos se tiene una comprensión muy buena (y necesaria) sobre como usar los ficheros Javascript en un theme de WordPress, algo imprescindible a la hora de crear un theme sin hacer «chapucillas».
Fuente: Eric Martin