Cómo usar jQuery en WordPress

Cómo usar jQuery en WordPress

A estas alturas, hablar extensamente de WordPress o de jQuery no aportaría nada nuevo a un blog de desarrollo web. ¿Y presentarlos brevemente de nuevo? Habrá alguien que esté empezando hoy, ¿no?

WordPress es uno de los Sistemas de Gestión de Contenido (CMS) más populares del panorama, por su facilidad de instalación, su estructura personalizable y su ilimitado potencial, adaptándose a cualquier usuario, desde el más novato hasta el mayor de los Ninjas.
Jquery es un framework o biblioteca de Javascript que simplifica en gran medida la manera de interactuar con documentos html. Ya lo dice su emblema: “Escribe menos, haz más

¿Y si los mezclamos?
Puede que estemos ante uno de los matrimonios más bendecidos de los últimos años.
La versatilidad de jQuery con la usabilidad de WordPress: linaje asegurado.

Consideraciones previas

WordPress desde la versión 2.??? incluye por defecto en su paquete una referencia a la librería jQuery, por lo que ya no tendremos que incluir el archivo .js en nuestro servidor. Sólo tenemos que activarlo!

 

Dos formas de llamar a jQuery: La corriente y la eficiente

Hay varias formas de hacerlo y a todos nos ha pasado alguna vez, que no conseguimos que se cargue correctamente. El 99% de las veces se trata de un error humano (una url mal introducida, dos llamadas a distintas librerías de jQuery…)

1) Desde header.php (La forma corriente)

Bastaría con agregar esta línea de código en header.php En ella hacemos una llamada a la librería mediante la función wp_enqueue_script()

1
<!--?php wp_enqueue_script('jquery'); ?-->

Ahora sólo faltaría agregar el script que quieres ejecutar (por ejemplo para utilizar un plugin de jQuery. En nuestro ejemplo: MIARCHIVO.js).

1
<script type="text/javascript" src="&lt;?php bloginfo('template_directory'); ?&gt;/js/MI_ARCHIVO.js"></script>

Es importante que la función wp_enqueue_script() se declare justo antes de wp_head(); y que todos los scripts, archivos .js y .css se declaren, para mayor seguridad, después de wp_head(); Así quedaría entonces implementada la llamada a jQuery y al plugin JQuery Chained

1
2
3
4
5
6
<!-- ENQUEUE JQUERY -->
<!--?php 
wp_enqueue_script('jquery');
wp_head(); 
?-->
<!-- LLAMADA A PLUGIN JQUERY CHAINED---><script charset="utf-8" type="text/javascript" src="&lt;?php bloginfo('template_directory'); ?&gt;/js/jquery.chained.js"></script>

2) Desde funcions.php (La forma eficiente)

Si cargamos jQuery desde una función que nosotros creemos y la añadimos en funcions.php, no sólo evitaremos posibles problemas, sino que ahorraremos recursos evitando que jQuery se carge desde el escritorio. Y es que cuando llamamos a la función wp_enqueue_script() se añade el script en la sección head del documento hmtl.

Nos creamos nuestra función my_init()y llamamos a jQuery con la función que antes mencionamos wp_enqueue_script() para luego ejecutarla. Con esta forma, lo que hacemos es cargar la librería que viene por defecto en WordPress.

1
2
3
4
5
6
function my_init() {
	if (!is_admin()) {
		wp_enqueue_script('jquery');
	}
}
add_action('init', 'my_init');

Pero algunas veces puede ser que no nos interese o que venga desactualizada. Podemos hacer lo mismo, pero llamando a la librería de jQuery que nos proporciona Google. Así podemos nosotros mismos, agregar la versión que queramos. En nuestro caso, la versión 2.0.3.

1
2
3
4
5
6
7
8
function my_init() {
	if (!is_admin()) {
		wp_deregister_script('jquery'); 
		wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js', false, '2.0.3'); 
		wp_enqueue_script('jquery');
	}
}
add_action('init', 'my_init');

Como puedes observar, sólo hemos añadido dos líneas más. Si dejamos comentadas (//) ambas líneas de código, estaríamos forzando a cargar la versión local, y si las dejamos sin comentar, cargaríamos la de Google.

Pero, ¿cómo podríamos conseguir la forma más eficiente de todas?
Pues cargando jQuery en el último momento, en el footer o pie de nuestra página, para disminuir la velocidad con que se carga.
Para ello, sólo debemos añadir el parámetro in_footer en el registro del script. Sólo habría que ponerlo a true en la llamada.

wp_register_script( $handle, $src, $deps, $ver, $in_footer );

Quedaría finalmente así: (desde Google)

1
2
3
4
5
6
7
8
function my_init() {
	if (!is_admin()) {
		wp_deregister_script('jquery'); 
		wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js', false, '2.0.3', true); 
		wp_enqueue_script('jquery');
	}
}
add_action('init', 'my_init');

 

Quedaría finalmente así: (desde local)
En este caso, hemos puesto la ruta local donde se aloja el .js

1
2
3
4
5
6
7
8
function my_init() {
	if (!is_admin()) {
		wp_deregister_script('jquery'); 
		wp_register_script('jquery', '/wp-includes/js/jquery/jquery.js', false, '1.3.2', true);
 
	}
}
add_action('init', 'my_init');

Uso de cookies

Este sitio web utiliza cookies para que usted tenga una mejor experiencia como usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies. Pinche el enlace para mayor información.

ACEPTAR
Aviso de cookies