Cómo poner en cola scripts en WordPress utilizando los ganchos wp_enqueue_scripts 

Cómo gestionar eficazmente scripts y hojas de estilo en WordPress

En WordPress, utilice la funciónwp_enqueue_script()responder cantandowp_enqueue_style()Estas dos funciones le ayudan a añadir scripts JavaScript y hojas de estilo CSS a la cola de carga front-end de su sitio web. Este método se denomina "puesta en cola".

El uso de colas tiene dos ventajas principales:

1. Mejorar el rendimiento del sitio webAl optimizar el proceso de carga, las colas pueden ayudar a reducir el tiempo de carga de las páginas web, haciendo que los sitios web funcionen más rápido y sin problemas.
2. Evitar conflictos: Cuando varios plugins o temas intentan cargar el mismo script u hoja de estilo, la puesta en cola ayuda a evitar conflictos entre estos recursos y garantiza un sitio estable.

Entender wp_enqueue_script

Las colas se gestionan mediantewp_enqueue_scripts Ganchos de WordPressy dos funciones adicionales para hojas de estilo y scripts.

En primer lugar.wp_enqueue_scriptses un gancho de acción para programar hojas de estilo y archivos JavaScript en un sitio WordPress. Este gancho se utiliza normalmente en el tema de WordPressfunciones.phpo en el archivo del plugin.

Cómo utilizar hojas de estilo en WordPress

En la edición de functions.phpSe recomienda crear una copia de seguridad de su sitio web antes de codificar en el

Para acceder al archivo a través del panel de control de WordPress, vaya a la secciónApariencia -> Editor de archivos de temas.Encuentre la barra lateral derecha enarchivo functions.php.

Las hojas de estilo se manejan principalmente a través de dos funciones:wp_register_style()responder cantandowp_enqueue_style().

1. Hoja de estilo de registro: Usowp_register_style()para registrar una hoja de estilo. Esta función toma dos argumentos principales:
   • 1TP4Mango: Este es el nombre identificativo único de la hoja de estilos y se utiliza para identificar la hoja de estilos en WordPress.
   • $srcEste es el URL o ruta al archivo de la hoja de estilos. Puede ser una ruta relativa a un directorio de temas o plugins de WordPress, o una URL alojada en otro lugar.Este parámetro puede omitirse si ya ha proporcionado la ruta en la función de registro.
2. Carga de hojas de estiloUna vez registrada la hoja de estilo, puede utilizar la funciónwp_enqueue_style()para cargarlo en su sitio WordPress. Si ya ha especificado la ruta durante el registro, no es necesario que vuelva a indicarla al hacer la cola.

Aquí está el código que contiene ambas funciones:

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

Esta es la única manera de incluir el wp_enqueue_style()del código:

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

Cómo gestionar scripts JavaScript en WordPress

WordPress gestiona los archivos JavaScript a través de dos funciones principales:wp_register_script()responder cantandowp_enqueue_script().

1. Guión de registro::
   • hacer uso dewp_register_script()para registrar un archivo JavaScript personalizado.
   • 1TP4Mango: Es el nombre identificativo único del script, utilizado para su identificación en WordPress.
   • $srcEs la URL o ruta del archivo de script. Si ya ha especificado la ruta durante el registro, no es necesario volver a especificarla para las cargas posteriores.
2. Carga de scripts::
   • pasar (una factura o inspección, etc.)wp_enqueue_script()para cargar el script registrado en el sitio web. Este parámetro puede omitirse al cargar si la ruta ya se ha especificado en el registro.
3. Parámetros adicionales::
   • $depsLista un array de otros scripts de los que depende el script actual, tales comojQuery.
   • $verEspecifique el número de versión del script para facilitar el seguimiento y la gestión de varias versiones.
   • $in_footer: Establece si el script debe cargarse en la sección de pie de página del documento HTML. Por defecto, los scripts se cargan en la sección<head>Parcialmente cargado.

Al igual que con las hojas de estilo, si ya conoce los detalles de la secuencia de comandos, también puede utilizar simplemente la funciónwp_enqueue_script()para cargar guiones sin registro previo.

Ejemplos con ambas funciones:

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

Veamos una imagen con unSingle wp_enqueue_script()Ejemplos de funciones:

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

Cómo utilizar wp_enqueue_script con jQuery

wp_enqueue_script()tiene una función adicionalarray()que permite al usuario especificar las dependencias de script necesarias.

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

En el código, utilizamosLa función wp_enqueue_scripts() nombrará el my-script.jsen la cola.

Cómo cargar un script en el pie de página utilizando wp_enqueue_script

Puede aumentar la velocidad de su sitio web cargando scripts en el pie de página. Cuando los navegadores esperan estos scripts, los tiempos de carga de la página pueden ralentizarse. Si traslada los scripts a la sección de pie de página, el navegador puede mostrar primero el contenido y luego cargar los scripts. Consulte el siguiente ejemplo para obtener más información:

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

En el ejemplo, hemos creado un archivo llamadofunción my_custom_styles, que registra un archivo my-styles.cssPersonaliza la hoja de estilo y ponla en cola.

alcanzar un veredicto

En WordPress, utilice la funciónwp_enqueue_scriptsganchos y funciones relacionadas comowp_enqueue_script()responder cantandowp_enqueue_style()para añadir fácil y eficazmente scripts JavaScript y estilos CSS personalizados. Estas herramientas le ayudan a asegurarse de que las secuencias de comandos y los estilos se cargan correctamente en su sitio web, evitando al mismo tiempo conflictos de código y problemas de doble carga.