Cómo poner en cola scripts usando el hook wp_enqueue_scripts en WordPress

El action hook wp_enqueue_scripts es un componente vital del proceso de desarrollo de WordPress. 

Junto con las funciones wp_enqueue_script() y wp_enqueue_style(), ayuda a WordPress a mostrar contenido en el sitio web.

En este tutorial, cubriremos el action hook wp_enqueue_scripts junto con sus funciones complementarias y proporcionaremos varios casos de uso para ayudarte a mejorar tus proyectos de WordPress.

Descarga la hoja de trucos de WordPress definitiva

Cómo funciona el Enqueueing en WordPress

Poner en cola en WordPress se refiere a registrar y añadir scripts y hojas de estilo a tu sitio.

Las funciones wp_enqueue_script() y wp_enqueue_style() ordenan al servidor de WordPress que añada estos scripts y hojas de estilo a una cola para cargarlos en el front-end de tu sitio web. 

El principal aspecto del enqueueing es que puede mejorar el rendimiento del sitio web al reducir los tiempos de carga de la página y ayudar a evitar conflictos de scripts cuando diferentes plugins o temas de WordPress intentan cargar el mismo script u hoja de estilo.

Entender wp_enqueue_script

El proceso de enqueueing consiste en el hook de WordPress wp_enqueue_scripts y dos funciones adicionales para hojas de estilo y scripts.

Para empezar, wp_enqueue_scripts es un gancho de acción usado para poner en cola hojas de estilo y archivos JavaScript en tu sitio WordPress. Este gancho se utiliza normalmente en los archivos functions.php o plugin de un tema de WordPress.

Mientras tanto, wp_register_style() y wp_enqueue_style() son funciones de WordPress que trabajan con hojas de estilo. La función register registra una hoja de estilo para usarla en un tema o plugin, mientras que la función enqueue carga una hoja de estilo registrada en un sitio web WordPress.

Por defecto, estas dos funciones tienen dos parámetros principales:

• $handle: un nombre único para una hoja de estilo que la identificar dentro de la base de código de WordPress. Debe coincidir con el identificador que especificaste al registrar la hoja de estilos. 
• $src: una URL o una ruta al archivo de la hoja de estilos. Puede ser una ruta relativa a una hoja de estilos en el directorio del tema o plugin de WordPress o una URL absoluta a una hoja de estilos alojada en otro lugar. $src es opcional y sólo necesita ser especificado si no lo hiciste en la función wp_register_style().

Como resultado, es posible usar la función wp_enqueue_style() sin usar primero wp_register_style().

Para ilustrar, aquí está el código con ambas funciones:

function register_plugin_styles() {
	wp_register_style( 'plugin-development', plugins_url( '/css/plugin.css' ) );
	wp_enqueue_style( 'plugin-development' );
}
add_action( 'wp_enqueue_scripts', 'register_plugin_styles' );

Ahora, aquí está el código con sólo wp_enqueue_style():

function register_plugin_styles() {
wp_enqueue_style( 'plugin-development', plugins_url( '/css/plugin.css' ) );
}
add_action( 'wp_enqueue_scripts', 'register_plugin_styles' );

Igualmente importantes, wp_register_script() y wp_enqueue_script() son funciones de WordPress responsables de la gestión de scripts personalizados. La función register registra archivos JavaScript personalizados, mientras que la función wp_enqueue_script() carga los scripts registrados en el sitio web. Estas funciones toman dos parámetros principales:

• $handle: nombre único para el script. Recuerda que el handle debe coincidir entre las funciones wp_register_script() y wp_enqueue_script().
• $src: URL o ruta al archivo de script jQuery. Esto es opcional para wp_enqueue_script() si ya lo has especificado en la función register.

Además, puedes especificar tres parámetros adicionales:

• $deps: un array de otros scripts de los que depende el script actual. Por ejemplo, archivos JavaScript jQuery o json2.
• $ver: el número de versión del script. Útil si tienes muchos scripts diferentes y quieres hacer un seguimiento de sus versiones.
• $in_footer: determina si se carga el script en el pie de página. Por defecto, WordPress carga los scripts en la sección <head>.

De forma similar a wp_enqueue_style(), puedes usar la función wp_enqueue_script() sin registrarla primero.

Aquí tienes un ejemplo con ambas funciones:

function register_plugin_script() {
	wp_register_script( 'new-script', plugins_url( '/script.js' ) );
	wp_enqueue_script( 'new-script' );
}
add_action( 'wp_enqueue_scripts', 'register_plugin_script' );

Ahora, veamos un ejemplo con una sola función wp_enqueue_script():

function register_plugin_script() {
wp_enqueue_script( 'new-script', plugins_url( '/script.js' ) );
}
add_action( 'wp_enqueue_scripts', 'register_plugin_script' );

Cómo utilizar wp_enqueue_script en WordPress

Ya que hemos cubierto los aspectos principales de la función wp_enqueue_script(), es hora de revisar algunos casos de uso populares para ayudarte a entenderla mejor.

Cómo utilizar wp_enqueue_script con jQuery

La función wp_enqueue_script() tiene un parámetro array() adicional que permite a los usuarios especificar las dependencias de script necesarias.

function my_custom_script() {
    wp_enqueue_script( 'registered-script', get_template_directory_uri() . '/js/my-script.js', array('jquery'), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_custom_script' );

En el código anterior, hemos utilizado la función wp_enqueue_scripts() para poner en cola un script llamado my-script.js.

Hemos especificado que depende de la librería jQuery y que se cargará en el pie de página. También usamos la función get_template_directory_uri() para obtener la URL del directorio actual del tema.

Cómo cargar scripts en el pie de página con wp_enqueue_script

Puedes mejorar la velocidad de tu sitio web cargando los scripts en el pie de página. Por defecto, WordPress carga los scripts en la sección de cabecera de tu sitio, lo que significa que se cargan antes que el resto del contenido.

Esto puede resultar en tiempos de carga de página más lentos ya que el navegador espera por estos scripts.

Si mueves los scripts a la sección de pie de página, el navegador puede mostrar primero el contenido y luego cargar los scripts. Para más información, consulta el siguiente ejemplo:

function plugin_assets() {
wp_enqueue_script( 'custom-script', plugins_url( '/js/my-script.js' , __FILE__ ), array( 'jquery' ), true );
}
add_action( 'wp_enqueue_scripts', 'plugin_assets' );

Aquí, hemos establecido el parámetro $in_footer de la función wp_enqueue_script() como true, lo que pondrá en cola el script en el pie de página en lugar de <head>.

Cómo utilizar wp_enqueue_scripts para especificar medios para estilos

Las funciones wp_register_style() y wp_enqueue_style() incluyen un parámetro media. Especifica el tipo de medio previsto para la hoja de estilos. Por defecto, este parámetro se establece como all, lo que significa que la hoja de estilos se aplica a todos los tipos de medios.

Este es el aspecto de una función modificada:

function my_custom_styles() {
  // Register custom stylesheet
  wp_register_style( 'my-styles', get_template_directory_uri() . '/css/my-styles.css', array(), '1.0', 'screen' );
  // Enqueue custom stylesheet
  wp_enqueue_style( 'my-styles' );
}
// Add the hook to the wp_enqueue_scripts action
add_action( 'wp_enqueue_scripts', 'my_custom_styles' );

En este ejemplo, hemos creado una función llamada my_custom_styles que registra y pone en cola una hoja de estilo personalizada llamada my-styles.css.

También hemos establecido el parámetro media en screen, lo que significa que la hoja de estilos se aplica a medios de pantalla como pantallas de escritorio, portátiles o tabletas.

También puedes utilizar diferentes tipos de medios, como print para medios impresos o handheld para dispositivos de mano.

Conclusión

El hook wp_enqueue_scripts y las funciones complementarias como wp_enqueue_script() wp_enqueue_style() son útiles para añadir scripts y estilos personalizados a tu sitio WordPress de forma fácil y eficiente.

En este tutorial, hemos cubierto el proceso de enqueueing de WordPress y hemos proporcionado varios ejemplos de casos de uso para las funciones wp_register_script(), wp_register_style(), wp_enqueue_script(), y wp_enqueue_style().

Esperamos que este tutorial te haya resultado útil y que ahora entiendas mejor el proceso de enqueueing. Si tienes alguna pregunta, consulta nuestra guía de WordPress o deja un comentario a continuación.