如何在某些/wp-admin页面上将样式/脚本入队?

时间:2012-02-04 作者:Wordpressor

我有两个简单的函数,可以使用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\'); 

How do I load my two functions only on these pages?

现在我正在使用:

add_action(\'admin_init\', \'admin_custom_css\' ); 
add_action(\'admin_init\', \'admin_custom_js\' );  
但它会在每个管理页面上加载我的文件,这一点都不好。

我可以通过一条简单的线路来完成吗functions.php 或者必须将它们分别排列在我的页面中(我强烈喜欢第一个选项,因为我必须编辑许多管理页面创建函数)。

谢谢

9 个回复
最合适的回答,由SO网友:tollmanz 整理而成

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\' );
}
我发现这是一个干净的添加所有这些内容的方法,因为它都在一个函数中处理。如果决定删除此功能,只需删除对one函数的调用。

SO网友:Tom Auger

@tollmanz answer的问题是,由于您正在挂接-打印样式和-打印脚本挂钩,因此必须生成HTML以手动加载脚本。这并不是最优的,因为您没有得到随附的良好依赖关系和版本控制wp_enqueue_script()wp_enqueue_style(). 它也不允许你把东西放在页脚,如果那对他们来说是一个更好的地方。

那么,回到OP的问题:什么是确保我只能在特定的管理页面上将JS/CSS排队的最佳方法?

挂起“load-{$my\\u admin\\u page}”操作,只在加载特定插件的管理页时执行操作,然后

挂断“admin\\u enqueue\\u 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\' ) );
    }
}

SO网友:mor7ifer

如果您使用get_current_screen(), 您可以检测您所在的页面。在我链接的codex文章中有一个示例,说明了如何使用get_current_screen() 具有add_options_page(), 此方法适用于任何管理页面。

SO网友:Kit Sunde

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

SO网友:recurse

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

    }
}

SO网友:Michael Ecklund

你可以@tollmanz answer, 并稍微扩展一下,也允许有条件的使用。。。

Example:

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

SO网友:IqbalBary

要做到这一点,您必须首先找到管理页面名称。添加admin_enqueue_scripts 具有wp_die($hook) 然后转到您的特定插件页面,您将看到页面名称。

function my_plugin_scripts($hook) {
    wp_die($hook);
}
add_action( \'admin_enqueue_scripts\', \'my_plugin_scripts\' );
settings\\u page\\u Plug\\u信息

现在复制页面名称并在条件中使用它来加载特定页面上的脚本。

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

SO网友:Tolea Bivol

documentation:

admin_print_scripts 主要用于回显内联javascript。admin_print_scripts 不应用于将样式或脚本排入管理页面的队列。使用admin_enqueue_scripts 相反“”

与相同admin_print_styles.

SO网友:Jashwant
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\' ) );
    }
}
结束