Saltar al contenido

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

El gancho de acción wp_enqueue_scripts Es un componente vital del proceso de desarrollo de WordPress.

Junto con las funciones wp_enqueue_script() Es wp_enqueue_style()ayuda a WordPress a mostrar el contenido del sitio web.

En este tutorial, cubriremos el gancho de acción. wp_enqueue_scripts junto con sus características complementarias y le proporcionaremos varios casos de uso para ayudarle a mejorar sus proyectos de WordPress.

Descargue la hoja de referencia definitiva de WordPress

Cómo funcionan las colas en WordPress

Hacer cola en WordPress se refiere a registrar y agregar scripts y hojas de estilo a su sitio web.

Las funciones wp_enqueue_script() Es wp_enqueue_style() pregunta por Servidor de WordPress que agrega estos scripts y hojas de estilo a una cola para cargarlos en la parte frontal de su sitio web.

El aspecto principal de las colas 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 secuencias de comandos cuando diferentes complementos o temas de WordPress intentan cargar la misma secuencia de comandos u hoja de estilo.

Entendiendo wp_enqueue_script

El proceso de cola consta del gancho de WordPress. wp_enqueue_scripts y dos funciones adicionales para hojas de estilo y scripts.

Para comenzar, wp_enqueue_scripts es un gancho de acción que se utiliza para poner en cola hojas de estilo y archivos JavaScript en su sitio de WordPress. Este gancho se utiliza normalmente en archivos. funciones.php o complemento para un tema de WordPress.

Sin embargo, wp_register_style() Es wp_enqueue_style() Estas son funciones de WordPress que funcionan con hojas de estilo. La función de registro registra una hoja de estilo para usar en un tema o complemento, mientras que la función de puesta en cola carga una hoja de estilo registrada en un sitio de WordPress.

Leer  Cómo exportar un tema de WordPress: 3 métodos para exportar un tema desde el panel de WordPress

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

  • $identificador: un nombre único para una hoja de estilo que la identifica dentro del código base de WordPress. Debe coincidir con el identificador que especificó al registrar la hoja de estilo.
  • $src: una URL o ruta al archivo de hoja de estilo. Puede ser una ruta relativa a una hoja de estilo en el directorio de temas o complementos de WordPress, o una URL absoluta a una hoja de estilo alojada en otro lugar. $src es opcional y solo debe especificarse si no lo ha especificado en la función wp_register_style().

Como resultado, puedes 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 solo 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 importante, wp_register_script() Es wp_enqueue_script() son funciones de WordPress responsables de gestionar scripts personalizados. La función de registro registra archivos JavaScript personalizados, mientras que la wp_enqueue_script() carga los scripts registrados en el sitio web. Estas funciones toman dos parámetros principales:

  • $ identificador– Nombre único para el script. Recuerda que el identificador debe coincidir entre funciones. wp_register_script() Es wp_enqueue_script().
  • $src: URL o ruta al archivo de script jQuery. Esto es opcional para wp_enqueue_script() si ya lo especificaste en la función de registro.

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

  • $depósitos: una serie 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 tiene muchos scripts diferentes y desea realizar un seguimiento de sus versiones.
  • $en_pie de página– Determina si el script debe cargarse en el pie de página. De forma predeterminada, WordPress carga scripts en el .

similar a wp_enqueue_style()puedes usar la función wp_enqueue_script() sin registrarlo primero.

A continuación se muestra 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 usar wp_enqueue_script en WordPress

Cómo cubrimos aspectos clave del puesto wp_enqueue_script()Es hora de revisar algunos casos de uso populares para ayudarle a comprenderlos mejor.

Cómo usar wp_enqueue_script con jQuery

La función wp_enqueue_script() tiene un parametro variedad() script adicional que permite a los usuarios especificar las dependencias de script requeridas.

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, usamos la función wp_enqueue_scripts() para poner en cola un script llamado mi-script.js.

Especificamos que depende de la biblioteca 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 de temas actual.

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

Puede mejorar la velocidad de su sitio web cargando los scripts en el pie de página. De forma predeterminada, WordPress carga scripts en la sección del encabezado de su sitio web, lo que significa que se cargan antes que el resto del contenido.

Esto puede provocar tiempos de carga de página más lentos mientras el navegador espera estos scripts.

Si mueve los scripts a la sección de pie de página, el navegador puede mostrar el contenido primero y luego cargar los scripts. Para obtener más información, consulte 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í definimos el parámetro $en_pie de página desde el función wp_enqueue_script() como VERDADEROque pondrá en cola el script en el pie de página en lugar de .

Cómo usar wp_enqueue_scripts para especificar medios para estilos

Las funciones wp_register_style() Es wp_enqueue_style() incluir un parámetro promedio. Especifica el tipo de medio destinado a la hoja de estilo. Por defecto, este parámetro está configurado en allílo que significa que la hoja de estilo se aplica a todos los tipos de medios.

Así es como se ve 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, creamos una función llamada mis_estilos_personalizados que registra y pone en cola una hoja de estilo personalizada llamada mis-estilos.css.

También definimos el parámetro promedio como pantallalo que significa que la hoja de estilo se aplica para mostrar medios como pantallas de escritorio, portátiles o tabletas.

También puede utilizar diferentes tipos de medios como imprimir para medios impresos o portátil para dispositivos portátiles.

1714728961 325 Los 20 mejores temas de WordPress para criptomonedas en 2024.webp

Conclusión

El gancho wp_enqueue_scripts y funciones complementarias como wp_enqueue_script() wp_enqueue_style() Son útiles para agregar scripts y estilos personalizados a su sitio web de WordPress de manera fácil y eficiente.

En este tutorial, cubrimos el proceso de puesta en cola de WordPress y proporcionamos varios casos de uso de ejemplo para las funciones. wp_register_script(), wp_register_style(), wp_enqueue_script() y wp_enqueue_style().

Esperamos que este tutorial le haya resultado útil y que ahora comprenda mejor el proceso de cola. Si tiene alguna pregunta, consulte nuestra guía de WordPress o deje un comentario a continuación.

Compartir

Deja una respuesta