我有两个简单的函数可以使用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中的一条简单行来执行此操作,还是必须将它们排入队列我的页面分开(强烈建议使用第一种方法,因为我必须编辑很多管理页面的创建功能)。

谢谢!

评论

请参阅官方文档示例developer.wordpress.org/plugins/javascript/enqueuing/#enqueuecodex.wordpress.org/Plugin_API/Action_Reference/…

#1 楼

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


我发现这是添加的干净方法所有这些都是因为它全部在一个函数中处理。如果您决定删除此功能,只需删除对该功能的调用。

评论


这个答案在技术上不正确。 admin_print_scripts()的法典规定“不应将admin_print_scripts排入样式或脚本。” @TomAuger的答案实际上是正确的答案,尽管不是最佳答案。如果WP小组添加了admin_enqueue_scripts-(hookname)钩子将是有益的...

–大卫·加德(David Gard)
2014年5月2日15:15



我花了三天的时间找到这个答案,这对我真的很有帮助:)谢谢:)

–阿斯范迪亚尔汗
16-11-24在6:43

@DavidGard,您可能应该看看这些developer.wordpress.org/reference/hooks / ...,developer.wordpress.org/reference/hooks / ...

–hkchakladar
18年2月24日在18:34

@hkchakladar我的评论已有将近四年的历史...如果不再有意义,请务必添加更新的评论来解释原因。

–大卫·加德(David Gard)
18-2-24在18:38



#2 楼

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


评论


+1-这是前往IMO的方式。单独的命名空间(someaction- $ hook)钩子适合进行1或2个操作,但是如果要编写插件,则可能只需要在选项页上做很多不同的事情,这使得此方法真正可行方便。我通常只是在load- $ hook钩子上添加1个操作,该钩子会触发我的option_page_actions函数,我可以在其中添加许多其他钩子/过滤器等。由于这些操作仅在选择的页面上调用,因此不需要该点之外的钩子使用命名空间的钩子(如您所示),这更加高效和直观。

–埃文·马特森(Evan Mattson)
13年6月2日在16:34

嗨,仍然支持这种方式吗? load_admin_js从不调用

–IAmJulianAcosta
2014年3月23日19:53

当然,它仍然受支持。 admin.php的206行。从2.6开始就一直存在,并且不太可能很快消失(永远)。

–汤姆·俄格(Tom Auger)
2014年3月24日14:01在

现在看我的回答,我相信显式地将jquery-ui-core和jquery-ui-tabs放入队列是完全多余的,因为这些脚本已被注册。您只需要在依赖项中调用它们即可。我将相应地更新答案。

–汤姆·俄格(Tom Auger)
2015年4月26日,1:17

与WordPress 4.9.6完美搭配

–ethmz
18年6月18日在1:45

#3 楼

如果使用get_current_screen(),则可以检测到当前页面。我链接的法典文章中有一个示例,显示了如何将get_current_screen()add_options_page()一起使用,此方法适用于任何管理页面。

#4 楼

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


#5 楼

您可以采用@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');


#6 楼

正如上面提到的@ 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');

    }
}


#7 楼

为此,您必须先找到管理页面名称。将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' );


#8 楼

来自文档:admin_print_scripts主要用于回显嵌入式javascript。 admin_print_scripts不应用于在管理页面上加入样式或脚本。请改用admin_enqueue_scripts。“


admin_print_styles相同。

评论


查看这些developer.wordpress.org/reference/hooks / ...,developer.wordpress.org/reference/hooks / ...

–hkchakladar
18年2月24日在18:36

#9 楼

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