黃聰：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 pagefunction 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>';

 總結

• 1、不要在所有的管理頁面上都載入 CSS 或 JS 檔案。這會引起與其他外掛程式的衝突。
• 2、在 init 函數之後使用 get_current_screen 來識別你的管理介面什麼時候是可見的，可見的時候載入額外的東西。
• 3、核心管理頁面的 ID 可在 Codex 的這個頁面上找到 Admin Screen Reference 。
• 4、不要引用 <script> 或者 <style> 標籤；要用 wp_enqueue_* 函數。
• 5、先到 Codex 檢查是不是你的指令碼已經在 WP core 上面了。

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

本文由 CloudCheung 翻譯，轉載請以可點擊的超連結形式註明源地址。