使用的 WP 內建的 wp_enqueue_script() 和 wp_enqueue_style()

WordPress 本身以及主題和外掛通常需要載入一些 JavaScript 來實現某些特殊功能。為了最大限度地保證相容性，不至於出現 JavaScript 失效的情況，所以一般在頁頭載入 JavaScript 檔案。

但是我們一般不建議直接去修改主題的 header.php，或者新增程式碼到 wp_head() 或 wp_footer() 鉤子上，而是要使用 WordPress 官方檔案建議使用的 WP 內建的 wp_enqueue_script() 和 wp_enqueue_style() 等函式進行操作。

函式用法：

<?php wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer ); ?>

引數解釋：

$handle：用於區別 JS 名稱，即標識字串 (string)；
$src：JS 的檔案 URL (string)；
$deps：載入的 JS 所依存的其他 JS 標識字串陣列 (array:string, 非必需)；
$ver：JS 的版本號，留空則使用當前 WP 版本號 (string, 非必需)；
$in_footer：是否放置到網頁 HTML 底部載入 (boolean, 非必需) 。

函式：wp_enqueue_style()

函式用法：

<?php wp_enqueue_style( $handle, $src, $deps, $ver, $media ); ?>

引數解釋：

$handle：用於區別 CSS 的名稱，即標識字串 (string)；
$src：CSS 的檔案 URL (string)；
$deps：載入的 CSS 所依存的其他 CSS 標識字串陣列 (array:string, 非必需)；
$ver：CSS 檔案的版本號，留空則使用當前 WP 版本號 (string, 非必需)；
$media：用於載入 CSS 的頭部標籤 link 的 media 引數值 (string, 非必需) 。

示例:

<?php
function my_enqueue_scripts() {
if( !is_admin ) { // 前臺載入的指令碼與樣式表
// 去除已註冊的 jquery 指令碼
wp_deregister_script( 'jquery' );
// 註冊 jquery 指令碼
wp_register_script( 'jquery', get_template_directory_uri() . '/js/jquery.js', false, '1.0', false );
// 提交載入 jquery 指令碼
wp_enqueue_script( 'jquery' );
 }
}
// 新增回撥函式到 init 動作上
add_action( 'init', 'my_enqueue_scripts' );
?>

在以往我們製作 WP 主題的時候，當引入 JS 檔案或 CSS 檔案時，通常是直接編輯 header.php 檔案，然後將相應的頁面頭部 HTML 程式碼新增進去。或者利用 wp_head() 函式鉤子插入 HTML 程式碼。

遇到一個外掛或主題功能比較多的 WordPres 網站時，如果仍使用自行插入程式碼的方式引入 JS / CSS，將可能導致 JS 的過載和 CSS 的重定義或覆蓋的後果。而使用 wp_enqueue_script() 和 wp_enqueue_style() 等函式操作頭部引用，將輸出 HTML 語句的工作交給 WP 核心去完成（幾乎所有外掛都這麼做），不僅能夠避免重複載入的現象出現，也可實現按 PHP 指令碼順序，任意修改、覆蓋、刪除即將被載入的 JS 檔案和 CSS 檔案。

另外一個函式：wp_print_scripts()

雖然將 JavaScript 檔案都放到頁面末尾載入對於頁面載入速度很有幫助，但是請注意，所謂頁面末尾指的是在 WordPress 的 wp_footer() 函式中呼叫，這個函式通常剛好位於頁面的 </body> 標籤前面（當然是末尾了）。

有時候我們可能會在 wp_footer 函式出現之前就需要用到某些 JavaScript，比如 jquery.js 檔案。

這樣的情況也是很常見的。比如我單獨建立了一個連結頁面，在這個頁面中我使用了 jQuery 方法來獲取連結網站的 favicon 。很顯然，我只需要在這唯一一個頁面使用這部分程式碼，所以將這段程式碼直接放在這個頁面模板中是最好的做法。

問題來了：這部分內容顯然是在 wp_footer 之前出現的，那麼這段程式碼就在 jquery.js 檔案之前出現了，導致該程式碼段實際上無法工作，因為呼叫 jQuery 方法的程式碼段必須比 jquery.js 檔案後載入。

那麼如何處理這種特殊情況呢？其實也很簡單。以上面的情景為例，既然我們需要先呼叫 jquery.js 檔案，那我們就在該程式碼段之前直接輸出需要的 jquery.js 檔案，不使用 wp_enqueue_script() 函式，而改用 wp_print_scripts() 函式。

wp_enqueue_script() 與 wp_print_scripts() 的區別是：wp_enqueue_script() 是告訴 WordPress 「我在這個頁面上需要用到某個 JavaScript 檔案，你可要記得載入啊」。 WordPress 預設在 wp_head() 中處理，而我們改為在 wp_footer() 中處理。 wp_print_scripts() 則直接在你使用此方法的位置輸出需要的 JavaScript 檔案，而不是加入到 WordPress 的處理任務中。

如果我們在頁面的中間使用，

 <?php wp_print_scripts('jquery'); ?>

直接輸出了 jquery.js 檔案（通常是其壓縮版本 jquery.min.js），那麼即使其它的外掛或者什麼東西使用，

 <?php wp_enqueue_script('jquery'); ?>

告訴 WordPress 需要載入 jquery.js，WordPress 在 wp_footer() 中處理的時候也會先檢查前面是不是已經有了，如果有了就不會再重新載入一次。

在 WordPress 中載入 JavaScript 最好使用 wp_enqueue_script() 函式以減少問題提高效率。如果不是有這些特殊情況要處理，使用 Autoptimize 外掛顯然比較好，它全面完成任務而且使用簡單。但是如果使用的主題本身已經很簡潔了，那麼直接把 JavaScript 指令碼放在 footer 或者使用：JavaScript to Footer（後臺搜尋即可安裝）更簡單高效，也就更好。

使用的 WP 內建的 wp_enqueue_script() 和 wp_enqueue_style()