Bagaimana cara Enqueue style / skrip pada Halaman / wp-admin Tertentu?

Saya memiliki dua fungsi sederhana yang memuat barang menggunakan wp_enqueue_style()dan wp_enqueue_script(), sesuatu seperti ini:

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

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

... dan beberapa halaman admin, dibuat dengan add_menu_page()danadd_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'); 

Bagaimana cara memuat dua fungsi saya hanya di halaman ini?

Saat ini saya sedang menggunakan:

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

Tapi itu memuat file saya di setiap halaman admin, yang tidak bagus sama sekali.

Dapatkah saya melakukan ini melalui satu baris sederhana di functions.phpatau harus membuat mereka di dalam halaman saya secara terpisah (saya lebih suka opsi pertama, karena saya harus mengedit banyak fungsi admin-halaman-membuat).

Terima kasih!

add_menu_pagedan add_submenu_pagekeduanya mengembalikan "suffix" halaman, yang dapat digunakan untuk mengidentifikasi halaman dengan kait tertentu. Dengan demikian, Anda dapat menggunakan suffix tersebut dalam kombinasi dengan kait variabel admin_print_styles-{$hook_suffix}dan admin_print_scripts-{$hook_suffix}untuk secara khusus menargetkan halaman-halaman ini.

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

Saya menemukan ini sebagai metode bersih untuk menambahkan semua ini karena semuanya ditangani dalam satu fungsi. Jika Anda memutuskan untuk menghapus fungsi ini, cukup hapus panggilan ke satu fungsi.

Masalah dengan jawaban @tollmanz adalah karena Anda menggunakan kait -print-style dan -print-scripts, Anda harus membuat HTML untuk memuat skrip Anda secara manual. Ini tidak optimal, karena Anda tidak mendapatkan dependensi dan versi bagus yang menyertai wp_enqueue_script()dan wp_enqueue_style(). Itu juga tidak membiarkan Anda meletakkan sesuatu di footer jika itu tempat yang lebih baik bagi mereka.

Jadi, kembali ke pertanyaan OP: apa cara terbaik untuk memastikan bahwa saya dapat mengirim JS / CSS pada halaman admin tertentu saja?

1. Menghilangkan aksi "load - {$ my_admin_page}" untuk hanya melakukan hal-hal ketika halaman admin plugin spesifik Anda yang dimuat, dan kemudian

2. Lepaskan tindakan "admin_enqueue_scripts" untuk menambahkan wp_enqueue_scriptpanggilan dengan benar.

Sepertinya sedikit sakit, tetapi sebenarnya sangat mudah diterapkan. Dari atas:

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

Jika Anda menggunakan get_current_screen(), Anda dapat mendeteksi halaman apa yang sedang Anda kunjungi. Ada contoh dalam artikel naskah kuno yang saya terkait yang menunjukkan bagaimana menggunakan get_current_screen()dengan add_options_page(), metode ini akan bekerja untuk setiap halaman admin.

Anda dapat mengambil jawaban , dan mengembangkannya sedikit, memungkinkan untuk penggunaan bersyarat juga ...@tollmanz

Contoh:

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

Seperti @ mor7ifer yang disebutkan di atas, Anda dapat menggunakan fungsi WordPress asli get_current_screen () . Jika Anda mengulang-ulang output dari fungsi ini, misal:

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

... Anda akan melihat pangkalan yang disebut kunci . Saya menggunakan ini untuk mendeteksi halaman apa yang saya gunakan dan enqueue, seperti:

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

    }
}

Saya bertanya-tanya hal yang sama. Ada versi modern yang menggunakan 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");
  });
});

Dari dokumentasi :

admin_print_scriptsterutama digunakan untuk echo javascript inline. admin_print_scriptstidak boleh digunakan untuk memberikan gaya atau skrip pada halaman admin. Gunakan admin_enqueue_scriptssebagai gantinya. "

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

Untuk membuatnya, Anda harus menemukan nama halaman admin terlebih dahulu. Tambahkan admin_enqueue_scriptsdengan wp_die($hook)dan pergi ke halaman plugin spesifik Anda, Anda akan melihat nama halaman.

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

settings_page_plugging_info

Sekarang salin nama halaman dan gunakan dalam kondisi untuk memuat skrip pada halaman tertentu.

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