在某些/ wp-admin 頁面上如何排列樣式/腳本？

問題描述

我有兩個簡單的功能，使用 wp_enqueue_style()和 wp_enqueue_script()加載東西，像這樣：

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

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

… 和幾個管理頁面，使用 add_menu_page()和 add_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');

如何僅在這些頁面上加載我的兩個功能？

現在我正在使用：

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

但它會在每個管理頁面上加載我的文件，這根本不是很好。

我可以通過 functions.php 中的一條簡單的線路進行此操作，或者必須將它們分開放置在我的頁面中 (我更喜歡第一個選項，因為我必須編輯很多 admin-page-creating 函數) 。

謝謝！

最佳解決方案

add_menu_page 和 add_submenu_page 都返回頁面的「鈎子後綴」，可以用來標識具有某些鈎子的頁面。因此，您可以將該後綴與可變掛鈎 admin_print_styles-{$hook_suffix}和 admin_print_scripts-{$hook_suffix}結合使用來專門定位這些頁面。

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

我發現這是一個乾淨的方法來添加所有這一切，因為它都在一個函數內部處理。如果您決定刪除此功能，只需刪除對該功能的調用。

次佳解決方案

@tollmanz 答案的問題是，由於您掛起了-print-styles 和-print-scripts 鈎子，因此您必須生成 HTML 手動加載腳本。這不是最佳的，因為您沒有得到 wp_enqueue_script()和 wp_enqueue_style()附帶的很好的依賴和版本控制。如果這是一個更好的地方，它也不會讓你把東西放在頁腳中。

所以，回到 OP 的問題：什麼是最好的方式來確保我可以排列 JS / CSS 在特定的管理頁面上？

掛起”load-{$my_admin_page}” 操作，只有當您的特定插件的管理頁面加載時，才能執行操作，然後
掛斷”admin_enqueue_scripts” 操作，正確添加您的 wp_enqueue_script 調用。

似乎有點痛苦，但實際上很容易實現。從一開始：

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

第三種解決方案

如果您使用 get_current_screen()，您可以檢測到您所在的頁面。在我鏈接的 codex 文章中有一個示例，顯示如何使用 get_current_screen()與 add_options_page()，此方法將適用於任何管理頁面。

第四種方案

您可以使用 @tollmanz answer，並稍微展開，允許條件使用…

例：

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

參考文獻

How do I enqueue styles/scripts on certain /wp-admin pages?

注：本文內容整合自 Google/Baidu/Bing 輔助翻譯的英文資料結果。如果您對結果不滿意，可以加入我們改善翻譯效果：薇曉朵技術論壇。

在某些/ wp-admin 頁面上如何排列樣式/腳本？