我們在製作 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 文件有新的認知，如果還有不清楚的童鞋，也可以留言。