Encolar scripts y estilos en el admin
Cargar CSS y JS en el admin funciona igual que en el frontend pero usando el hook admin_enqueue_scripts. La clave está en usar el parámetro $hook para cargar los assets solo en la página que los necesita — cargarlos en todo el admin ralentiza cada pantalla del panel innecesariamente.
Casos de uso: estilos de tu página de ajustes, scripts para los metaboxes del editor, librerías de interfaz solo en ciertas pantallas del admin.
<?php
add_action( 'admin_enqueue_scripts', 'mi_plugin_admin_assets' );
function mi_plugin_admin_assets( $hook ) {
// Solo cargar en la página de ajustes del plugin
if ( 'settings_page_mi-plugin' !== $hook ) {
return;
}
wp_enqueue_style(
'mi-plugin-admin-style',
plugin_dir_url( __FILE__ ) . 'css/admin.css',
array(),
'1.0.0'
);
wp_enqueue_script(
'mi-plugin-admin-script',
plugin_dir_url( __FILE__ ) . 'js/admin.js',
array( 'jquery' ),
'1.0.0',
true
);
}
¿Qué hace cada parte?
- admin_enqueue_scripts: hook del admin equivalente a
wp_enqueue_scripts. Se dispara en todas las pantallas del panel. - $hook: identificador de la pantalla actual del admin. Su valor depende del tipo de página —
post.php,edit.php,settings_page_{slug}, etc. - settings_page_mi-plugin: patrón para páginas añadidas con
add_options_page(). El sufijo es el slug que pasaste como cuarto parámetro. - return temprano: si el hook no coincide, salimos de la función y no se encola nada — patrón más limpio que un
if/else. - Otras pantallas comunes:
post.phpypost-new.phppara el editor,edit.phppara el listado,toplevel_page_{slug}para menús principales.
