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

53

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!

Wordpressor
sumber

Jawaban:

33

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.

tollmanz
sumber
5
Jawaban ini secara teknis tidak benar. yang Codex untukadmin_print_scripts() negara-negara " admin_print_scripts tidak boleh digunakan untuk gaya enqueue atau script ." Jawaban oleh @TomAuger sebenarnya adalah jawaban yang benar, meskipun tidak optimal. Akan bermanfaat jika tim WP menambahkan admin_enqueue_scripts-(hookname)pengait ...
David Gard
Butuh 3 hari untuk menemukan jawaban ini yang sangat membantu saya :) Terima kasih :)
Asfandyar Khan
@ David Gard, Anda mungkin harus melihat ini developer.wordpress.org/reference/hooks/… , developer.wordpress.org/reference/hooks/…
hkchakladar
1
@hkchakladar Komentar saya hampir empat tahun ... Jika tidak lagi relevan, silakan tambahkan komentar terbaru yang menjelaskan alasannya.
David Gard
61

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' ) );
    }
}
Tom Auger
sumber
4
+1 - Ini adalah cara untuk menggunakan IMO. Kait individual namespaced (someaction- $ hook) bagus untuk 1 atau 2 tindakan, tetapi jika Anda membuat plugin, Anda mungkin perlu melakukan banyak hal yang berbeda hanya pada halaman opsi Anda yang membuat metode ini benar-benar mudah. Saya biasanya hanya menambahkan 1 aksi ke load-$hookhook yang mengaktifkan option_page_actionsfungsi saya yang mana saya dapat menambahkan banyak hook / filter lain dll. Karena tindakan tersebut hanya dipanggil pada halaman pilihan, hook di luar titik itu tidak perlu menggunakan kait namespace (seperti yang telah Anda tunjukkan), yang jauh lebih efisien & intuitif.
Evan Mattson
Hai, apakah cara ini masih didukung? load_admin_js tidak pernah menelepon
IAmJulianAcosta
Tentu itu masih didukung. Baris 206 dari admin.php. Sudah ada sejak 2.6, dan tidak mungkin pergi dalam waktu dekat (pernah).
Tom Auger
Melihat jawaban saya sekarang, saya percaya bahwa secara eksplisit enqueueing jquery-ui-core dan jquery-ui-tabs sepenuhnya luar biasa, karena skrip tersebut sudah terdaftar. Anda hanya perlu memanggil mereka dalam ketergantungan. Saya akan memperbarui jawaban saya sesuai.
Tom Auger
Berfungsi sempurna dengan WordPress 4.9.6
ethmz
13

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.

mor7ifer
sumber
3

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');
Michael Ecklund
sumber
3

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

    }
}
berulang
sumber
2

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");
  });
});
Kit Sunde
sumber
0
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' ) );
    }
}
Jashwant
sumber
0

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