wordpress正確載入JS檔案與css檔案的方式

我們在製作wordpress主題猴子wordpress插件過程中，經常需要添加樣式文件或js腳本文件，由於大多數用戶運行在他們的網站上多個插件，可能會加載各式各樣的文件，容易引起衝突，所以wordpress系統為開發者提供了一個很好的腳本及樣式檔案的排隊系統，這有助於防止外掛程式之間的腳本衝突問題。這篇文章中，主要為大家介紹wordpress中加入Javascript檔與css檔案的方法，對那些剛開始學習WordPress主題和外掛的開發是特別有用的。

錯誤方式

wordpress中提供了wp_head鉤子來幫助我們在頁面的頭部添加指定的頭部訊息，例如常見的關鍵字與描述，很多人也同樣會使用這種方式來添加網站的外部樣式文件與腳本文件，新增程式碼如下：

add_action('wp_head', 'wpb_bad_script');
function wpb_bad_script() {
echo '
'; //添加js文件
}
?>

這種方式雖然使用簡單，但是非常不建議使用，這種載入方式容易造成wordpress腳本的衝突。

wordpress腳本排隊系統

1、介紹

wordpress在全球擁有強大的開發社群，很多人都非常積極的參與到wordpress的主題與插件的開發當中，並且可以免費使用，為了防止各個開發者開發的外掛程式在使用過程總是會出現腳本衝突的問題，wordpress提供了一個非常強大的腳本載入函數wp_enqueue_script，透過這個函數，我們可以告訴wordpress在哪裡載入腳本，腳本依賴哪些框架，而且該函數在利用內建的Javascript函式庫時，可以避免多次載入同一個腳本。這有助於減少頁面載入時間，以及避免與其他主題和外掛衝突。

2、使用實例

wordpress正確載入腳本的使用很簡單，程式碼如下：

function wpb_adding_scripts() {
wp_register_script('my_amazing_script', plugins_url('amazing_script.js', __FILE__), array('jquery'),'1.1', true);
wp_enqueue_script('my_amazing_script');
}
add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts' );
?>

你可以將以上程式碼放入你的外掛檔案或主題的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樣式檔案的載入與以上介紹的腳本檔案載入方式是一樣的，如下實例：

function wpb_adding_styles() {
wp_register_script('my_stylesheet', plugins_url('my-stylesheet.css', __FILE__));
wp_enqueue_script('my_stylesheet');
}
add_action( 'wp_enqueue_scripts', 'wpb_adding_styles' );
?>

以上實例總我們同樣了用了wp_register_script鉤子來載入樣式檔案。

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

function wpb_adding_scripts() {
wp_register_script('my_amazing_script', plugins_url('amazing_script.js', __FILE__), array('jquery'),'1.1', true);
wp_enqueue_script('my_amazing_script');
}
add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts' );
?>

通過以上的分析，希望對大家對wordpress添加Javascript文件與css文件有新的認知。