Wordpress用get_current_screen函數來選擇性加載插件中的JS和CSS

很多人都說過，“一個良好的 WordPress 使用者隻加載他們需要的檔案。” 這個原則既适用于前端，也适用于後端。當你隻是想 CSS 和 JS 出現在你所建立的那個頁面，就沒有必要在背景也加載了。

“絕對不要在所有的管理界面上都允許 CSS 和 JS 檔案，這會引起與其他插件的沖突。”

幾乎所有的管理者頁面都有一個唯一的 URL，是以要做到在需要的頁面上加載 JS 和 CSS 檔案并不難。可以使用 <code>$_SERVER['REQUEST_URI']</code> 或者是 <code>$_GET['action']</code> 參數。其實還有一種更快捷，簡單而又标準化的方式來實作這個目的。那就是 <code>get_current_screen</code> 函數。

是在 WordPress 3.1 引入的，是以如果你在更舊版本上使用，會傳回 <code>call to undefined function</code> 錯誤。如果不确定，可以用 <code>function_exists</code> 函數來檢查一下是否可用。

在 <code>admin_init</code> 和 <code>init</code> 挂鈎上不可用。因為這是在那些挂鈎請求之後才會初始化的。

在後端不可用。

我們假設你的插件在設定菜單下有一個選項頁面你是用下面這行代碼寫的：

此時，你需要添加額外的 CSS 和 JavaScript 到這個頁面，代碼如下：

<a></a>

上面是個很糟糕的方案，不要那樣做。上面一段代碼會讓包含 CSS 和 JS 的 Farbtastic 顔色選擇器出現在管理者界面的每一頁。如果别的插件不需要你的 CSS 和 JS， 他們就必須用 <code>wp_dequeue_*</code> 函數來移除。這很沒有必要而且很魯莽，因為這是可以有更好的代碼的。代碼如下：

<a href="http://ki.ki.ki/files/2012/07/18/69421f032498c97020180038fddb8e24.code.png"></a>

如果你看到上圖我們寫的改進的代碼，你會發現隻加了一個 <code>if</code> 語句以及一個簡單的函數 <code>is_my_plugin_screen</code>（這是用來确認是否打開的是插件選項頁面）。控制 <code>WP_Screen</code> 的變量 <code>$screen</code> 有很多屬性值，但是我們感興趣的就隻有 id 。這個 id 有一個 字首 <code>settings_page_</code>，該字首在所有的設定頁面都是一樣的。而字元串 <code>my_plugin</code> 是唯一的，因為我們在調用 <code>add_options_page</code> 函數的時候把它定位為第四個參數了。

代碼很簡單而且在所有的管理者界面都适用。可以很友善的看見轉存到 <code>$screen</code> 的 id 是什麼

1、不要在所有的管理頁面上都加載 CSS 或 JS 檔案。這會引起與其他插件的沖突。

2、在 <code>init</code> 函數之後使用 <code>get_current_screen</code> 來識别你的管理界面什麼時候是可見的，可見的時候加載額外的東西。

4、不要引用 <code>&lt;script&gt;</code> 或者 <code>&lt;style&gt;</code> 标簽；要用 <code>wp_enqueue_*</code> 函數。

本文轉自黃聰部落格園部落格，原文連結：http://www.cnblogs.com/huangcong/archive/2013/03/23/2977349.html，如需轉載請自行聯系原作者