板鄧：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 翻譯，轉載請以可點擊的超連接形式註明源地址。