板邓：Wordpress用get_current_screen函数来选择性加载插件中的JS和CSS

 

不少人都说过，“一个良好的 WordPress 使用者只加载他们须要的文件。” 这个原则既适用于前端，也适用于后端。当你只是想 CSS 和 JS 出如今你所建立的那个页面，就没有必要在后台也加载了。

“绝对不要在全部的管理界面上都容许 CSS 和 JS 文件，这会引发与其余插件的冲突。”

WordPress 函数就能解决这个问题

几乎全部的管理员页面都有一个惟一的 URL，因此要作到在须要的页面上加载 JS 和 CSS 文件并不难。可使用 $_SERVER['REQUEST_URI'] 或者是 $_GET['action'] 参数。其实还有一种更快捷，简单而又标准化的方式来实现这个目的。那就是 get_current_screen 函数。

关于 get_current_screen function 你须要了解的事情

• 是在 WordPress 3.1 引入的，因此若是你在更旧版本上使用，会返回 call to undefined function 错误。若是不肯定，能够用 function_exists 函数来检查一下是否可用。
• 在 admin_init 和 init 挂钩上不可用。由于这是在那些挂钩请求以后才会初始化的。
• 这个函数会返回 一个包含不少信息的叫 WP_Screen 的目标，可是咱们须要的只是上面的 id 。
• 在后端不可用。

几行代码就能使之大不相同

咱们假设你的插件在设置菜单下有一个选项页面你是用下面这行代码写的：

add_options_page('My Plugin', 'My Plugin', 'manage_options', 'my_plugin', 'my_plugin_options');

此时，你须要添加额外的 CSS 和 JavaScript 到这个页面，代码以下：

// Bad code below! Don't copy/paste!
add_action('admin_enqueue_scripts', 'my_plugin_scripts');
 
function my_plugin_scripts() {
    wp_enqueue_style('farbtastic');
    wp_enqueue_script('farbtastic');
}

 

上面是个很糟糕的方案，不要那样作。上面一段代码会让包含 CSS 和 JS 的 Farbtastic 颜色选择器出如今管理员界面的每一页。若是别的插件不须要你的 CSS 和 JS， 他们就必须用 wp_dequeue_* 函数来移除。这很没有必要并且很鲁莽，由于这是能够有更好的代码的。代码以下：

add_action('admin_enqueue_scripts', 'my_plugin_scripts');
 
function my_plugin_scripts() {
    // Include JS/CSS only if we're on our options page
    if (is_my_plugin_screen()) {
        wp_enqueue_style('farbtastic');
        wp_enqueue_script('farbtastic');
    }
}
 
// Check if we're on our options page
function is_my_plugin_screen() {
    $screen = get_current_screen();
    if (is_object($screen) && $screen->id == 'settings_page_my_plugin') {
        return true;
    } else {
        return false;
    }
}

 

要实现这个功能很简单

若是你看到上图咱们写的改进的代码，你会发现只加了一个 if 语句以及一个简单的函数 is_my_plugin_screen（这是用来确认是否打开的是插件选项页面）。控制 WP_Screen 的变量 $screen 有不少属性值，可是咱们感兴趣的就只有 id 。这个 id 有一个 前缀 settings_page_，该前缀在全部的设置页面都是同样的。而字符串 my_plugin 是惟一的，由于咱们在调用 add_options_page 函数的时候把它定位为第四个参数了。

代码很简单并且在全部的管理员界面都适用。能够很方便的看见转存到 $screen 的 id 是什么

echo '<pre>' . print_r(get_current_screen(), true) . '</pre>';

 

总结

• 一、不要在全部的管理页面上都加载 CSS 或 JS 文件。这会引发与其余插件的冲突。
• 二、在 init 函数以后使用 get_current_screen 来识别你的管理界面何时是可见的，可见的时候加载额外的东西。
• 三、核心管理页面的 ID 可在 Codex 的这个页面上找到 Admin Screen Reference 。
• 四、不要引用 <script> 或者 <style> 标签；要用 wp_enqueue_* 函数。
• 五、先到 Codex 检查是否是你的脚本已经在 WP core 上面了。

原文：Quick Tip: Conditionally Including JS and CSS With get_current_screen

本文由 CloudCheung 翻译，转载请以可点击的超连接形式注明源地址。