¿Cómo encolar estilos / scripts en ciertas páginas / wp-admin?

add_menu_page y add_submenu_page devuelven el "sufijo de enlace" de la página, que se puede usar para identificar la página con ciertos enlaces. Como tal, puedes usar ese sufijo en combinación con los ganchos variables admin_print_styles-{$hook_suffix} y admin_print_scripts-{$hook_suffix} para segmentar específicamente estas páginas.

function my_menu() {
   $menu = add_menu_page( 'Page 1', 'bar', 'something', 'else', 'foo' );
   $submenu = add_submenu_page( 'theme_menu', 'Subpage 1', 'Subpage', 'something', 'else', 'foo' );

   add_action( 'admin_print_styles-' . $menu, 'admin_custom_css' );
   add_action( 'admin_print_styles-' . $submenu, 'admin_custom_css' );

   add_action( 'admin_print_scripts-' . $menu, 'admin_custom_js' );
   add_action( 'admin_print_scripts-' . $submenu, 'admin_custom_js' );
}

Considero que este es un método limpio para agregar todo esto porque todo se maneja dentro de una función. Si decide eliminar esta funcionalidad, simplemente elimine la llamada a una función.

El problema con la respuesta de @tollmanz es que, dado que se está desconectando de los ganchos -print-styles y -print-scripts, debe generar el HTML para cargar sus scripts manualmente. Esto no es óptimo, ya que no se obtiene la buena dependencia y las versiones que vienen con wp_enqueue_script() y wp_enqueue_style() . Tampoco te permite poner las cosas en el pie de página si ese es un lugar mejor para ellos.

Entonces, volvamos a la pregunta del OP: ¿cuál es la mejor manera de asegurar que pueda poner JS / CSS en cola solo en páginas de administración específicas?

1. Desconecta la acción "cargar - {$ my_admin_page}" para hacer solo cosas cuando está cargada la página de administración de tu complemento específico, y luego

2. Engancha la acción "admin_enqueue_scripts" para agregar correctamente tus llamadas wp_enqueue_script .

Parece un poco molesto, pero en realidad es muy fácil de implementar. Desde la parte superior:

    add_action( 'admin_menu', 'add_my_admin_menus' ); // hook so we can add menus to our admin left-hand menu

    /**
     * Create the administration menus in the left-hand nav and load the JavaScript conditionally only on that page
     */
    function add_my_admin_menus(){
        $my_page = add_menu_page( 'Page Title', 'Menu Title', MY_ADMIN_CAPABILITY, 'menu-slug', 'show_page_content' );

        // Load the JS conditionally
        add_action( 'load-' . $my_page, 'load_admin_js' );
    }

    // This function is only called when our plugin's page loads!
    function load_admin_js(){
        // Unfortunately we can't just enqueue our scripts here - it's too early. So register against the proper action hook to do it
        add_action( 'admin_enqueue_scripts', 'enqueue_admin_js' );
    }

    function enqueue_admin_js(){
        // Isn't it nice to use dependencies and the already registered core js files?
        wp_enqueue_script( 'my-script', INCLUDES_URI . '/js/my_script.js', array( 'jquery-ui-core', 'jquery-ui-tabs' ) );
    }
}

Si usa get_current_screen() , puede detectar en qué página se encuentra. Hay un ejemplo en el artículo de códice que vinculé que muestra cómo usar get_current_screen() con add_options_page() , este método funcionará para cualquier página de administración.

Puede tomar @tollmanz answer , y amplíelo ligeramente, permitiendo el uso condicional también ...

Ejemplo :

/* Add admin pages */   
function my_admin_pages(){
    $menu = array();
    $menu['main_page'] = add_menu_page('Page 1', 'bar', 'something', 'else', 'foo');
    $menu['sub_page'] = add_submenu_page('theme_menu', 'Subpage 1', 'Subpage', 'something', 'else', 'foo');
    foreach($menu as $key => $value){
        if($key == 'main_page'){
            /* Print styles on only the main page. */
            add_action('admin_print_styles-'.$value, 'print_styles');
        }
        /* Print scripts on all of our admin pages. */
        add_action('admin_print_scripts-'.$value, 'print_scripts');
    }
}
add_action('admin_menu', 'my_admin_pages');

Me estaba preguntando lo mismo. Hay una versión moderna que usa admin_enqueue_scripts :

add_action('admin_menu', function () {
  $settingsPage = add_options_page('Settings', 'Mortgage Calculator', 'manage_options', 'mortgagecalculator', function () {
    echo "<div id='app'></div>";
  });
  /**
   * Include the ember admin scripts only on pages where it's needed.
   */
  add_action("admin_enqueue_scripts", function ($hook) use ($settingsPage){
    if($hook !== $settingsPage){
      return;
    }
    // Remove default jQuery since Ember provides its own.
    wp_dequeue_script('jquery');
    wp_enqueue_script('ember-vendor', plugins_url("admin/assets/vendor.js", __FILE__));
    wp_enqueue_script('ember-project', plugins_url("admin/assets/mortgage-plugin-ember-admin.js", __FILE__), ['ember-vendor']);
    wp_enqueue_script('ember-live-reload', "http://localhost:4200/ember-cli-live-reload.js");
  });
});

Como @ mor7ifer mencionado anteriormente, puede usar la función nativa de WordPress get_current_screen () . Si recorres la salida de esta función, por ejemplo:

$current_screen = get_current_screen();
foreach($current_screen as $key => $value) {
    error_log(print_r($key,1));
}

... notará una clave llamada base . Utilizo este detector para detectar en qué página estoy y encolado, dequeue así:

add_action('admin_enqueue_scripts', 'some_hook_function')* ):

public function some_hook_function(){

    // # only register and queue scripts & styles on POST edit screen of admin
    $current_page = get_current_screen()->base;
    if($current_page == 'post' || $current_page == 'page') {

        wp_enqueue_script('datetimepicker', plugins_url('assets/jquery-ui-timepicker-addon.min.js', __FILE__), array('jquery', 'jquery-ui-datepicker', 'jquery-ui-slider'), '1.9.1', true);

        wp_enqueue_style( 'jquery-ui-datepicker', plugins_url('assets/jquery-ui.min.css', __FILE__), array(), '1.11.2', 'all');


    } else { // # if not on post page, deregister and dequeue styles & scripts

        wp_dequeue_script('datetimepicker');
        wp_dequeue_style('jquery-ui-datepicker');

    }
}

De la documentación :

  

admin_print_scripts se usa principalmente para hacer eco de javascript en línea. admin_print_scripts no debe usarse para poner en cola estilos o scripts en las páginas de administración. Utilice admin_enqueue_scripts . "

Lo mismo ocurre con admin_print_styles .

add_action( 'admin_menu', 'add_my_admin_menus' ); 

function add_my_admin_menus() {
    $GLOBALS['my_page'] = add_menu_page( 'Page Title', 'Menu Title', MY_ADMIN_CAPABILITY, 'menu-slug', 'show_page_content');
    add_action( 'admin_enqueue_scripts', 'enqueue_admin_js');
}

function enqueue_admin_js($hook) {
    if($GLOBALS['my_page'] === $hook) {
        wp_enqueue_script( 'jquery-ui-core' );
        wp_enqueue_script( 'jquery-ui-tabs' );
        // Isn't it nice to use dependencies and the already registered core js files?
        wp_enqueue_script( 'my-script', INCLUDES_URI . '/js/my_script.js', array( 'jquery-ui-core', 'jquery-ui-tabs' ) );
    }
}