在某些/ 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 页面上如何排列样式/脚本？