如何在某些/ 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还是必须将它们分别放入我的页面中（我强烈建议使用第一个选项，因为我必须编辑很多管理页面创建功能）。

谢谢！

add_menu_page并add_submenu_page都返回页面的“ hook后缀”，该后缀可用于标识具有某些hook的页面。这样，您可以将该后缀与变量挂钩结合使用，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的最佳方法是什么？

1. 取消“ load-{$ my_admin_page}”操作，仅在加载了特定插件的管理页面时执行操作，然后

2. 挂断“ 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()，则可以检测到当前页面。还有就是我挂它展示了如何使用抄本文章中的例子get_current_screen()有add_options_page()，这种方法适用于任何管理页面工作。

您可以采用answer，并略微扩展它，也可以有条件使用...@tollmanz

例：

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

如上面的@ mor7ifer所示，您可以使用本机WordPress函数get_current_screen（）。如果循环浏览此函数的输出，例如：

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

...您会注意到一个名为base的键。我使用此方法检测我进入的页面并入队，像这样出队：

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

    }
}

我想知道同样的事情。有一个现代版本使用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");
  });
});

从文档中：

admin_print_scripts主要用于回显内联javascript。admin_print_scripts不应用于在管理页面上加入样式或脚本。请admin_enqueue_scripts改用。”

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

为此，您必须先找到管理页面名称。添加admin_enqueue_scripts有wp_die($hook)去您的具体的插件页面，你会看到页面名称。

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

settings_page_plugging_info

现在复制页面名称，并在有条件的情况下使用它在特定页面上加载脚本。

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