##模板獲取js和css WordPress 本身以及主題和插件通常需要加載一些 JavaScript 來實現某些特殊功能。為了最大限度地保證兼容性，不至于出現 JavaScript 失效的情況，所以一般在頁頭加載 JavaScript 文件。 但是我們一般不建議直接去修改主題的 header.php，或者添加代碼到 wp_head() 或 wp_footer() 鉤子上，而是要使用 WordPress 官方文檔建議使用的 WP 內建的wp_enqueue_script() 和 wp_enqueue_style() 等函數進行操作。 **函數：wp_enqueue_script()** * * * * * **函數用法：** ~~~ <?php wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer ); ?> ~~~ 1. $handle：用于區別 JS 名稱，即標識字串 (string)； 1. $src：JS 的文件 URL (string)； 1. $deps：加載的 JS 所依存的其他 JS 標識字串數組 (array:string, 非必需)； 1. $ver：JS 的版本號，留空則使用當前 WP 版本號 (string, 非必需)； 1. $in_footer：是否放置到網頁 HTML 底部加載 (boolean, 非必需)。 **函數：wp_enqueue_style()** * * * * * **函數用法：** `<?php wp_enqueue_style( $handle, $src, $deps, $ver, $media ); ?>` 參數解釋： 1. $handle：用于區別 CSS 的名稱，即標識字串 (string)； 1. $src：CSS 的文件 URL (string)； 1. $deps：加載的 CSS 所依存的其他 CSS 標識字串數組 (array:string, 非必需)； 1. $ver：CSS 文件的版本號，留空則使用當前 WP 版本號 (string, 非必需)； 1. $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（后臺搜索即可安裝）更簡單高效，也就更好。