En WordPress, en lugar de simplemente añadirlos al encabezamiento, deberías utilizar un método llamado enqueing, que es una forma estandarizada de manejar tus activos con la ventaja añadida de gestionar las dependencias. Descubre cómo hacerlo a continuación utilizando wp_enqueue_scripts.

¿Cómo funciona la puesta en cola?

Hay dos pasos que se dan cuando se encola un guión o un estilo. Primero lo registras, le dices a WordPress que está ahí, y luego lo encolas, lo que eventualmente lo lleva al encabezado o justo antes de la etiqueta de cierre del cuerpo.

La razón de tener dos pasos tiene que ver con la modularidad. A veces querrás hacer saber a WordPress sobre un activo, pero puede que no quieras usarlo en todas las páginas. Por ejemplo: Si estás construyendo un atajo de galería personalizado que usa Javascript, sólo necesitas cargar el JS cuando se usa el atajo, probablemente no en todas las páginas.

La forma de hacer que esto suceda es registrar el guión primero, y sólo realmente ponerlo en cola cuando se muestre el código corto (lectura sugerida: La Última Guía de Shortcodes de WordPress ).

Poniendo en cola lo básico con wp_enqueue_scripts

Para poner en cola los scripts y estilos en el front-end necesitarás usar el gancho wp_enqueue_scripts. Dentro de la función enganchada puedes usar las funciones wp_register_script(), wp_enqueue_script(), wp_register_style() y wp_enqueue_style().

add_action( 'wp_enqueue_scripts', 'my_plugin_assets' );
function my_plugin_assets() {
    wp_register_style( 'custom-gallery', plugins_url( '/css/gallery.css' , __FILE__ ) );
    wp_register_script( 'custom-gallery', plugins_url( '/js/gallery.js' , __FILE__ ) );

    wp_enqueue_style( 'custom-gallery' );
    wp_enqueue_script( 'custom-gallery' );
}

En el ejemplo anterior, registré y puse en cola los bienes dentro de la misma función, lo cual es un poco redundante. De hecho, puede utilizar las funciones de enrutamiento para registrar y enrutar de inmediato, utilizando los mismos argumentos que en las funciones de registro:

add_action( 'wp_enqueue_scripts', 'my_plugin_assets' );
function my_plugin_assets() {
    wp_enqueue_style( 'custom-gallery', plugins_url( '/css/gallery.css' , __FILE__ ) );
    wp_enqueue_script( 'custom-gallery', plugins_url( '/js/gallery.js' , __FILE__ ) );
}

Si tuviera que separar las dos funciones, lo haría usándolas en ganchos diferentes. En un ejemplo del mundo real podríamos usar el gancho wp_enqueue_scripts para registrar los activos y la función del atajo para ponerlos en cola.

add_action( 'wp_enqueue_scripts', 'my_plugin_assets' );
function my_plugin_assets() {
    wp_register_style( 'custom-gallery', plugins_url( '/css/gallery.css' , __FILE__ ) );
    wp_register_script( 'custom-gallery', plugins_url( '/js/gallery.js' , __FILE__ ) );

}

add_shortcode( 'custom_gallery', 'custom_gallery' );

function custom_gallery( $atts ){

    wp_enqueue_style( 'custom-gallery' );
    wp_enqueue_script( 'custom-gallery' );

    // Gallery code here
}

Gestión de dependencia

El mecanismo de cola de WordPress tiene incorporado el soporte para la gestión de dependencias, utilizando el tercer argumento de las funciones wp_register_style() y wp_register_script(). También puede utilizar las funciones de enrutamiento de inmediato si no necesita separarlas.

El tercer parámetro es un conjunto de scripts/estilos registrados que deben ser cargados antes de que el activo actual se ponga en cola. Nuestro ejemplo anterior probablemente se basaría en jQuery, así que especifiquemos eso ahora:

add_action( 'wp_enqueue_scripts', 'my_plugin_assets' );
function my_plugin_assets() {
    wp_enqueue_script( 'custom-gallery', plugins_url( '/js/gallery.js' , __FILE__ ), array( 'jquery' ) );
}

No necesitamos registrarnos o hacer cola de jQuery porque ya es parte de WordPress. Puedes encontrar una lista de scripts y estilos disponibles en WordPress en el Codex.

Si tiene dependencias propias, deberás registrarlas, de lo contrario tus guiones no se cargarán. Aquí hay un ejemplo:

add_action( 'wp_enqueue_scripts', 'my_plugin_assets' );
function my_plugin_assets() {
    wp_enqueue_script( 'custom-gallery', plugins_url( '/js/gallery.js' , __FILE__ ), array( 'jquery' ) );
    wp_enqueue_script( 'custom-gallery-lightbox', plugins_url( '/js/gallery-lightbox.js' , __FILE__ ), array( 'custom-gallery' ) );
}

Supongamos que el primer guión es una galería, el segundo es una extensión de lo que hace que las imágenes se abran en un lightbox. Note que aunque nuestro segundo script se basa en jQuery, no necesitamos especificar esto, ya que nuestro primer script ya cargará jQuery. Dicho esto, puede ser una buena idea indicar todas las dependencias, sólo para asegurarse de que nada se pueda romper si se te olvida incluir una dependencia.

WordPress ahora sabe qué guiones necesitamos y puede calcular el orden en que deben ser añadidos a la página.

Siempre que puedas cargar guiones en el pie de página, deberías hacerlo. Esto aumenta los tiempos de carga de la página aparente y puede evitar que tu sitio web se cuelgue mientras se cargan los scripts, especialmente si contienen llamadas AJAX.

El mecanismo de cola puede añadir guiones al pie de página utilizando el quinto parámetro (el cuarto es un número de versión opcional). Nuestro ejemplo anterior cargaría los guiones en el pie de página si lo modificamos ligeramente.

add_action( 'wp_enqueue_scripts', 'my_plugin_assets' );
function my_plugin_assets() {
    wp_enqueue_script( 'custom-gallery', plugins_url( '/js/gallery.js' , __FILE__ ), array( 'jquery' ), '1.0', true );
    wp_enqueue_script( 'custom-gallery-lightbox', plugins_url( '/js/gallery-lightbox.js' , __FILE__ ), array( 'custom-gallery', 'jquery' ), '1.0', true );
}

Especificar true como el quinto parámetro pondrá guiones en el pie de página, usar false, u omitir el parámetro cargará cosas en el encabezado. Como mencioné antes, siempre que sea posible, carga los guiones en el pie de página.

Especificar los medios para los estilos

Usando el quinto parámetro de las funciones de registro de estilo/colocación, se puede controlar el tipo de medio para el que se ha definido el guión (impresión, pantalla, portátil, etc.). Con este parámetro se puede restringir la carga de los estilos al tipo de material en particular, lo cual es un pequeño y práctico truco de optimización.

add_action( 'wp_enqueue_scripts', 'my_plugin_assets' );
function my_plugin_assets() {
    wp_register_style( 'custom-gallery-print', plugins_url( '/css/gallery.css' , __FILE__ ), array(), '1.0', 'print' );

}

Para una lista completa de los tipos de medios que se pueden usar, mira las especificaciones del CSS.

Resumen

Poner en cola activos es una forma poderosa de manejarlos. Te da a ti, y a otros creadores de plugins/temas, más control sobre el sistema en su conjunto y te quita la gestión de dependencias de las manos.

Por si fuera poco, es la forma de añadir tus activos, muchos mercados temáticos y el propio repositorio de WordPress no aprobará tu trabajo si no utilizas este método.

Daniel Pataki

Hola, mi nombre es Daniel, soy el CTO de Kinsta. Puede que me conozcas de Smashing Magazine, WPMU Dev, Tuts+ y otras revistas de WordPress/Desarrollo. Aparte de WordPress y PHP, paso la mayor parte de mi tiempo alrededor de Node, React, GraphQL y otras tecnologías en el espacio Javascript. Cuando no estoy trabajando en crear la mejor solución de alojamiento del Universo, colecciono juegos de mesa, juego al futbolín en la oficina, viajo o toco la guitarra y canto en un grupo bastante malo.