Todo sobre Agregar Estilos y Scripts en WordPress
WordPress ofrece múltiples métodos para agregar estilos y scripts para la interfaz y el administrador, tanto para agregar archivos como para generar directamente variables/salida. Esta publicación entra en detalles con ejemplos de código de cómo agregar scripts y estilos a WordPress de la manera correcta.
Los scripts y estilos se pueden registrar y poner en cola definiendo identificadores únicos (ID similares a slug), lo que hace posible que WordPress elimine duplicados, como múltiples bibliotecas jQuery, y maneje dependencias (qué estilo o script cargar antes de esto y aquello) .
Si no hay una necesidad específica de registrar estilos o scripts, puede ponerlos en cola de inmediato, omitiendo el registro. También es posible anular el registro o eliminar estilos y scripts (wp_dequeue_scripty wp_dequeue_style) consultando el identificador. Por lo general, ayuda agregar un número más alto en la prioridad del gancho (haciendo que se ejecute después del gancho donde se pusieron en cola los elementos).
PD: La adición de estilos y secuencias de comandos a Gutenberg (tanto bloques de administración como de frontend) se explica en mi publicación Gutenberg: conceptos básicos.
Agregar scripts y estilos a la interfaz
Para agregar estilos y scripts solo a la interfaz, use el gancho wp_enqueue_scripts. A pesar del nombre del gancho, se usa tanto para scripts como para estilos. Aquí hay un ejemplo de poner en cola una hoja de estilo y un archivo javascript en un tema:
add_action('wp_enqueue_scripts', function() {
// Styles
wp_enqueue_style('main-style', get_stylesheet_directory_uri().'/style.css', [], '1.0');
// Scripts
wp_enqueue_script('main-script', get_stylesheet_directory_uri().'/assets/js/main.js', ['jquery'], '', true);
});El tercer argumento tanto para los estilos como para los scripts es una matriz con dependencias. Por ejemplo, para las secuencias de comandos, es posible que desee cargar la biblioteca jQuery antes de su archivo de secuencia de comandos. Nota: las instalaciones de WordPress vienen con un montón de bibliotecas de scripts comunes incluidas (por ejemplo, jQuery, jQuery UI, Backbone y Underscore). Siempre que agregue cualquiera de estos identificadores como dependencia en su enqueue_script, WordPress los pondrá en cola, por lo que no tiene que agregar sus propios archivos para estas bibliotecas.
El quinto argumento para las secuencias de comandos es si la secuencia de comandos debe cargarse o no al final <body>(en el pie de página), en lugar de dentro de la <head>etiqueta.
Para usar en un complemento, debe usar otros métodos para obtener la URL en un archivo local, por ejemplo plugin_dir_url(__FILE__).
Agregar scripts y estilos al administrador
WordPress ofrece otro gancho, admin_enqueue_scripts, para agregar estilos y scripts solo al administrador. Utilice los mismos métodos anteriores para registrar, poner en cola y localizar scripts y estilos:
add_action('admin_enqueue_scripts', function() {
global $pagenow, $post_type;
// Example: $hook == 'edit.php'
// Example: $post_type == 'post'
// wp_enqueue_style or wp_enqueue_script
});Adición de scripts y estilos a la página de inicio de sesión
Debido a que ninguno de los ganchos anteriores aparece en la pantalla de inicio de sesión del administrador, WordPress ofrece un gancho separado para este propósito, login_enqueue_scripts.
add_action('login_enqueue_scripts', function() {
// wp_enqueue_style or wp_enqueue_script
});Salida de variables de Javascript
Para generar variables de Javascript (por ejemplo, obtener rutas, cadenas traducidas u otras variables), puede usar wp_localize_script. Esta función requiere un identificador de secuencia de comandos en cola. El segundo parámetro sería el nombre de la variable y el tercero su valor. El valor puede ser una matriz, así :
Dentro de su secuencia de comandos, tiene acceso a las variables pasadas, así:
jQuery(document).ready(function($) {
console.log(Theme_Variables.ajax_url);
});En este enlace, puede acceder a variables globales $pagenowy $post_typeespecificar aún más dónde desea poner en cola sus estilos y scripts.
Salida de estilos en línea
Si necesita generar estilos en línea, por ejemplo, para las variables de tema que configuró en el Personalizador (por ejemplo, usando get_theme_mod), puede generarlos usando la wp_add_inline_stylefunción. Funciona de manera bastante similar a la salida de variables de Javascript, en las que debe proporcionar un identificador de estilo en cola:
add_action('wp_enqueue_scripts', function() {
// wp_enqueue_style('main-style'); // Must exist!
$color = get_theme_mod('my-custom-color'); // e.g. #FF0000
$custom_css = "
body {
background: {$color};
}";
wp_add_inline_style('main-style', $custom_css);
});Adición de etiquetas asíncronas a scripts
Desafortunadamente, no hay una función o filtro directo para agregar asynca las etiquetas de su secuencia de comandos, pero podemos lograr esto manipulando la cadena que usa WordPress para generar las etiquetas de secuencia de comandos para todas las secuencias de comandos en cola, así (recuerde especificar su secuencia de comandos por su identificador):
Enlaces de documentación útiles
- wp_enqueue_scripts (gancho)
- admin_enqueue_scripts (gancho)
- login_enqueue_scripts (gancho)
- wp_enqueue_style
- wp_dequeue_style
- wp_enqueue_script
- wp_dequeue_script
- wp_localize_script
- wp_add_inline_style