Cómo usar jQuery en WordPress

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');

2 Comentarios

  1. Buenas,

    acabo de instalar un plugin TCB en wp para poder usar tablas y mejorar el aspecto de mi web con diversas funciones preconfiguradas que trae (no sé mucho de programación php ni css)… el problema es que para que funcione el plugin tengo que comentar las lineas:

    //wp_deregister_script( ‘jquery’ );
    //wp_register_script( ‘jquery’, ‘https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js’);

    Y me vienen varias preguntas:

    – Esto no favorece mucho el posicionamiento natural de la página, ¿verdad? Es decir, comentarlas me penaliza a nivel SEO?
    – Las versión de la librería que indica el código debe ir actualizandose manualmente cada cierto tiempo?

    Gracias de antemano!

    Contestar
    • adming

      Buenas Paco!

      -Comentar líneas de código (sea php,html…) para dejar inutilizado un trozo de código es una tarea corriente en el campo del desarrollo y la programación. En principio, y bajo nuestra opinión, no es causa para que Google te penalice. Distinto sería que comentaras un millón de líneas de código, pues eso haría que el archivo en cuestión, ocupara o pesara mucho. Pero eso es otro tema. Debemos optimizar siempre el código y sobre todo, no tener errores de programación. Pero porque comentes dos líneas no vas a sufrir penalización ninguna.

      -En cuanto al código que has comentado, pues si. Lo que te está ocurriendo seguramente es que no te funcione el plugin que has instalado o alguna parte de algún código, debido a la versión 1.7.1 de jquery, y en algún lugar estás cargando otra versión que si funciona. Al comentar esta, pues funciona.
      Para cargar siempre la última versión de jquery, y encima que no tengas que albergarla en tu servidor, sino que la cargue externamente, lo que hay que hacer es lo siguiente:

      En el fichero functions.php debes copiar este código:
      if( !is_admin()){
      wp_deregister_script(‘jquery’);
      wp_register_script(‘jquery’, (“http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js”), false, ”);
      wp_enqueue_script(‘jquery’);
      }

      Espero haberte ayudado.
      Muchas gracias por escribirnos.
      Un saludo!!!!

      Contestar

Enviar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

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.