En WordPress, en lugar de simplemente añadirlos a la cabecera, debes utilizar un método llamado enqueueing que es una forma estandarizada de manejar tus activos con la ventaja añadida de gestionar las dependencias. Descubra cómo hacerlo a continuación utilizando wp_enqueue_scripts.

• Cómo funciona el enqueueing
• Básicos del enqueueing con wp_enqueue_scripts
• Gestión de dependencias
• Carga de scripts en el Footer
• Especificación de los medios para los estilos

Cómo funciona el enqueueing

Hay dos pasos que se dan cuando se enqueuea un script o un estilo. Primero lo registras – le dices a WordPress que está ahí – y luego lo pones en cola, lo que eventualmente lo pone en la cabecera 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 que WordPress conozca un activo, pero puede que no quieras utilizarlo en todas las páginas. Por ejemplo: Si estás construyendo un shortcode de galería personalizado que utiliza Javascript, sólo necesitas cargar el JS cuando se utiliza el shortcode – probablemente no en cada página.

La manera de hacer que esto suceda es registrar la secuencia de comandos en primer lugar, y sólo realmente en la cola cuando el código corto se muestra (lectura sugerida: La Guía Definitiva de WordPress Shortcodes).

Enqueueing Basics With wp_enqueue_scripts

Para enqueue scripts y estilos en el front-end tendrá que utilizar el gancho wp_enqueue_scripts. Dentro de la función enganchada puedes utilizar 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 he registrado y puesto en cola los activos dentro de la misma función, lo cual es un poco redundante. De hecho, se pueden utilizar las funciones enqueue para registrar y enqueue directamente, utilizando los mismos argumentos que en las funciones register:

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 utilizándolas en diferentes hooks. En un ejemplo real podríamos utilizar el hook wp_enqueue_scripts para registrar los activos y la función del shortcode para enqueuearlos.

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 dependencias

El mecanismo de enqueueing de WordPress tiene soporte incorporado 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 enqueuing directamente si no necesita separarlas.

El tercer parámetro es un array de scripts/estilos registrados que necesitan ser cargados antes de que el activo actual sea enqueueado. Nuestro ejemplo anterior probablemente dependa de jQuery, así que vamos a especificarlo 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 registrar o poner en cola jQuery nosotros mismos porque ya forma parte de WordPress. Puedes encontrar una lista de scripts y estilos disponibles en WordPress en el Codex.

Si tienes dependencias propias, tendrás que registrarlas, de lo contrario tus scripts 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 script es una galería, el segundo es una extensión de la misma que hace que las imágenes se abran en un lightbox. Observe que aunque nuestro segundo script depende de jQuery, no necesitamos especificarlo, ya que nuestro primer script ya cargará jQuery. Dicho esto, puede ser una buena idea declarar todas las dependencias, sólo para asegurarse de que nada puede romperse si se olvida de incluir una dependencia.

WordPress ahora sabe qué scripts necesitamos y puede calcular en qué orden deben añadirse a la página.

Carga de scripts en el pie de página

Siempre que pueda salirse con la suya cargando scripts en el pie de página, debería hacerlo. Esto aumenta los tiempos aparentes de carga de la página y puede evitar que su sitio web se cuelgue mientras se cargan los scripts, especialmente si contienen llamadas AJAX.

El mecanismo de encolado puede añadir scripts 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 scripts 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 quinto parámetro pondrá los scripts en el pie de página, usar false, u omitir el parámetro cargará las cosas en la cabecera. Como mencioné antes, siempre que sea posible, cargue los scripts en el pie de página.

Especificación de medios para los estilos

Usando el quinto parámetro de las funciones de registro/encargo de estilos puede controlar el tipo de medio para el que se ha definido el script (impresión, pantalla, portátil, etc.). Usando este parámetro puede restringir la carga de los estilos al tipo de medio 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, eche un vistazo a las especificaciones de CSS.

Summary

Poner en cola los activos es una poderosa manera 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 de las manos la gestión de las dependencias.

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