我們?cè)谥谱鱓ordPress主題猴子WordPress插件過程中，經(jīng)常需要添加樣式文件或者js腳本文件，由于大多數(shù)用戶運(yùn)行在他們的網(wǎng)站上多個(gè)插件，可能會(huì)加載各式各樣的文件，容易引起沖突，所以WordPress系統(tǒng)為開發(fā)者提供了一個(gè)很好的腳本及樣式文件的排隊(duì)系統(tǒng)，這有助于防止插件之間的腳本沖突問題。這篇文章中，主要為大家介紹WordPress中添加Javascript文件與css文件的方法，對(duì)那些剛開始學(xué)習(xí)WordPress主題和插件的開發(fā)是特別有用的。

　　錯(cuò)誤方式

　　WordPress中提供了wp_head鉤子來幫助我們?cè)陧?yè)面的頭部添加指定的頭部消息，比如常見的關(guān)鍵詞與描述，很多人也同樣會(huì)使用這種方式來添加站點(diǎn)的外部樣式文件與腳本文件，添加代碼如下：

<?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文件

}

?>

　　這種方式雖然使用簡(jiǎn)單，但是非常不推薦使用，這種加載方式容易造成WordPress腳本的沖突。

　　WordPress腳本排隊(duì)系統(tǒng)

　　1、介紹

　　WordPress在全球擁有強(qiáng)大的開發(fā)社群，很多人都非常積極的參與到WordPress的主題與插件的開發(fā)當(dāng)中，并且可以免費(fèi)使用，為了防止各個(gè)開發(fā)者開發(fā)的插件在使用過程總出現(xiàn)腳本沖突的問題，WordPress提供了一個(gè)非常強(qiáng)大的腳本加載函數(shù)wp_enqueue_script，通過這個(gè)函數(shù)，我們可以告訴WordPress在哪加載腳本，腳本依賴哪些框架，而且該函數(shù)在利用內(nèi)置的Javascript庫(kù)時(shí)，可以避免多次加載同一個(gè)腳本。這有助于減少頁(yè)面加載時(shí)間，以及避免與其他主題和插件沖突。

　　2、使用實(shí)例

　　WordPress正確加載腳本的使用很簡(jiǎn)單，代碼如下：

<?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文件。

　　說明：

　　實(shí)例中我們首先通過函數(shù)wp_register_script(),這個(gè)函數(shù)接收5個(gè)參數(shù)：

　　$handle

　　(string) (必須) 腳本名稱. 名稱必須唯一在之后函數(shù) wp_enqueue_script() 會(huì)使用到該名稱.

　　Default: None

　　$src

　　(string) (必須) 腳本路徑，可以使用絕對(duì)路徑。

　　Default: None

　　$deps

　　(array) (可選) 腳本依賴包，依賴包會(huì)在腳本加載之前預(yù)先加載。

　　Default: array()

　　$ver

　　(string) (可選)腳本版本控制。

　　Default: false

　　$in_footer

　　(boolean) (可選) 定義腳本的位置，如果為true腳本會(huì)在頁(yè)面底部加載，默認(rèn)在head頭部加載。

　　Default: false

　　當(dāng)我們使用wp_register_script()函數(shù)注冊(cè)腳本文件后，就可以使用函數(shù)wp_enqueue_script()函數(shù)來加載該注冊(cè)的腳本文件。

　　也許有人會(huì)問我們?yōu)槭裁床恢苯蛹虞d腳本文件，而是先注冊(cè)后加載，這不是多此一舉嗎。其實(shí)這主要是為了站點(diǎn)其他開發(fā)者在其他插件或者主題總方便引用你的核心腳本文件。

　　WordPress如何加載CSS樣式文件

　　WordPress css樣式文件的加載與以上介紹的腳本文件加載方式是一樣的，如下實(shí)例：

<?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’ );

?>

　　以上實(shí)例總我們同樣了用了wp_register_script鉤子來加載樣式文件。

　　實(shí)例中我們使用了plugins_url()來獲取樣式文件的路徑，這個(gè)一般在插件開發(fā)過程中使用的居多，如果我們是主題中開發(fā)使用到wp_register_script()函數(shù)則可以使用get_template_directory_uri()來獲取樣式文件路徑，如果是子主題中使用，則可以使用函數(shù)get_stylesheet_directory_uri()來獲取路徑，實(shí)例如下：

<?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’ );

?>

　　通過以上的分析，希望對(duì)大家對(duì)WordPress添加Javascript文件與css文件有新的認(rèn)知，如果還有不清楚的童鞋，也可以留言。