Come accodare stili / script su determinate pagine / wp-admin?

Ho due semplici funzioni che caricano roba usando wp_enqueue_style()e wp_enqueue_script(), qualcosa del genere:

function admin_custom_css()
{ wp_enqueue_style( 'stylesheet_name', 'stylesheet.css') }; 

function admin_custom_js 
{ wp_enqueue_script( 'javascript_file', 'script.js') };

... e alcune pagine di amministrazione, create con add_menu_page()eadd_submenu_page()

function my_menu() {
   add_menu_page('Page 1', 'bar', 'something', 'else', 'foo');
   add_submenu_page( 'theme_menu', 'Subpage 1', 'Subpage', 'something', 'else', 'foo'); 
}
add_action('admin_menu', 'my_menu'); 

Come posso caricare le mie due funzioni solo su queste pagine?

In questo momento sto usando:

add_action('admin_init', 'admin_custom_css' ); 
add_action('admin_init', 'admin_custom_js' );  

Ma carica i miei file su ogni pagina di amministrazione, il che non è affatto carino.

Posso farlo tramite una semplice riga functions.phpo devo accodarli separatamente nelle mie pagine (preferisco fortemente la prima opzione, dal momento che dovrei modificare molte funzioni di creazione della pagina di amministrazione).

Grazie!

add_menu_pageed add_submenu_pageentrambi restituiscono il "suffisso hook" della pagina, che può essere utilizzato per identificare la pagina con determinati hook. Pertanto, è possibile utilizzare quel suffisso in combinazione con gli hook variabili admin_print_styles-{$hook_suffix}e indirizzare admin_print_scripts-{$hook_suffix}in modo specifico queste pagine.

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' );
}

Trovo che questo sia un metodo pulito per aggiungere tutto questo perché è tutto gestito all'interno dell'unica funzione. Se decidi di rimuovere questa funzionalità, rimuovi semplicemente la chiamata all'unica funzione.

Il problema con la risposta di @tollmanz è che dal momento che stai agganciando gli hook di -print-styles e -print-scripts, devi generare l'HTML per caricare manualmente i tuoi script. Questo non è ottimale, dal momento che non si ottiene la bella dipendenza e il controllo delle versioni fornito con wp_enqueue_script()e wp_enqueue_style(). Inoltre non ti consente di mettere le cose nel piè di pagina se quello è un posto migliore per loro.

Quindi, tornando alla domanda del PO: qual è il modo migliore per assicurarmi di poter accodare JS / CSS solo su pagine amministrative specifiche?

1. Aggancia l'azione "load - {$ my_admin_page}" per fare le cose solo quando viene caricata la pagina di amministrazione del tuo plug-in specifico, quindi

2. Aggancia l'azione "admin_enqueue_scripts" per aggiungere correttamente le tue wp_enqueue_scriptchiamate.

Sembra un po 'una seccatura, ma in realtà è molto facile da implementare. Dall'alto:

    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' ) );
    }
}

Se lo usi get_current_screen(), puoi rilevare qual è la pagina in cui ti trovi. V'è un esempio in questo articolo codice che ho linkato, che mostra come usare get_current_screen()con add_options_page(), questo metodo funziona per qualsiasi pagina di amministrazione.

Potresti prendere una risposta ed espanderla leggermente, consentendo anche un uso condizionale ...@tollmanz

Esempio:

/* 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');

Come sopra indicato da @ mor7ifer, puoi utilizzare la funzione nativa di WordPress get_current_screen () . Se esegui il loop dell'output di questa funzione, ad esempio:

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

... noterai una chiave chiamata base . Uso questo rilevamento su quale pagina mi trovo e accodamento, dequeue in questo modo:

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');

    }
}

Mi chiedevo la stessa cosa. Esiste una versione moderna che utilizza 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");
  });
});

Dalla documentazione :

admin_print_scriptsutilizzato principalmente per echo javascript incorporato. admin_print_scriptsnon deve essere utilizzato per accodare stili o script nelle pagine di amministrazione. Usa admin_enqueue_scriptsinvece ".

Lo stesso 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' ) );
    }
}

Per farlo, devi prima trovare il nome della pagina di amministrazione. Aggiungi admin_enqueue_scriptscon wp_die($hook)e vai alla tua specifica pagina di plugin, vedrai il nome della pagina.

function my_plugin_scripts($hook) {
    wp_die($hook);
}
add_action( 'admin_enqueue_scripts', 'my_plugin_scripts' );

settings_page_plugging_info

Ora copia il nome della pagina e usalo in condizione per caricare gli script nella pagina specifica.

function my_plugin_scripts($hook) {
    if ( 'settings_page_plugging_info' != $hook ) {
        return;
    }

    wp_enqueue_script( 'my_custom_script', plugins_url('js/file.js', __FILE__));
}
add_action( 'admin_enqueue_scripts', 'my_plugin_scripts' );