IDA Útil

¿Cómo usar Javascript en WordPress?

Desarrollo Web|6 min de lectura|25 de abril de 2014

Comparte

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.

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.

Comparte

Autor

Equipo IDA

Investigamos las tendencias en proyectos y estrategias digitales para complementarlas con nuestra experiencia en artículos informativos. Nuestro objetivo es aportar al desarrollo del área, discutiendo la efectividad de las tecnologías y técnicas aplicadas.

Sabíamos optimizar WordPress como nadie. Por eso lo dejamos

Desarrollo|8 min lec|16 de junio de 2026

Cerramos un ciclo: migramos www.ida.cl y blog.ida.cl, con más de 2.500 artículos publicados desde 2011, desde WordPress hacia un ecosistema moderno de Nuxt 4, Tailwind, Directus y PostgreSQL. Estas son las razones técnicas y arquitectónicas detrás de la decisión.

Accesibilidad cognitiva

Estás perdiendo a uno de cada cinco usuarios porque el modo oscuro no es una estrategia de inclusión

Accesibilidad|3 min lec|26 de marzo de 2026

Existe una falsa sensación de cumplimiento en el diseño de productos digitales. Sin embargo, la accesibilidad cognitiva es el factor que realmente define el respeto por el usuario. Muchos creen que ofrecer una versión en modo oscuro es el límite, pero en 2026, los datos indican que uno de cada cinco de tus usuarios es […]

Diseño de Experiencia

Arquitecturas de información en tiempos de Inteligencia Artificial

Arquitectura De Informacion|8 min lec|24 de febrero de 2026

Cuando hablamos de diseño digital, solemos pensar en interfaces, flujos, usabilidad o experiencia de usuario. Sin embargo, mucho antes de que una persona interactúe con una pantalla, ya ha sido orientada —y en muchos casos condicionada— por una capa menos visible, pero profundamente estructurante: la arquitectura semántica. Lenguaje, categorías, etiquetas, naming y taxonomías no son […]