WordPress怎麼引用javascript和 CSS 檔案

第一種就是常見的 link 標籤引用 CSS 檔案，Script 標籤應用 JS 檔案。這裡不再贅述。

第二種就是使用 wp_head 函數。wp_head 函數用來輸出一些自訂或者系統定義的內容，我們有時候會使用下面代碼引用檔案：

代碼如下	複製代碼
<?php add_action('wp_head', 'wpjam_normal_script'); function wpjam_normal_script() { echo '資源檔的連結'; } ?>

將上面代碼複製到 functions.php 檔案中，即可引用對應的檔案。

WordPress 的排隊引用（Enqueue Scripts）資源機制
在 WordPress 中引用資源，應該使用 wp_enqueue_script 這個函數，函數名中有個單詞 enqueue 是排隊或者排序的意思。眾所周知，WordPress 有很多的外掛程式，幾乎每個外掛程式都會引用一些資源檔，難免會有兩個外掛程式引用的資源發生衝突等，這樣會變得不穩定而且可能會影響效率。

使用這種方式引用，和對應檔案以及核心代碼分離的，如果使用者想要禁用某個資源，直接刪除、修改、注釋掉即可，而不需要從核心代碼中修改。

此外，WordPress 中內建了一些常用的庫（例如 jQuery、jQuery UI 等），我們可以使用wp_enqueue_script 這個函數直接調用內建庫，可以節約代碼量，更加清晰規範。內建的已經定義庫的列表和標識符（handle）請點擊這裡查看。

如果使用這個函數來引用自己的 JS 和 CSS 檔案，首先需要使用 wp_register_script 這個函數註冊一個標識（handle），然後使用 wp_enqueue_script 函數調取這個標誌對應的資源。

 

WordPress 合理引入 JS 和 CSS 的方法
可以使用下面代碼為你的外掛程式引入 plugin.css 檔案。

代碼如下	複製代碼
<?php function wpjam_add_styles() {   wp_register_script('plugin_stylesheet', plugins_url('plugin.css', __FILE__));   wp_enqueue_script('plugin_stylesheet'); }   add_action( 'wp_enqueue_scripts', 'wpjam_add_styles' );   ?>

上面先用 wp_register_script 函數建立了一個標識符為 plugin_stylesheet 的資源，隨後將其排隊請求添加到 wp_enqueue_scripts action 中。雖然函數名中是 script，但是跟資源檔的類型沒有關係，對 CSS 和 JS 都有效。

很顯然 wp_register_script 函數沒有這麼簡單，它可以有五個參數：

•$handle：資源標識符，供 wp_enqueue_script 調用。
•$src：資源的位置。相對位址或者絕對位址或者使用 WordPress 內建的函數擷取地址等。常用定位函數有 plugins_url、get_template_directory_uri 等。
•$deps：依賴關係。如果引用的是 jQuery 外掛程式，需要依賴 jQuery 組建，那麼就需要填寫上 jQuery。注意，以數組的形式傳遞。
•$ver：資源版本，可選的。
•$in_footer：是否放在底部。一般來說，JS 檔案要放在頁面的底部，就可以設定這個參數為 True，留空或者 False 會輸出到頂部。
下面看一個引用 JavaScript 檔案的比較完整的例子：

代碼如下	複製代碼
<?php function wpjam_add_scripts() {   wp_register_script('plugin_script', plugins_url('plugin_script.js', __FILE__), array('jquery'),'1.1', true);   wp_enqueue_script('plugin_script'); }   add_action( 'wp_enqueue_scripts', 'wpjam_add_scripts' );   ?>

在 WordPress 主題開發中使用 wp_enqueue_script 引入資源
上面的例子都是以外掛程式開發引用資源為例，在主題中引用的方法相似，主要的區別就在於使用對應的函數擷取主題目錄從而得到主題下面的資源檔地址。

可以使用 get_template_directory_uri 這個函數來擷取當前主題的目錄，如果你使用的是子主題，那麼需要使用 get_stylesheet_directory_uri 這個函數來擷取父主題的目錄從而得到對應資源。