用wp_enqueue_script()和wp_enqueue_style()載入指令碼與樣式提高效率

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

函數：wp_enqueue_script()

函數用法：

參數解釋：

$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_script( $handle, $src, $deps, $ver, $in_footer ); ?>

參數解釋：

$handle：用於區別 CSS 的名稱，即標識字串 (string);

$src：CSS 的檔案 URL (string);

$deps：載入的 CSS 所依存的其他 CSS 標識字串數組 (array:string, 非必需);

$ver：CSS 檔案的版本號碼，留空則使用當前 WP 版本號碼 (string, 非必需);

$media：用於載入 CSS 的頭部標籤 link 的 media 參數值 (string, 非必需)。

樣本:

<?phpfunction 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() 函數中調用，這個函數通常剛好位於頁面的 標籤前面(當然是末尾了)。

有時候我們可能會在 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(後台搜尋即可安裝)更簡單高效，也就更好。