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