我們在製作 WordPress 主題猴子 WordPress 外掛過程中，經常需要新增樣式檔案或者 js 指令碼檔案，由於大多數使用者執行在他們的網站上多個外掛，可能會載入各式各樣的檔案，容易引起衝突，所以 WordPress 系統為開發者提供了一個很好的指令碼及樣式檔案的排隊系統，這有助於防止外掛之間的指令碼衝突問題。這篇文章中，主要為大家介紹 WordPress 中新增 Javascript 檔案與 css 檔案的方法，對那些剛開始學習 WordPress 主題和外掛的開發是特別有用的。
錯誤方式
WordPress 中提供了 wp_head 鉤子來幫助我們在頁面的頭部新增指定的頭部訊息，比如常見的關鍵詞與描述，很多人也同樣會使用這種方式來新增站點的外部樣式檔案與指令碼檔案，新增程式碼如下：
<?php
add_action('wp_head', 'wpb_bad_ｓｃｒｉｐｔ');
function wpb_bad_ｓｃｒｉｐｔ() {
echo '<ｓｃｒｉｐｔ type="text/javaｓｃｒｉｐｔ" src="http://www.54ux.com/wp-content/themes/d-simple/js/sidenav.js"></ｓｃｒｉｐｔ>
'; //新增 js 檔案
}
?>
這種方式雖然使用簡單，但是非常不推薦使用，這種載入方式容易造成 WordPress 指令碼的衝突。
WordPress 指令碼排隊系統
1 、介紹
WordPress 在全球擁有強大的開發社群，很多人都非常積極的參與到 WordPress 的主題與外掛的開發當中，並且可以免費使用，為了防止各個開發者開發的外掛在使用過程總出現指令碼衝突的問題，WordPress 提供了一個非常強大的指令碼載入函式 wp_enqueue_script，透過這個函式，我們可以告訴 WordPress 在哪載入指令碼，指令碼依賴哪些框架，而且該函式在利用內建的 Javascript 庫時，可以避免多次載入同一個指令碼。這有助於減少頁面載入時間，以及避免與其他主題和外掛衝突。
2 、使用例項
WordPress 正確載入指令碼的使用很簡單，程式碼如下：
<?php
function wpb_adding_ｓｃｒｉｐｔs() {
wp_register_ｓｃｒｉｐｔ('my_amazing_ｓｃｒｉｐｔ', plugins_url('amazing_ｓｃｒｉｐｔ.js', __FILE__), array('jquery'),'1.1', true);
wp_enqueue_ｓｃｒｉｐｔ('my_amazing_ｓｃｒｉｐｔ');
}
add_action( 'wp_enqueue_ｓｃｒｉｐｔs', 'wpb_adding_ｓｃｒｉｐｔs' );
?>
你可以將以上程式碼放入你的外掛檔案中或者你主題的 functions.php 檔案。
說明：
例項中我們首先透過函式 wp_register_script(), 這個函式接收 5 個引數：
$handle
(string) (必須) 指令碼名稱. 名稱必須唯一在之後函式 wp_enqueue_script() 會使用到該名稱.
Default: None
$src
(string) (必須) 指令碼路徑，可以使用絕對路徑。
Default: None
$deps
(array) (可選) 指令碼依賴包，依賴包會在指令碼載入之前預先載入。
Default: array()
$ver
(string) (可選) 指令碼版本控制。
Default: false
$in_footer
(boolean) (可選) 定義指令碼的位置，如果為 true 指令碼會在頁面底部載入，預設在 head 頭部載入。
Default: false
當我們使用 wp_register_script() 函式註冊指令碼檔案後，就可以使用函式 wp_enqueue_script() 函式來載入該註冊的指令碼檔案。
也許有人會問我們為什麼不直接載入指令碼檔案，而是先註冊後載入，這不是多此一舉嗎。其實這主要是為了站點其他開發者在其他外掛或者主題總方便引用你的核心指令碼檔案。
WordPress 如何載入 CSS 樣式檔案
WordPress css 樣式檔案的載入與以上介紹的指令碼檔案載入方式是一樣的，如下例項：
<?php
function wpb_adding_styles() {
wp_register_ｓｃｒｉｐｔ('my_stylesheet', plugins_url('my-stylesheet.css', __FILE__));
wp_enqueue_ｓｃｒｉｐｔ('my_stylesheet');
}
add_action( 'wp_enqueue_ｓｃｒｉｐｔs', 'wpb_adding_styles' );
?>
以上例項總我們同樣了用了 wp_register_script 鉤子來載入樣式檔案。
例項中我們使用了 plugins_url() 來獲取樣式檔案的路徑，這個一般在外掛開發過程中使用的居多，如果我們是主題中開發使用到 wp_register_script() 函式則可以使用 get_template_directory_uri() 來獲取樣式檔案路徑，如果是子主題中使用，則可以使用函式 get_stylesheet_directory_uri() 來獲取路徑，例項如下：
<?php
function wpb_adding_ｓｃｒｉｐｔs() {
wp_register_ｓｃｒｉｐｔ('my_amazing_ｓｃｒｉｐｔ', plugins_url('amazing_ｓｃｒｉｐｔ.js', __FILE__), array('jquery'),'1.1', true);
wp_enqueue_ｓｃｒｉｐｔ('my_amazing_ｓｃｒｉｐｔ');
}
add_action( 'wp_enqueue_ｓｃｒｉｐｔs', 'wpb_adding_ｓｃｒｉｐｔs' );
?>
透過以上的分析，希望對大家對 WordPress 新增 Javascript 檔案與 css 檔案有新的認知，如果還有不清楚的童鞋，也可以留言。