Encolar scripts y estilos en el admin

Php marzo 10, 2026

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.php y post-new.php para el editor, edit.php para el listado, toplevel_page_{slug} para menús principales.