WordPress permite ampliar prácticamente cualquier funcionalidad mediante temas y plugins. Sin embargo, no siempre necesitamos instalar un plugin completo: en determinados proyectos puede ser suficiente añadir nuestro propio código JavaScript.
En este tutorial veremos cómo cargar un archivo JavaScript personalizado en WordPress utilizando wp_enqueue_script(), la forma recomendada de incorporar scripts al frontend sin añadirlos manualmente dentro del código HTML.
¿Por qué utilizar wp_enqueue_script()?
Podríamos insertar una etiqueta <script> directamente en una plantilla, pero WordPress dispone de su propio sistema para registrar y cargar archivos JavaScript.
Utilizar este sistema permite gestionar mejor las dependencias, controlar dónde se carga cada archivo, evitar determinadas duplicidades y mantener una estructura de código más limpia.
Es una práctica habitual en el desarrollo web con WordPress, especialmente cuando creamos funcionalidades propias que no justifican instalar un plugin de terceros completo.
Cómo cargar un script personalizado en WordPress
Supongamos que tenemos un archivo llamado mi-script.js dentro del directorio de nuestro tema hijo.
Podemos cargarlo utilizando el hook wp_enqueue_scripts:
function hc_enqueue_custom_scripts() {
$script_path = get_stylesheet_directory() . '/mi-script.js';
$script_url = get_stylesheet_directory_uri() . '/mi-script.js';
if ( file_exists( $script_path ) ) {
wp_enqueue_script(
'hc-custom-script',
$script_url,
array(),
filemtime( $script_path ),
true
);
}
}
add_action( 'wp_enqueue_scripts', 'hc_enqueue_custom_scripts' );En este ejemplo utilizamos get_stylesheet_directory_uri() para obtener la URL del tema hijo y get_stylesheet_directory() para localizar físicamente el archivo.
Además, filemtime() utiliza la fecha de modificación del archivo como versión. De esta forma, cuando modificamos el JavaScript, cambia también su versión y resulta más sencillo evitar que el navegador continúe utilizando una copia antigua almacenada en caché.
Cómo cargar un script que depende de jQuery
Si nuestro código necesita jQuery, debemos declararlo como dependencia en lugar de intentar cargar otra copia manualmente:
function hc_enqueue_custom_scripts() {
$script_path = get_stylesheet_directory() . '/mi-script.js';
$script_url = get_stylesheet_directory_uri() . '/mi-script.js';
if ( file_exists( $script_path ) ) {
wp_enqueue_script(
'hc-custom-script',
$script_url,
array( 'jquery' ),
filemtime( $script_path ),
true
);
}
}
add_action( 'wp_enqueue_scripts', 'hc_enqueue_custom_scripts' );WordPress se encargará de gestionar la dependencia y cargar los recursos en el orden correspondiente.
No cargues JavaScript en toda la web si no es necesario
Uno de los errores habituales es cargar todos los scripts personalizados en todas las páginas del sitio, aunque una funcionalidad solamente se utilice en una sección concreta.
Por ejemplo, si nuestro JavaScript solo se necesita en una página determinada, podemos cargarlo de forma condicional:
function hc_enqueue_custom_scripts() {
if ( ! is_page( 'contacto' ) ) {
return;
}
$script_path = get_stylesheet_directory() . '/mi-script.js';
$script_url = get_stylesheet_directory_uri() . '/mi-script.js';
if ( file_exists( $script_path ) ) {
wp_enqueue_script(
'hc-custom-script',
$script_url,
array(),
filemtime( $script_path ),
true
);
}
}
add_action( 'wp_enqueue_scripts', 'hc_enqueue_custom_scripts' );Así evitamos enviar al navegador recursos que no aportan ninguna funcionalidad en esa página.
¿Tema hijo o plugin personalizado?
La respuesta depende de la finalidad del código.
Si el JavaScript está directamente relacionado con el diseño o comportamiento visual del tema, puede tener sentido mantenerlo dentro del tema hijo.
Si la funcionalidad debe continuar funcionando aunque cambiemos de tema, normalmente es mejor separarla y utilizar un plugin propio.
Esta separación entre presentación y funcionalidad facilita el mantenimiento y evita que determinadas características importantes del sitio dependan innecesariamente del tema activo.
¿Plugin de terceros o desarrollo propio?
No significa que instalar plugins de terceros sea una mala práctica. Existen plugins excelentes y no tiene sentido desarrollar desde cero una funcionalidad compleja que ya está correctamente resuelta.
Pero para una necesidad muy concreta, instalar una solución que incorpora muchas funcionalidades adicionales puede ser innecesario. En estos casos, unas pocas líneas de código bien implementadas pueden resolver exactamente lo que necesita el proyecto.
JavaScript y rendimiento en WordPress
Cuando desarrollamos funcionalidades personalizadas también debemos pensar en su impacto sobre el rendimiento. No se trata únicamente de reducir el número de archivos, sino de cargar cada recurso únicamente cuando sea necesario y evitar dependencias que no aporten valor.
Este control sobre JavaScript, CSS y otros recursos es especialmente importante en proyectos de desarrollo WordPress a medida, donde podemos decidir exactamente qué necesita cada componente del sitio y cuándo debe cargarse.
Conclusión
wp_enqueue_script() es la forma adecuada de cargar JavaScript personalizado en WordPress. Nos permite gestionar dependencias, versiones y condiciones de carga utilizando las APIs proporcionadas por el propio CMS.
Para pequeños desarrollos, este enfoque puede evitar dependencias innecesarias y mantener el proyecto más organizado. Y cuando la funcionalidad crece, podemos trasladarla a un plugin propio para mantener claramente separadas la presentación y la lógica del sitio.
