WordPress ofrece m\u00faltiples m\u00e9todos para agregar estilos y scripts para la interfaz y el administrador, tanto para agregar archivos como para generar directamente variables\/salida. Esta publicaci\u00f3n entra en detalles con ejemplos de c\u00f3digo de c\u00f3mo agregar scripts y estilos a WordPress de la manera correcta.<\/p>\n
Los scripts y estilos se pueden registrar y poner en cola definiendo identificadores \u00fanicos (ID similares a slug), lo que hace posible que WordPress elimine duplicados, como m\u00faltiples bibliotecas jQuery, y maneje dependencias (qu\u00e9 estilo o script cargar antes de esto y aquello) .<\/p>\n
Si no hay una necesidad espec\u00edfica de registrar estilos o scripts, puede ponerlos en cola de inmediato, omitiendo el registro. Tambi\u00e9n es posible anular el registro o eliminar estilos y scripts ( PD: La adici\u00f3n de estilos y secuencias de comandos a Gutenberg (tanto bloques de administraci\u00f3n como de frontend) se explica en mi publicaci\u00f3n Gutenberg: conceptos b\u00e1sicos<\/a>.<\/p>\n Para agregar estilos y scripts solo a la interfaz, use el gancho 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<\/strong>: las instalaciones de WordPress vienen con un mont\u00f3n de bibliotecas de scripts comunes incluidas (por ejemplo, jQuery, jQuery UI, Backbone y Underscore). Siempre que agregue cualquiera de estos identificadores<\/a> como dependencia en su enqueue_script, WordPress los pondr\u00e1 en cola, por lo que no tiene que agregar sus propios archivos para estas bibliotecas.<\/p>\n El quinto argumento para las secuencias de comandos es si la secuencia de comandos debe cargarse o no al final Para usar en un complemento, debe usar otros m\u00e9todos para obtener la URL en un archivo local, por ejemplo WordPress ofrece otro gancho, Debido a que ninguno de los ganchos anteriores aparece en la pantalla de inicio de sesi\u00f3n del administrador, WordPress ofrece un gancho separado para este prop\u00f3sito, Para generar variables de Javascript (por ejemplo, obtener rutas, cadenas traducidas u otras variables), puede usar wp_localize_script. Esta funci\u00f3n requiere un identificador de secuencia de comandos en cola. El segundo par\u00e1metro ser\u00eda el nombre de la variable y el tercero su valor. El valor puede ser una matriz, as\u00ed :<\/p>\n Dentro de su secuencia de comandos, tiene acceso a las variables pasadas, as\u00ed:<\/p>\n En este enlace, puede acceder a variables globales Si necesita generar estilos en l\u00ednea, por ejemplo, para las variables de tema que configur\u00f3 en el Personalizador (por ejemplo, usando Desafortunadamente, no hay una funci\u00f3n o filtro directo para agregar wp_dequeue_script<\/code>y wp_dequeue_style<\/code>) consultando el identificador. Por lo general, ayuda agregar un n\u00famero m\u00e1s alto en la prioridad del gancho (haciendo que se ejecute despu\u00e9s del gancho donde se pusieron en cola los elementos).<\/p>\nAgregar scripts y estilos a la interfaz<\/h2>\n
wp_enqueue_scripts<\/code>. A pesar del nombre del gancho, se usa tanto para scripts como para estilos. Aqu\u00ed hay un ejemplo de poner en cola una hoja de estilo y un archivo javascript en un tema:<\/p>\nadd_action('wp_enqueue_scripts', function() {\n \/\/ Styles\n wp_enqueue_style('main-style', get_stylesheet_directory_uri().'\/style.css', [], '1.0');\n\u00a0\n \/\/ Scripts\n wp_enqueue_script('main-script', get_stylesheet_directory_uri().'\/assets\/js\/main.js', ['jquery'], '', true);\n});<\/code><\/pre>\n<body><\/code>(en el pie de p\u00e1gina), en lugar de dentro de la <head><\/code>etiqueta.<\/p>\nplugin_dir_url(__FILE__)<\/code>.<\/p>\nAgregar scripts y estilos al administrador<\/h2>\n
admin_enqueue_scripts<\/code>, para agregar estilos y scripts solo al administrador. Utilice los mismos m\u00e9todos anteriores para registrar, poner en cola y localizar scripts y estilos:<\/p>\nadd_action('admin_enqueue_scripts', function() {\n global $pagenow, $post_type;\n \/\/ Example: $hook == 'edit.php'\n \/\/ Example: $post_type == 'post'\n \/\/ wp_enqueue_style or wp_enqueue_script\n});<\/code><\/pre>\nAdici\u00f3n de scripts y estilos a la p\u00e1gina de inicio de sesi\u00f3n<\/h2>\n
login_enqueue_scripts<\/code>.<\/p>\nadd_action('login_enqueue_scripts', function() {\n \/\/ wp_enqueue_style or wp_enqueue_script\n});<\/code><\/pre>\nSalida de variables de Javascript<\/h2>\n
add_action('wp_enqueue_scripts', function() {\n \/\/ wp_enqueue_script('main-script'); \/\/ Must exist!\n $variable_to_js = [\n 'ajax_url' => admin_url('admin-ajax.php')\n ];\n wp_localize_script('main-script', 'Theme_Variables', $variable_to_js);\n});<\/code><\/pre>\njQuery(document).ready(function($) { \n console.log(Theme_Variables.ajax_url);\n});<\/code><\/pre>\n$pagenow<\/code>y $post_type<\/code>especificar a\u00fan m\u00e1s d\u00f3nde desea poner en cola sus estilos y scripts.<\/p>\nSalida de estilos en l\u00ednea<\/h2>\n
get_theme_mod<\/code>), puede generarlos usando la wp_add_inline_style<\/code>funci\u00f3n. Funciona de manera bastante similar a la salida de variables de Javascript, en las que debe proporcionar un identificador de estilo en cola:<\/p>\nadd_action('wp_enqueue_scripts', function() {\n \/\/ wp_enqueue_style('main-style'); \/\/ Must exist!\n\u00a0\n $color = get_theme_mod('my-custom-color'); \/\/ e.g. #FF0000\n $custom_css = \"\n body {\n background: {$color};\n }\";\n wp_add_inline_style('main-style', $custom_css);\n});<\/code><\/pre>\nAdici\u00f3n de etiquetas as\u00edncronas a scripts<\/h2>\n
async<\/code>a 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\u00ed (recuerde especificar su secuencia de comandos por su identificador):<\/p>\nadd_filter('script_loader_tag', function($tag, $handle, $src) {\n if ('main-script' != $handle) {\n return $tag;\n }\n return str_replace('<script', '<script async', $tag);\n}, 11, 3);<\/code><\/pre>\nEnlaces de documentaci\u00f3n \u00fatiles<\/h2>\n
\n