Usando Javascript en WordPress de forma correcta

En este artículo vamos a ver cómo usar Javascript en WordPress de forma correcta. Javascript es un lenguaje que ha progresado mucho en los últimos años y el propio WordPress, con desarrollos como el JSON REST API, nos ofrece nuevas posibilidades para su uso avanzado. En un segundo artículo veremos también cuales son las mejores prácticas utilizando AJAX dentro de WordPress utilizando el nuevo WP REST API.

Hay un serie de temas con los que tendremos que tener cuidado a la hora de utilizar Javascript en nuestro tema o plugin:

  • Conflictos con otros archivos Javascript. Muchas veces ni siquiera sabemos qué otros archivos Javascript hay instalados por otros plugins o en el mismo tema. Pero si añadimos nuestros archivos Javascript de la forma correcta (que veremos más adelante) evitaremos estos conflictos.
  • Seguridad. Especialmente cuando usamos AJAX para enviar y recibir datos entre WordPress y la base de datos.
  • Rendimiento. Por ejemplo, cuantos más archivos Javascript tengamos mayor número de peticiones habrá que hacer al servidor para obtenerlos.

En este artículo vamos a ver cómo evitar todos estos posibles problemas simplemente siguiendo las mejores prácticas recomendadas para utilizar Javascript en WordPress. Vamos a empezar viendo cómo añadir archivos Javascript a nuestro tema o plugin.

wp_enqueue_script

Aunque puedes añadir directamente tus archivos Javascript en el header.php o footer.php de tu tema, no es esta la manera recomendada de hacerlo. En su lugar, puedes utilizar la función wp_enqueue_script, que te ayudará a:

  • Evitar conflictos con otros scripts de Javascript añadidos por otros plugins y/o tema.
  • Te permitirá además agregar fácilmente scripts y librerías que vienen ya con WordPress. (Puedes ver un listado de las librerías y scripts ya incluidos aquí)
  • Solucionar dependencias que pueda tener tu archivo Javascript (por ejemplo, que necesite JQuery para funcionar).
  • Añadir un número de versión, incluso de forma dinámica, a tu archivo Javascript. Esto es muy útil para que siempre se cargue la última versión del archivo cuando el usuario visita la web.
  • WordPress se asegurará utilizando esta función de que si al archivo se le llama varias veces WordPress lo cargue sólo una vez

Con wp_enqueue_script podemos ubicar nuestro script o en la cabecera o en el pie de la página y los ubicará allá donde se encuentre la función wp_head() en la cabecera o wp_footer() en el pie de la página. Normalmente deberíais ver estas funciones en los archivos header.php y footer.php de vuestro tema respectivamente.

Vamos a ver cómo usar wp_enqueue_script. Siempre hay que incluirlo dentro de una función a la que llamaremos en el momento oportuno para incluir nuestro script en WordPress. Para ello utilizaremos add_action, que nos permite ejecutar eventos en momentos específicos durante la carga de la página.

El primer parámetro de add_action es el nombre de la acción a la que queremos “enganchar” la acción que vamos a desarrollar. El segundo parámetro es el nombre de la función que queremos ejecutar cuando se vaya a desarrollar la acción detallada en el primer parámetro.

Vamos a ver un ejemplo en el que vamos a añadir un archivo al admin de nuestro tema. Para ello en el primer parámetro de add_action pondremos admin_enqueue_scripts. A continuación abrimos un archivo de nuestro plugin o el archivo functions.php de nuestro tema, donde pondremos:

Como vemos ahora se cargará el archivo ejemplo.js en todas las páginas del admin de nuestro WordPress. Vamos a ver los parámetros que hemos usado en wp_enqueue_script:

En primer lugar está el nombre que le vamos a dar a nuestro archivo. Es como una especie de nombre único con el que nos podemos referir a él a partir de ahora. Puedes poner el que te parezca bien.

En segundo lugar está su ubicación, es decir, dónde va a encontrar WordPress este archivo. En este caso estamos diciendo que es dentro de la carpeta js de nuestro plugin (es decir, hemos añadido esta función en un plugin nuestro). Ponemos __FILE__ como segundo argumento para hacer la ruta relativa al directorio padre del archivo.

Pero también podríamos haber puesto una ubicación dentro de nuestro tema (en el archivo functions.php) y entonces la línea 4 la habríamos puesto así:

En tercer lugar están las dependencias. En nuestro caso estamos diciendo que para que funcione nuestro archivo necesitamos que antes esté cargado JQuery. WordPress se encargará de hacerlo. Si no necesitamos nada se deja vacío el array y ya está.

A continuación hemos puesto la versión del archivo, en nuestro caso es “1”.

Y por último podemos poner true si queremos que se ubique el archivo en el pie de la página (donde está wp_footer()) o false (donde está wp_header() ) si queremos que se ubique en la cabecera o header. Normalmente es mejor incluirlo en el footer o pie de la página para que no interfiera con la carga normal de la página.

Como decíamos, tal y como está la función, se cargará el archivo Javascript en todas las páginas de nuestro administrador. Pero a lo mejor no queremos que esto sea así. Para el caso del admin podemos usar un parámetro que nos da WordPress que es $hook y que nos permite ver la página en la que estamos. Vamos a suponer que queremos que el archivo sólo se cargue en las páginas de edición de entradas, y si no es así que nos salgamos de la función:

Si queremos que nuestro archivo se cargue en la parte frontal de la web y no en la parte de administración utilizaremos wp_enqueue_scripts en lugar de admin_enqueue_scripts en el primer parámetro de add_action:

Ahora se cargará en todas las páginas de nuestra web. Si queremos que se cargue sólo en una página concreta, podemos hacer:

En este caso hemos utilizado is_home() para ver si estamos en la home, y si no es así no cargar el archivo Javascript. También podríamos haber utilizado otras funciones de WordPress como is_page(), is_page_template(), is_single(), etc…

Si lo que queremos es añadir nuestro archivo Javascript en el área de login, pondremos como primer parámetro de add_action login_enqueue_scripts.

wp_localize_script

La función wp_localize_script es una herramienta muy útil para pasar datos a tus scripts desde los PHP de tus plugins o tema. Normalmente se utiliza para poder crear traducciones de los textos que haya en tus scripts, pero se pueden utilizar para pasar cualquier dato. Por ejemplo, el valor de una variable que tengas en PHP.

En WordPress puedes utilizar la función “__” para que tus textos puedan ser traducidos:

El primer parámetro de la función es el texto que queremos que se pueda traducir. El segundo parámetro es un texto único que agrupa a todas tus traducciones de un tema o un plugin y que tiene que ser el mismo para todas ellas. Normalmente en tu tema será el nombre de ese tema, por ejemplo “twentytwelve”. Una vez tengas todas tus cadenas listas hay herramientas que te permitirán crear todas esas traducciones, como Poedit.

Esta función que acabamos de ver está sólo disponible en PHP y no en Javascript, por lo que necesitamos un método para pasar esa traducción a nuestro archivo Javascript, junto a cualquier otro dato que necesitamos que esté también disponible. Aquí es donde entra wp_localize_script en acción:

El primer parámetro es el nombre que le dimos a nuestro script en el primer parámetro de wp_enqueue_script. El segundo parámetro es el nombre de la variable que contendrá los datos. Este nombre debe ser único tanto para el script como para el plugin o tema, por lo que lo mejor es añadirle un prefijo con un valor único para evitar conflictos (en nuestro caso el prefijo es emn__). Sin embargo, como este es un objeto de Javascript no puede contener guiones. Utiliza guiones bajos. En el tercer parámetro, y dentro de un array, tenemos los datos que vamos a pasar a nuestro script.

Vamos a utilizar el mismo ejemplo que utilizamos para demostrar cómo funcionaba wp_enqueue_script. Si queremos pasar datos al script ejemplo.js añadimos nuestra función wp_localize_script debajo de wp_enqueue_script:

Perfecto. Pero, ¿cómo accedemos ahora a estos datos ya dentro de nuestro script ejemplo.js? Muy fácil:

Por ejemplo:

wp_register_script

La función wp_register_script nos permite “registrar” un script para poder utilizarlo más adelante. Es como decirle a WordPress: “Oye que estoy aquí, pero no me cargues hasta que yo te lo diga”.

Nos puede servir para casos como el siguiente: Supongamos que tenemos dos scripts, y uno de ellos es necesario para el otro. Podemos entonces registrar el primero y cargarlo sólo cuando carguemos el segundo. Haríamos entonces esto en functions.php o en nuestro plugin:

Como vemos, hemos indicado en wp_enqueue_script() en el tercer parámetro (donde establecemos las dependencias) que se cargue necesario.js y que lo haga antes que jQuery.

Otra utilidad que tiene wp_register_script() es si necesitamos un script en múltiples sitios de nuestra web. En este ejemplo hemos visto que necesitamos ejemplo.js en la home, pero ¿Y si lo necesitamos en más páginas? Podríamos crear una nueva función donde registremos los scripts que vamos a utilizar varias veces. Esta vez la cargaremos con anterioridad, por ese en add_action usaremos ‘init’:

Los scripts que hayan sido pre-registrados utilizando wp_register_script() no necesitan ser manualmente añadidos con wp_enqueue_script() si han sido incluidos como dependencia de otro script como hemos visto en el ejemplo. WordPress incluirá el script registrado automáticamente.

En el caso de que queramos incluirlo de forma independiente haríamos:

Por lo tanto, el propósito principal de registrar funciones es simplificar el código eliminando la necesidad de duplicar código si añades el mismo script en más de una sección de código. En https://developer.wordpress.org/reference/functions/wp_register_script/ tenéis una lista de scripts que ya han sido pre-registrados.

Utilizando jQuery en WordPress

WordPress carga jQuery en modo sin conflictos, .noConflict(). Eso quiere decir que no podrás tener acceso a $ tal y como lo tendrías si utilizas jQuery en un archivo HTML normal.

Hay un par de maneras de envolver nuestro código para que podamos utilizar el símbolo $ como lo haríamos normalmente:

La otra manera de hacerlo es así:

Esta última manera es la recomendada si lo estamos utilizando en el pie de nuestra página y el contenido ya se ha cargado.

Añadiendo archivos externos

Hay ocasiones en las que en vez de añadir archivos de Javascript ubicados en nuestro WordPress queremos añadirlos de una fuente externa, por ejemplo de un CDN. Lo único que habría que cambiar sería el segundo parámetro de wp_enqueue_script() donde indicaríamos ahora la url completa del archivo:

Utilizando una librería ya incluida en WordPress

Como comentábamos antes WordPress incluye ya una serie de librerías por lo que no necesitaremos incluirlas de nuevo. Vienen detalladas en https://developer.wordpress.org/reference/functions/wp_enqueue_script/

Vamos a ver un ejemplo. Supongamos que queremos utilizar jQuery UI y más en concreto el script del acordeón. Pondríamos en el archivo functions.php o en el plugin que vayamos a crear:

Esto añadirá, como ya sabemos, jQuery UI y jQuery UI Accordion en todas las páginas de la web, por lo que quizás queramos restringirlo a alguna página concreta, como vimos antes.
Ahora simplemente tendríamos que crear el archivo acordeon.js dentro de la carpeta js de nuestro tema:

Aquí suponemos que en nuestro código tenemos un div con el ID “acordeon” donde está el contenido que queremos incluir en el acordeón.

Y esto es todo! Espero que os haya sido útil. En el siguiente artículo continuaremos viendo cómo utilizar AJAX dentro de WordPress.

11 comentarios en “Usando Javascript en WordPress de forma correcta

  1. Buen artículo. Cierto que muchas de las veces que queremos introducir o modificar un .js acaba petando algo de la web debido a alguna incompatibilidad de archivos ya sea del propio theme o de algún plugin… incluso cuando tratamos de minificarlos para ahorrar algo de espacio. Gracias por la info 😉

  2. Hola tengo un problema resulta que necesito hacer un filtro en una pagina de mi sitio web, ese filtro se acciona una vez se da clic en una imagen mostrando solo los producto que están de la categoría asociada con el atributo tittle, la función es

    Luego de eso llamo la función con

    Pero no me funciona el filtro, tal vez me puedas ayudar con esto

    Gracias

  3. Gran tutorial Juan!! pero me queda una duda…

    ¿Como llamo a la libreria de javascrip desde funtion.php? ahora la estoy llamando desde el header metiendo el código en el theme pero creo que no es la manera correcta.
    De esta manera:

    Muchas gracias
    Sergio

  4. Gracias por el artículo. Muy bien explicado y completo. Me ha sido de gran ayuda para cargar en un WordPress código javascript selectivamente en función del idioma que se cargase.

  5. Buenas Tardes
    Mi consulta es: …podría registrar mi archivo *.js en la seccion :
    function twentysixteen_scripts() del archivo function.php del tema en el que estoy trabajando?

    Gracias

Deja un comentario

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

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.