Seleccionar página

wpjquerySi eres nuevo en el uso de WordPress, probablemente pienses que se puede usar jQuery igual que lo usas en cualquier otro tipo de desarrollo web. Esto es cierto, y a la vez falso. Puedes usar jQuery, sí, con todo (o casi todo) su potencial, pero con ciertas diferencias.

Inclusión de jQuery

Normalmente, si queremos incluir jQuery en una web, hay que descargar jQuery, y referenciar esos archivos desde nuestro código. Esto con WordPress no es así, y es el principal problema al que se enfrentan muchos desarrolladores que están empezando.

WordPress incorpora su propia versión de jQuery. Para incluirlo en nuestro Theme, si es que no lo está ya, simplemente tenemos que añadir una línea a functions.php (o a vuestro plugin):

Con esto, WordPress incluirá el jQuery que ya trae por defecto. Como decía, podemos ignorar este e instalar el que nosotros queramos, pero esto provocará a la larga problemas de compatibilidad con otros plugins y con el propio sistema WordPress, ya que seguramente jQuery ya esté instanciado por otro plugin, y entren en conflicto dos versiones diferentes. Lo más recomendable es usar el que ya viene.

Y alguno estará pensando… “Yo no descargo jQuery, lo referencio desde Google Hosted Libraries“. Error gordo. No es muy seguro confiar en un sistema externo. Es decir, imagina que tienes un proyecto en producción para un cliente, y enlazas jQuery desde Google. Será muy grande y tendrá mucha seguridad, pero si falla, por cualquier motivo (un apagón, un hackeo…), la página web de tu cliente dejará de funcionar como debe, y no le va a hacer ninguna gracia.

Esto os lo digo porque lo he visto. Me he encontrado mas de una vez con una web que “había dejado de funcionar, y no sabían por qué”, y yo tenía que arreglarlo. La primera vez tardé un buen rato en darme cuenta, las siguientes ya era lo primero que buscaba. Resulta que el programador de esas webs referenciaba jQuery desde Google Hosted Libraries, pero, en lugar de una versión concreta, siempre la última que estuviese disponible. jQuery no es muy retrocompatible que digamos, y sus nuevas versiones suelen eliminar funciones antiguas o en desuso muy a menudo. Claro, esa web que funcionaba perfectamente y que depende de librerias externas, que además cambian de vez en cuando, pues un buen día deja de funcionar. De repente, un día Google cambia la versión, y en la nueva se elimina una función que usaba la web. Con una basta. La web, al intentar ejecutar su script, da un error, se detiene el script, y en el mejor de los casos se ve la web descuadrada y sin efectos… en el peor, no se ve la web. Nada. Blanca. Como comprenderéis, eso a un cliente no le gusta nada.

En WordPress.org, si intentas subir un plugin al repositorio oficial y tiene referencias a librerías externas, no te lo aceptan. Avisados estáis.

Uso del símbolo $

El jQuery que viene incluido en WordPress viene activado en modo de seguridad anti-conflictos. Esto significa que, en lugar de usar el símbolo $, usamos la palabra completa “jQuery”.

Si estamos muy acostumbrados a usarlo, podemos adaptar nuestros scripts para que admitan de nuevo el símbolo del dólar. Esto se hace fácilmente, dependiendo de si el script está en el footer o en el header:

Recuerda que sólo podrás usar $ dentro de estas funciones que hemos creado.

Uso de Ajax

El uso de Ajax se ve bastante simplificado en WordPress. Su uso se compone de varias partes que funcionan en conjunto con el html.

En primer lugar, en javascript creamos un array como este:

La variable action es obligatoria. Su valor debe ser el nombre de la función PHP que se llamará desde Ajax. El resto son variables que van a pasar por POST a dicha función.

La llamada en cuestión se ejecuta tal que así:

La variable ajaxurl no siempre viene definida por WordPress, aunque debería. Esto se arregla añadiendo a nuestro plugin, o al archivo functions.php de nuestro Theme, las siguientes línea:

Finalmente, también en nuestro plugin o en el functions.php del Theme, definimos la función que va a ser llamada por Ajax:

Tras la función añadimos dos acciones. La primera permite que, si Ajax llama a nombrefunción, esta se ejecute, pero solo si estamos logueados en el sistema. Como desarrolladores, normalmente estamos conectados al sistema con nuestro user y password, y no nos daremos cuenta de que no funciona correctamente para las visitas externas sin loguear. La segunda acción arregla esto, y permite a cualquier visitante de nuestra web que se ejecute correctamente la llamada Ajax.

Hasta aquí nuestra clase de hoy de normas básicas del uso de jQuery en WordPress. No olvidéis practicar lo aprendido, y preguntar cualquier duda en los comentarios.

 “Hazlo todo tan simple como sea posible, pero no más simple”
.- Albert Einstein