第一種就是常見的 link 標簽引用 CSS 文件,Script 標簽應用 JS 文件,這里不再贅述.

第二種就是使用 wp_head 函數,wp_head 函數用來輸出一些自定義或者系統定義的內容,我們有時候會使用下面代碼引用文件:

1. <?php  
2. add_action('wp_head', 'wpjam_normal_script');  
3. function wpjam_normal_script() {  
4. echo '資源文件的鏈接';  
5. }  
6. ?> 

將上面代碼復制到 functions.php 文件中,即可引用對應的文件.

WordPress 的排隊引用（Enqueue Scripts）資源機制

在 WordPress 中引用資源,應該使用 wp_enqueue_script 這個函數,函數名中有個單詞 enqueue 是排隊或者排序的意思,眾所周知，WordPress 有很多的插件,幾乎每個插件都會引用一些資源文件,難免會有兩個插件引用的資源發生沖突等,這樣會變得不穩定而且可能會影響效率.

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

此外,WordPress 中內置了一些常用的庫(例如 jQuery、jQuery UI 等),我們可以使用wp_enqueue_script 這個函數直接調用內置庫,可以節約代碼量,更加清晰規范.

如果使用這個函數來引用自己的 JS 和 CSS 文件,首先需要使用 wp_register_script 這個函數注冊一個標識(handle),然后使用 wp_enqueue_script 函數調取這個標志對應的資源。

WordPress 合理引入 JS 和 CSS 的方法,可以使用下面代碼為你的插件引入 plugin.css 文件.

1. <?php  
2. function wpjam_add_styles() {  
3.   wp_register_script('plugin_stylesheet', plugins_url('plugin.css', __FILE__));  
4.   wp_enqueue_script('plugin_stylesheet');  
5. }  
6.    
7. add_action( 'wp_enqueue_scripts', 'wpjam_add_styles' );    
8. ?> 

上面先用 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 文件的比較完整的例子:

1. <?php  
2. function wpjam_add_scripts() {  
3.   wp_register_script('plugin_script', plugins_url('plugin_script.js', __FILE__), array('jquery'),'1.1', true);  
4.   wp_enqueue_script('plugin_script');  
5. }  
6. add_action( 'wp_enqueue_scripts', 'wpjam_add_scripts' );    
7. ?> 

在 WordPress 主題開發中使用 wp_enqueue_script 引入資源

上面的例子都是以插件開發引用資源為例,在主題中引用的方法相似,主要的區別就在于使用對應的函數獲取主題目錄從而得到主題下面的資源文件地址.

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