¿Cómo usar Javascript en WordPress?

Equipo IDA

10 años ago

El uso de Javascript en plataformas digitales como web apps o sitios web es cada vez más común y necesario para ofrecer interfaces interactivas a los usuarios.

Existen otras herramientas, como Microsoft Silverlight o Adobe Flash, que ofrecen capacidades similares pero requieren que instales plugins o add-ons en los navegadores para que se ejecuten de manera correcta. Esto termina siendo fatal para la experiencia de uso, sobre todo en dispositivos móviles, teniendo en cuenta que no pueden ejecutar este tipo de herramientas, lo que deja al usuario con una aplicación en blanco completamente inútil.

Por el contrario, Javascript se ha convertido en el estándar entre los dispositivos, desde el navegador hasta aplicaciones nativas móviles (Android e IOS). Además, está incluido en el core del sistema operativo Windows 8 (WinJS) y forma parte del lenguaje primario de Firefox OS, por lo que es compatible con las plataformas de usuario que ocupan casi la totalidad del mercado tecnológico.

Buenas y malas prácticas de Javascript en WordPress

Teniendo en cuenta que WordPress domina el 66% del mercado de los CMS es fundamental conocer las buenas prácticas y el uso correcto de Javascript en esta plataforma. Es la misma empresa la que nos ofrece una serie de recomendaciones para insertar scripts en nuestros sitios con las cuales podemos concluir formas correctas e incorrectas de uso en esta plataforma.

Antes que todo debemos asegurarnos de que nuestro template tenga implementadas las funciones de wordpress wp_head dentro de la etiqueta <head> y wp_footer antes del cierre de la etiqueta </body>. Estas son críticas para la implementación correcta de plugins y otras características de WordPress -como lo son la adición de etiquetas <meta> y <link> – por lo que deben considerarse en cualquier escenario.

Las funciones wp_head y wp_footer otorgan el espacio necesario para insertar nuestros scripts y otros que puedan instalarse de forma posterior.

Insertando scripts: La forma incorrecta

Es usual que desarrolladores novatos incluyan scripts escritos en duro dentro de la etiqueta <head> de la siguiente manera:

<script src="/scripts/archivo-javascript.js"></script>

o bien:

<script src="/scripts/archivo-javascript.js"></script>

Si bien este método puede funcionar sin problemas estamos generando un código menos sostenible en el tiempo, dificultando la administración de dependencias como jQuery, Dojo, MooTools, etc.

Por otro lado, si usamos este método los plugins que usan alguna de estas dependencias no sabrán qué librerías ya se encuentran incrustadas, por lo que se intentarán cargar nuevamente, generando posibles errores o cargas duplicadas dentro del sitio.

La manera correcta

Para incluir scripts de forma correcta debemos estar al tanto del API de acciones y filtros de wordpress, interfaz encargada de ofrecer gatillos o eventos en donde generar acciones. Para insertarlos debemos usar el hook wp_enqueue_scripts para nuestras páginas publicas o admin_enqueue_scripts para el área de administración.

Además, incluimos las funciones wp_register_script y wp_enqueue_script encargadas de registrar y poner en cola los archivos que serán incorporados dentro del sitio. Dentro de la estructura de archivos del template debe existir el archivo functions.php, que junta todas las funciones personalizadas del tema, incluyendo la inserción de scripts y estilos. Es en este archivo donde incluiremos el siguiente código:

add_action("wp_enqueue_scripts", "incrustar_estilos", 11);
function incrustar_estilos(){
    // nos aseguramos que no estamos en el area de administracion
    if( !is_admin() ){

        // registramos nuestro script con el nombre "mi-script" y decimos que es dependiente de jQuery para que wordpress se asegure de incluir jQuery antes de este archivo
        // en adicion a las dependencias podemos indicar que este archivo debe ser insertado en el footer del sitio, en el lugar donde se encuentre la funcion wp_footer
        wp_register_script(mi-script, get_bloginfo('template_directory'). '/js/script.js', array('jquery'), '1', true );
        wp_enqueue_script(‘mi-script’);
    }
}

Una vez añadido este código en functions.php el sistema reconocerá el archivo script.js en la cola de inserción, ubicándolo luego de jQuery. Esto indicará la dependencia a esta librería al ejecutarse wp_footer, puesto que el último parámetro de wp_register_script es true. Por el contrario, si fuera false script.js y jQuery se incrustarían en la etiqueta <head> al ejecutarse wp_head. De esta forma podemos controlar el lugar donde incrustaremos estos archivos.

Es necesario recalcar que por motivos de performance siempre es recomendable insertar los scripts al final del html para que su carga no detenga la renderización de la página haciendo que la percepción de velocidad del sitio baje.

Insertando multiples archivos

Podemos aprovecharnos de esta funcionalidad para incluir múltiples archivos de una sola vez de la siguiente manera:

add_action("wp_enqueue_scripts", "incrustar_estilos", 11);
function incrustar_estilos(){
    // nos aseguramos que no estamos en el area de administracion
    if( !is_admin() ){

        // registramos nuestro script con el nombre "mi-script" y decimos que es dependiente de jQuery para que wordpress se asegure de incluir jQuery antes de este archivo
        // en adicion a las dependencias podemos indicar que este archivo debe ser insertado en el footer del sitio, en el lugar donde se encuente la funcion wp_footer
        wp_register_script('mi-script', get_bloginfo('template_directory'). '/js/script.js', array('jquery'), '1', true );
        wp_register_script('mi-script-2', get_bloginfo('template_directory'). '/js/script-2.js', array('jquery'), '1', true );
        wp_register_script('mi-script-3', get_bloginfo('template_directory'). '/js/script-3.js', array('jquery'), '1', true );


        wp_enqueue_script('mi-script');
        wp_enqueue_script('mi-script-2');
        wp_enqueue_script('mi-script-3');
    }
}

En este punto debemos ser cuidadosos, ya que no tenemos real control del orden de carga de estos archivos. Para recuperarlo definiremos nuestras propias dependencias, haciendo que los archivos se carguen en el orden que necesitemos:

add_action("wp_enqueue_scripts", "incrustar_estilos", 11);
function incrustar_estilos(){
    // nos aseguramos que no estamos en el area de administracion
    if( !is_admin() ){

        // registramos nuestro script con el nombre "mi-script" y decimos que es dependiente de jQuery para que wordpress se asegure de incluir jQuery antes de este archivo
        // en adicion a las dependencias podemos indicar que este aarchivo debe ser insertado en el footer del sitio, en el lugar donde se encuente la funcion wp_footer
        wp_register_script('mi-script', get_bloginfo('template_directory'). '/js/script.js', array('jquery'), '1', true );
        wp_register_script('mi-script-2', get_bloginfo('template_directory'). '/js/script-2.js', array('mi-script'), '1', true );
        wp_register_script('mi-script-3', get_bloginfo('template_directory'). '/js/script-3.js', array('mi-script-2'), '1', true );


        wp_enqueue_script('mi-script');
        wp_enqueue_script('mi-script-2');
        wp_enqueue_script('mi-script-3');
    }
}

De esta forma WordPress detectará las dependencias de cada uno de estos archivos, haciendo uso de ellos en el siguiente orden:

jquery
script.js
script-2.js
script-3.js

Conclusión

A través de las funcionalidades de WordPress podemos definir dependencias personalizadas y obtener control total de los archivos Javascript que usamos. Además, avisamos a los plugins instalados sobre las librerías que está cargando, para evitar errores como la redundancia en distintos procesos.

Junto a lo anterior, podemos condicionar a los archivos Javascript para que actúen en ciertas secciones o páginas de nuestro sitio, optimizando los recursos y mejorando el performance global del sitio web.