使用的 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()