IDA Útil

¿Cómo usar Javascript en WordPress?

Compartimos consejos para implementar Javascript en WordPress de forma correcta y evitar malas prácticas al usar esta tecnología esencial para el desarrollo web.

Nube de tags Javascript

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:

  1. jquery
  2. script.js
  3. script-2.js
  4. 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.

Encargado de Producción y Desarrollo
Entiendo como un desafío diario la búsqueda de nuevas técnicas para presentar contenidos, de forma visualmente interesante y teniendo presente la experiencia de uso. Los lenguajes de programación web son mi mejor herramienta para generar interfaces amigables y eficientes.

Comentarios

Jose Angel

hace 4 años

Fantástico !

Muchísimas gracias por tu estupenda explicación, ha quedado cristalino.

victor rosas

hace 4 años

Mucha gracias, excelente post!

Luis

hace 4 años

Saludos, con todo respeto creo que hay un error con las comillas del primer addaction(). De todas maneras gracias me sirvió mucho.

Cesar

hace 4 años

No me funciono, cuando agrego el código al functions.php desaparece todo. ¿Por que sera?

Fernando Silva

hace 4 años

Cesar,

Es posible que este código no funcione si el tema que estas usando no tiene correctamente puestas las funciones wp_head() y wp_footer() que son necesarias para que el hook “wp_enqueue_scripts” entre en acción.

Otro posible motivo es que exista un erro php dentro del código, para verificar esto puedes cambiar temporalmente la constante WP_DEBUG a true. de esta forma podrás visualizar los errores y warnings que esten pasando.

Saludos

ned

hace 4 años

Muchas gracias por tu excelente artículo. Me ha ayudado mucho acomprender la manera correcta.

Sin embargo me queda la duda… ¿cómo se haría en el caso de que deba llamar un script alojado en un sitio externo?
Algo del tipo

Fernando Silva

hace 4 años

Estimado,
En el caso de los scripts externos no cambia nada en particular, la unica diferencia es que el segundo argumento que pases a la función wp_register_script debe ser la url completa del script como por ejemplo: wp_register_script('mi-script', 'http://www.mi-script.com/script.js', array('jquery'), '1', true );

Espero que eso te ayude

Amanda

hace 3 años

Gracias por tu artículo la verdad es que me ha resuelto muchas dudas. Tengo un archivo javascript ya creado con todas las funciones que quiero que se implementen en una página de mi web. Mi pregunta es qué tengo que hacer ahora para que estas funciones las registre mi página y funcione como espero.
Saludos, Amanda Pinto Pérez-

Amanda

hace 3 años

Buenas, lo primero tu artículo me ha ayudado a entender muchas cosas pero aún tengo dudas en otras. Tengo un archivo.js donde he diseñado todas las funciones que quiero en mi página web. Lo que no sé es como diseñar ese fichero o que le falta para que al subirlo en wordpress me funcione. ¿Podrías detallar más todo lo que tiene que llevar un fichero y como debe ser su estructura? Si no te podría pasar el mío y me comentas que ves mal.

Fernando Silva

hace 3 años

Hola Amanda. Este artículo esta orientado a mostrar la “manera wordpress” de insertar archivos JS, la gracia de hacer esto es que ofrece mas control sobre los archivos JS que se cargan y ademas hace compatible tus scripts con plugins de minificación, concatenación y cache. Si bien no entiendo al 100% lo que preguntas puedo asumir que tiene que ver con el código que va en el archivo JS en sí, con este código no te puedo ayudar ya que es completa responsabilidad de quien lo hace e implementa.

Saludos

Andre

hace 2 años

Gracias amigo, muy bien detallado me fue muy útil.

Pedro Guevara

hace 2 años

Muy buen artículo e interesante y además hace fácil de comprender, pero tengo una duda, incluso si tengo un sitio con multisitio puedo agregar esto?

Fernando Silva

hace 2 años

Hola Pedro.
Estos métodos son completamente compatibles con multisitio. De hecho hacen más fácil el manejo de scripts en estos casos.
Saludos

Diego

hace 2 años

Hola Fernando muy buen post, pero quedé con una duda. Soy algo nuevo en esto de WordPress y la verdad es que una vez añadido el archivo.js en el código ¿a que directorio debo copiar el archivo en si? y una vez hecho eso, ¿como puedo llamar a las funciones JavaScript almacenadas en dicho archivo?.

Desde ya muchas gracias 😀

Pepo

hace 2 años

Hola Fernando, excelente artículo. Precisamente lo he usado porque estoy con un proyecto de estudios de WordPress, he incluido mi propio código php en alguna plantilla para conectarme a un BD y mostrar datos, y utilizo alguna función de javascript para efectos como marcar/desmarcar todos los checks de un listado al pulsar un check “marcar”.

He seguido las indicaciones del artículo para incluir mi fichero.js (donde está mi función Marcar_desmarcar()) en las paginas basadas en mi plantilla,
Pero al cargar un de las páginas mi javascript no funciona (no se marcan y desmarcan los checks al pulsar el principal). Si inspecciono el código de la página veo que después del footer en una de las líneas <script type='text/javascript' está referenciado mi fichero.js, ; sin embargo se genera un error de "Funcion Marcar_desmarcar is not defined at HTMLInputElement.onclick".
Debería incluir mi fichero js en header en lugar de footer??? Supongo que es algún error de concepto por mi parte sobre la llamada a javascript … ¿Podrías ayudarme? Gracias.

Max Villegas

hace 2 años

Hola.
Es difícil recomendar algo sin ver el código o el problema; pero si no es un tema con las rutas, a priori puedes tener 3 problemas independientes o todos juntos

1-. Un problema de orden
2-. Un problema de scope o alcance
3-. Un problema asociado a los eventos onClick o onLoad, etc.

En concreto, creo que pasa más por un error en el javascript, más que de la carga del archivo .js. Puedes ponerlo en el header y ver qué pasa. Eso sirve para descartar. Si tienes una idea del error debes siempre probarlo para descartarlo o confirmarlo.
Saludos!

Irwing

hace 1 año

Pregunta: ¿Cómo se le hace para solo hacer referencia en un archivo php dentro de wordpress y no a todo el sitio? Desde ya, gracias

Ulises Arratia

hace 1 año

Hola Irwing

Gracias por seguir nuestros contenidos. Es posible reemplazando o agregando una condicional “IF” dentro de la función “incrustar_estilos”, en la cual le puedes pasar una pagina con is_page (ID o slug) si es una entrada is_single (ID). Para mayor detalle, también puedes revisar este listado con las condicionales para WordPress: https://codex.wordpress.org/Conditional_Tags