Cómo añadir JavaScript a un plugin de WordPress: Estrategia sin dependencias de Archivos

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-js-header', '',);
wp_enqueue_script( 'myprefix-dummy-js-header' );
wp_add_inline_script( 'myprefix-dummy-js-header', "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.

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.