在WordPress管理后臺正確加載js和css腳本

作為WordPress開發(fā)者，我們需要學(xué)會按照WordPress規(guī)范的方式去進(jìn)行開發(fā)，避免帶來不必要的兼容問題。今天，倡萌就和大家來說下如何在WordPress管理后臺界面正確地加載js和css腳本。

一些錯誤的示例

開始之前，讓我們來看一下一些初級開發(fā)者常犯的錯誤。

// 錯誤示例1
function wpkj_loading_scripts_wrong() {
	echo '<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>';
}
add_action('admin_head', 'wpkj_loading_scripts_wrong');

// 錯誤示例2
function wpkj_loading_scripts_wrong() {
	echo '<script type="text/javascript" src="https://yoursite.com/path/to/custom.js"></script>';
}
add_action('admin_head', 'wpkj_loading_scripts_wrong');

// 錯誤示例3
function wpkj_loading_scripts_wrong_again() {
	wp_enqueue_script('custom-js', 'wp-content/my-plugin-dir/js/custom.js');
}
add_action('admin_init', 'wpkj_loading_scripts_wrong_again');

我們先來簡單分析下以上示例的錯誤：

1、未使用正確的鉤子

上面的示例使用的是 admin_head 或 admin_init，這些都是錯誤的鉤子，雖然可以正常加載你的js或css腳本，但是可能會造成兼容問題。正確的做法是使用 admin_enqueue_scripts 鉤子。

2、重復(fù)引用 jquery 腳本庫

示例1引入了一個自定義的jquery庫，這是絕對不允許的，這樣做會在同一個頁面有兩個版本的jquery腳本（另一個是WP默認(rèn)自帶的），它會導(dǎo)致其他依賴 jquery 庫的腳本無法正常工作。正確的做法是，通過 wp_enqueue_script() 的第3個參數(shù)設(shè)置依賴關(guān)系。比如：

// 這里直接引入你自己的自定義js腳本文件，
// 如果這個文件的代碼需要依賴 jquery 庫，在第三個參數(shù)使用 array( 'jquery' ) 即可
function wpkj_scripts_method() {
    wp_enqueue_script( 'custom-script', get_stylesheet_directory_uri() . '/js/custom_script.js', array( 'jquery' ) );
}
add_action( 'admin_enqueue_scripts', 'wpkj_scripts_method' );

3、從寫死的網(wǎng)址加載文件

示例2引入了一個來自你的網(wǎng)站網(wǎng)址下的文件，一旦你的網(wǎng)站不存在或無法訪問，或者更換了域名，那就給用戶帶來了不必要的麻煩。所以，一定不要直接從你的網(wǎng)站引入文件。

4、使用相對網(wǎng)址加載文件

示例3使用了相對網(wǎng)址引入文件，可能在你的網(wǎng)站中功能正常，但是在別人的網(wǎng)站中可能會出問題，畢竟，不是所有網(wǎng)站的安裝目錄和站點情況都一樣。正確的做法應(yīng)該是使用WordPress的自帶函數(shù)來加載文件的絕對網(wǎng)址。比如：

// 引入插件的js文件，可以使用 plugins_url() 函數(shù)引入
// 比如插件中 js/custom.js，可以使用 plugins_url( 'js/custom.js' , dirname(__FILE__) )
function wpkj_load_scripts() {
	wp_enqueue_script( 'custom-js', plugins_url( 'js/custom.js' , dirname(__FILE__) ) );
}
add_action('admin_enqueue_scripts', 'wpkj_load_scripts');


// 引入主題的js文件，可以使用 get_template_directory_uri()
function wpkj_theme_name_scripts() {
    wp_enqueue_script( 'script-name', get_template_directory_uri() . '/js/custom.js', array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'wpkj_theme_name_scripts' );

5、沒有按需加載腳本文件

上面的所有示例，都會在網(wǎng)站后臺的所有頁面加載你的js文件，但是一般來說，你的js文件可能只在一個頁面上需要，這就導(dǎo)致了性能問題。

正確加載腳本到WP后臺

按照前面的錯誤分析，我們知道以下幾點：

1. 不要引入重復(fù)的腳本（比如jquery庫），可通過依賴關(guān)系參數(shù)設(shè)置
2. 使用 admin_enqueue_scripts 鉤子加載腳本
3. 使用 wp_enqueue_script() 引入js文件，使用 wp_enqueue_style() 函數(shù)引入css文件
4. 插件使用 plugins_url() 函數(shù)生成腳本路徑，主題使用 get_template_directory_uri() （父主題）或 get_stylesheet_directory_uri() （子主題）生成腳本路徑
5. 按需加載腳本文件（下文將詳細(xì)說明）

正確加載腳本的基本方式

如果前面的4點還不是很了解，建議先看下我們之前的教程：

• 正確加載 CSS 到 WordPress
• 正確加載 Javascript 和 CSS 到 WordPress
• 詳解WordPress主題開發(fā)中添加CSS樣式和Javascript腳本

下面，我們將來著重講解如何按需加載腳本到指定的管理頁面。

按需加載腳本到特定頁面

do_action( 'admin_enqueue_scripts', string $hook_suffix )

如上所示，admin_enqueue_scripts 鉤子允許我們設(shè)置一個參數(shù) $hook_suffix，這個參數(shù)一般用來指定當(dāng)前管理界面。

比如我們只需要在“文章 – 所有文章”界面加載腳本，可以使用下面的代碼：

function wpkj_load_scripts($hook) {
 
	if( $hook != 'edit.php' ) 
		return;
 
	wp_enqueue_script( 'custom-js', plugins_url( 'js/custom.js' , dirname(__FILE__) ) );
}
add_action('admin_enqueue_scripts', 'wpkj_load_scripts');

在代碼的第3-4行，我們判斷一下當(dāng)前頁面是否為“所有文章”（即 edit.php）頁面，如果不是，就不執(zhí)行下面的代碼。

再比如，我們只需要在“所有文章”、“寫文章”和文章編輯界面加載腳本，可以使用下面的代碼：

function wpkj_load_scripts($hook) {
 
	if( $hook != 'edit.php' && $hook != 'post.php' && $hook != 'post-new.php' ) 
		return;
 
	wp_enqueue_script( 'custom-js', plugins_url( 'js/custom.js' , dirname(__FILE__) ) );
}
add_action('admin_enqueue_scripts', 'wpkj_load_scripts');

在代碼的3行，我們采用了 && 符號連接了3個判斷條件，如果不是在“所有文章”、“寫文章”以及文章編輯界面，就不執(zhí)行下面的代碼。

常用的后臺頁面

你可以直接訪問對應(yīng)的頁面，在網(wǎng)址中就可以看到，比如：

• index.php – 儀表盤
• edit.php – 所有文章列表（含自定義文章類型）
• post.php – 文章編輯界面（含自定義文章類型）
• post-new.php – 添加文章（含自定義文章類型）
• upload.php – 媒體
• edit-comments.php – 評論列表
• comment.php – 評論編輯界面
• themes.php – 外觀
• widgets.php – 外觀-小工具
• nav-menus.php – 外觀-菜單
• plugins.php – 插件
• users.php – 用戶
• options-general.php – 設(shè)置 > 常規(guī)
• options-writing.php – 設(shè)置 > 撰寫
• options-reading.php – 設(shè)置 > 閱讀
• options-discussion.php – 設(shè)置 > 討論
• options-media.php – 設(shè)置 > 媒體
• options-permalink.php – 設(shè)置 > 固定鏈接

自定義設(shè)置頁面

當(dāng)然了，有些主題或插件還會在后臺創(chuàng)建自定義的設(shè)置頁面，如果你只想在這些自定義設(shè)置頁面中加載腳本，又該如何？

其實也是很簡單的， 假設(shè)我們通過下的代碼注冊了一個自定義的頂級設(shè)置界面：

function wpkj_add_admin_page() {  
  // 添加一個自定義頂級菜單
  add_menu_page(  
    'My Admin Page',  
    'My Admin Page',  
    'manage_options',  
    'my-admin-page', // 注意這個id 
    'admin_page_html'  
  )  
}
add_action('admin_menu', 'wpkj_add_admin_page'); 

如果你對添加自定義菜單的功能還不熟悉，可以看下 《WordPress 插件開發(fā)教程 Part 4 – 與WordPress整合》；更多關(guān)于自定義設(shè)置頁面的教程，可以看下專題《WordPress Settings API 指南》

上面的代碼創(chuàng)建了一個頂級菜單，作為我們自定義設(shè)置頁面的訪問入口。

然后我們可以通過下面的代碼來只在這個自定義設(shè)置頁面加載腳本：

function wpkj_load_scripts($hook) {

	if( $hook !== 'toplevel_page_my-admin-page' ) 
		return;
 
	wp_enqueue_script( 'custom-js', plugins_url( 'js/custom.js' , dirname(__FILE__) ) );
}
add_action('admin_enqueue_scripts', 'wpkj_load_scripts');

第3行代碼判斷不是這個自定義設(shè)置頁面，就不執(zhí)行下面的代碼。

小結(jié)

使用正確的方式加載腳本，不僅可以讓自己的程序更加專業(yè)，還可以避免給用戶造成困擾。

函數(shù)參考：

• admin_enqueue_scripts 鉤子
• wp_enqueue_script() 函數(shù)
• wp_enqueue_style() 函數(shù)
• plugins_url() 函數(shù)
• get_template_directory_uri() 函數(shù)
• get_stylesheet_directory_uri() 函數(shù)

如果你希望成長為一名合格的WordPress人員，建議繼續(xù)看下我們的教程：

• 成為合格的WordPress開發(fā)人員需要學(xué)習(xí)哪些知識？
• WordPress主題開發(fā)核心知識【視頻教程】