如何連結外部 jQuery/Javascript 檔案與 WordPress

問題描述

所以我正在使用 Starkers 來基於我的下一個 WP 主題，我遇到了一個小問題，我在 header.php 檔案中包含了我自己的 jQuery 版本，但是當我使用 Firebug 檢查我的網站時，我注意到 jquery 被下載了兩次，我做了一些挖掘，注意到不僅包括檔案，而且是 wp_head()功能。

在嘗試解決這個問題時，我注意到標頭檔案中的一個註釋，其中源自二十十個主題：

/* Always have wp_head() just before the closing </head>
 * tag of your theme, or you will break many plugins, which
 * generally use this hook to add elements to <head>, such 
 * as styles, scripts, and meta tags
 */

所以這裡是我的問題，我的印象是，jQuery 檔案必須在任何其他要使用它的檔案之前設定，而 wp_head()應該是<head> 元素中的最後一件事，現在我稍微感到困惑想知道我應該把 wp_head()放在頂部，所以 WP 包含的 jQuery 檔案將被用於所有的外掛，即使它不這樣做。

我在 wp_head()功能中註釋了 jQuery 行，但是管理頁面是必需的，所以我不得不把它放回來。

我還想使用 (至少實驗) 使用 Google CDN 版本的 jQuery，但不想包含它兩次！

我希望你明白我正在解釋什麼，關於我如何解決這個問題的任何建議將是最值得讚賞的。我也會感謝任何關於如何使用標頭檔案處理 JavaScript 檔案的建議。

謝謝！

最佳解決方案

從您的問題的措辭，您必須透過在模板中編寫<script> 標籤來新增指令碼。透過 wp_enqueue_script()在模板的 functions.php 中新增自己的指令碼，適當地設定對 jQuery 的依賴性，wp_head()將為您新增指令碼。

function my_scripts() {
    wp_enqueue_script( 'my-sweet-script', get_bloginfo('template_directory') . '/script.js', array('jquery') );
}
add_action('template_redirect', 'my_scripts');

有關更多資訊，請參閱 codex page 。

次佳解決方案

我建議看看 5 Tips for using jQuery with WordPress 。除此之外，它顯示了從 Google 的庫載入 jQuery 所需的程式碼：

function my_init() {
    if (!is_admin()) {
        // comment out the next two lines to load the local copy of jQuery
        wp_deregister_script('jquery');
        wp_register_script('jquery', 'http://googleajax.admincdn.com/ajax/libs/jquery/1.3.2/jquery.min.js', false, '1.3.2');
        wp_enqueue_script('jquery');
    }
}
add_action('init', 'my_init');

您也可以檢視 Use Google Libraries 外掛。

參考文獻

How to Link External jQuery/Javascript files with WordPress

注：本文內容整合自 Google/Baidu/Bing 輔助翻譯的英文資料結果。如果您對結果不滿意，可以加入我們改善翻譯效果：薇曉朵技術論壇。

如何連結外部 jQuery/Javascript 檔案與 WordPress