Cum Încarc Style-uri/Script-uri doar pe Anumite Pagini /wp-admin?

Problema cu răspunsul lui @tollmanz este că, deoarece te conectezi la hook-urile -print-styles și -print-scripts, trebuie să generezi manual HTML-ul pentru încărcarea scripturilor tale. Acest lucru nu este optim, deoarece nu beneficiezi de dependențele și versiunile frumos gestionate oferite de wp_enqueue_script() și wp_enqueue_style(). De asemenea, nu îți permite să plasezi elementele în footer, dacă acesta ar fi un loc mai potrivit pentru ele.

Deci, revenind la întrebarea OP: care este cea mai bună metodă pentru a mă asigura că pot încărca JS / CSS doar pe anumite pagini din administrare?

1. Folosește hook-ul "load-{$my_admin_page}" pentru a executa acțiuni doar atunci când este încărcată pagina specifică de administrare a plugin-ului tău, și apoi

2. Folosește hook-ul "admin_enqueue_scripts" pentru a adăuga corect apelurile tale wp_enqueue_script.

Pare un pic complicat, dar de fapt este foarte ușor de implementat. Iată cum:

    add_action( 'admin_menu', 'add_my_admin_menus' ); // hook pentru a adăuga meniuri în navigația din stânga a administrării

    /**
     * Crează meniurile de administrare în navigația din stânga și încarcă JavaScript-ul condiționat doar pe acea pagină
     */
    function add_my_admin_menus(){
        $my_page = add_menu_page( 'Titlul Paginii', 'Titlul Meniului', MY_ADMIN_CAPABILITY, 'menu-slug', 'show_page_content' );

        // Încarcă JS-ul condiționat
        add_action( 'load-' . $my_page, 'load_admin_js' );
    }

    // Această funcție este apelată doar când se încarcă pagina plugin-ului nostru!
    function load_admin_js(){
        // Din păcate, nu putem încărca scripturile aici - este prea devreme. Așa că ne înregistrăm la hook-ul potrivit pentru a face acest lucru
        add_action( 'admin_enqueue_scripts', 'enqueue_admin_js' );
    }

    function enqueue_admin_js(){
        // Nu este frumos să folosești dependențe și fișierele js de bază deja înregistrate?
        wp_enqueue_script( 'my-script', INCLUDES_URI . '/js/my_script.js', array( 'jquery-ui-core', 'jquery-ui-tabs' ) );
    }
}

Dacă folosești get_current_screen(), poți detecta pe ce pagină te afli. Există un exemplu în articolul codex pe care l-am linkuit care arată cum să folosești get_current_screen() împreună cu add_options_page(), această metodă va funcționa pentru orice pagină de administrare.

După cum a menționat @mor7ifer mai sus, puteți utiliza funcția nativă WordPress get_current_screen(). Dacă parcurgeți rezultatul acestei funcții, de exemplu:

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

... veți observa o cheie numită base. Eu folosesc aceasta pentru a detecta pe ce pagină mă aflu și pentru a încărca sau elimina scripturi și stiluri astfel:

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

public function some_hook_function(){

    // # înregistrează și încarcă scripturile & stilurile doar pe ecranul de editare POST în 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 { // # dacă nu sunt pe pagina de postare, elimină înregistrarea și încărcarea stilurilor & scripturilor

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

    }
}

Mă întrebam același lucru. Există o versiune modernă care folosește admin_enqueue_scripts:

add_action('admin_menu', function () {
  $settingsPage = add_options_page('Setări', 'Calculator de Ipotecă', 'manage_options', 'mortgagecalculator', function () {
    echo "<div id='app'></div>";
  });
  /**
   * Include scripturile Ember pentru admin doar pe paginile unde sunt necesare.
   */
  add_action("admin_enqueue_scripts", function ($hook) use ($settingsPage){
    if($hook !== $settingsPage){
      return;
    }
    // Elimină jQuery implicit deoarece Ember oferă propria versiune.
    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");
  });
});

Pentru a realiza acest lucru, trebuie mai întâi să găsești numele paginii de administrare. Adaugă admin_enqueue_scripts cu wp_die($hook) și navighează la pagina specifică a pluginului tău. Vei vedea numele paginii.

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

settings_page_plugging_info

Acum copiază numele paginii și folosește-l într-o condiție pentru a încărca scripturile doar pe pagina specifică.

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

Ai putea lua @tollmanz răspunsul și să-l extinzi ușor, permițând și utilizarea condiționată...

Exemplu:

/* Adaugă pagini în admin */
function my_admin_pages(){
    $menu = array();
    $menu['main_page'] = add_menu_page('Pagina 1', 'bar', 'something', 'else', 'foo');
    $menu['sub_page'] = add_submenu_page('theme_menu', 'Subpagina 1', 'Subpagina', 'something', 'else', 'foo');
    foreach($menu as $key => $value){
        if($key == 'main_page'){
            /* Afișează stilurile doar pe pagina principală. */
            add_action('admin_print_styles-'.$value, 'print_styles');
        }
        /* Afișează scripturile pe toate paginile noastre din admin. */
        add_action('admin_print_scripts-'.$value, 'print_scripts');
    }
}
add_action('admin_menu', 'my_admin_pages');

Din documentație:

admin_print_scripts este folosit în principal pentru a afișa JavaScript inline. admin_print_scripts nu ar trebui să fie utilizat pentru a încărca stiluri sau scripturi pe paginile de administrare. Folosește în schimb admin_enqueue_scripts."

La fel și cu admin_print_styles.

add_action( 'admin_menu', 'add_my_admin_menus' ); 

function add_my_admin_menus() {
    $GLOBALS['my_page'] = add_menu_page( 'Titlul Paginii', 'Titlul Meniului', 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' );
        // Nu este minunat să folosim dependințe și fișierele js de bază deja înregistrate?
        wp_enqueue_script( 'my-script', INCLUDES_URI . '/js/my_script.js', array( 'jquery-ui-core', 'jquery-ui-tabs' ) );
    }
}