Estando en la mesa de plugins del ContributorDay de la WordCamp de Madrid 2023, debatimos cómo añadir unas pocas líneas de JavaScript a un plugin de WordPress sin crear un archivo independiente ni realizar una solicitud al servidor, considerando que se trataba de un código muy breve en JavaScript.
Hablé sobre este enfoque en un artículo que publiqué en el blog de WordPress España titulado «Transferir, con estilo, variables de PHP a JavaScript».
Añadir JavaScript en línea a un plugin de WordPress
Según el artículo mencionado, el método recomendado es utilizar el hook «wp_add_inline_script» para insertar JavaScript, pero dado que el plugin no disponía de archivos JS, no estaba claro a qué dependencia debíamos asociarlo.
Dado que es común en los temas, consideramos la posibilidad de vincularlo a jQuery, pero algunos temas muy optimizados podrían no utilizarlo.
Como siempre, en la documentación está la solución. Encontramos una manera de insertar el JavaScript sin depender de nada más, de la siguiente forma:
wp_register_script( 'myprefix-dummy', '',);
wp_enqueue_script( 'myprefix-dummy' );
wp_add_inline_script( 'myprefix-dummy', "console.log('loaded in header');");Es esencial hacerlo de esta forma para permitir que otros desarrolladores eliminen este script de la cola de carga si lo consideran innecesario, gracias al nombre único del script.
Cómo agregar atributos ‘async’ o ‘defer’ a JavaScript en línea en WordPress
Aunque la función wp_add_inline_script() no permite directamente añadir atributos como async o defer a los scripts en línea, es posible implementar una solución alternativa que optimiza la carga de los scripts en WordPress.
Para lograr esto, después de haber añadido el script en línea, debemos aplicar un filtro que añada los atributos deseados. Aquí te muestro un ejemplo práctico:
// Añadir un filtro para aplicar atributos async o defer
function myprefix_add_async_attribute($tag, $handle) {
// Verifica el handle del script al que deseas añadir el atributo
if ('myprefix-dummy' !== $handle) {
return $tag;
}
// Añade el atributo async o defer
return str_replace(' src', ' async="async" src', $tag);
}
add_filter('script_loader_tag', 'myprefix_add_async_attribute', 10, 2);Con el filtro script_loader_tag, puedes añadir atributos async o defer al script encolado. Esto mejora la carga del sitio al permitir que el navegador procese el JavaScript de manera no bloqueante.
De esta manera, permites que otros desarrolladores puedan modificar o eliminar el script si es necesario, asegurando al mismo tiempo una mejor optimización de la carga de JavaScript en tu sitio WordPress.
Eliminar JavaScript
Al incorporarlo, como se explicó, podemos identificar y eliminar el script cuando sea necesario.
Para eliminarlo usaremos la función «wp_dequeue_script».
Imaginemos que el plugin amplía una funcionalidad en la página de contacto utilizando una plantilla llamada «contact.php».
Podemos evitar que el script se cargue en todas las páginas, excepto en la de contacto, con este código:
function bk_remove_script() {
if ( ! is_page_template( 'page-templates/contact.php' ) ) {
wp_dequeue_script('myprefix-dummy-js-header');
}
}
add_action('wp_enqueue_scripts','bk_remove_script', 10, 0);
En este fragmento de código definimos una función llamada bk_remove_script. Esta función verifica si la página actual no utiliza la plantilla específica llamada contact.php. Si no es esa plantilla, elimina el script «myprefix-dummy-js-header» que normalmente se cargaría en el encabezado de la página.
La función bk_remove_script se ejecuta a través del hook «wp_enqueue_scripts» en WordPress, con una prioridad de 10 y sin argumentos.
Este código garantiza que el script «myprefix-dummy-js-header» no se cargue en la página si no estás en la plantilla de contacto.
De esta manera se tiene un control preciso sobre los scripts que se cargan en cada página, lo que contribuye a una optimización del sitio y ayuda a mejorar la velocidad de WordPress.
Programar un plugins de WordPress es una tarea sencilla, pero es importante hacerlo de forma correcta para optimizar la velocidad de carga de tu sitio web. Si necesitas ayuda para desarrollar un plugins de WordPress a tu medida, o si deseas crear un plugin personalizado para tu sitio web, Bubuku I Code puede ayudarte.
Somos especialistas en desarrollo web y podemos ayudarte a crear un plugin que cumpla con todas tus necesidades y que esté optimizado para SEO.
