如何在 WordPress 中添加和使用 jQuery 腳本

動態搜索欄、高級產品過濾器和滑塊等交互式頁面元素可以使您的網站更加用戶友好和吸引人。 但是，如果不使用 JavaScript 或安裝 WordPress 插件，就不可能創建任何這些功能。

幸運的是，您可以在 WordPress 中使用 jQuery 輕鬆創建 JavaScript 設計元素。 您可以手動執行此操作或使用插件來加速該過程。

在本文中，我們將向您介紹 jQuery 並討論您可能想要使用它的原因。 然後，我們將向您展示兩種將自定義 jQuery 腳本添加到您的 WordPress 站點的方法，並回顧一些常見問題。

什麼是 jQuery？ （以及為什麼你可能想要使用它）

在學習如何在 WordPress 中添加 jQuery 腳本之前，您需要對 jQuery 本身有一個基本的了解。

簡而言之，jQuery 是一個輕量級的開源 JavaScript 庫，它簡化了您編寫和使用這種編碼語言的方式。

它使您能夠使用 JavaScript 輕鬆修改和增強 WordPress 主題和插件。 此功能非常有用，因為 JavaScript 對於許多功能來說都是必不可少的。

例如，您需要 JavaScript 來實現 Ajax、事件處理和 DOM 橫向/操作。 Ajax 功能尤其實用且流行。 Web 開發人員使用它來創建即時搜索加載和高級電子商務產品過濾。

用戶的一個動作，比如點擊或搜索，通常會觸發這些 JavaScript 特性。 您還需要 jQuery 來創建其他客戶端功能，例如滑塊、燈箱彈出窗口等。

默認情況下，jQuery 是否包含在 WordPress 中？

jQuery 是一種非常有用和流行的資源，它默認包含在您的 WordPress 安裝中。 你只需要知道如何使用它！ 在接下來的部分中，我們將教您如何執行此操作。

在將 jQuery 腳本添加到 WordPress 之前要做什麼

我們將很快解釋如何在 WordPress 中添加 jQuery 腳本。 但首先，在嘗試修改其核心文件之前，您應該做一些事情來保護您的網站。

最重要的是，始終建議您為您的站點創建一個備份。 這是因為即使是對關鍵網站文件最輕微的編碼錯誤也會造成嚴重危害。 當您進行備份時，您可以在緊急情況下輕鬆地將您的網站恢復到以前的狀態。

如果您不確定如何備份您的 WordPress 網站，或者您只是在尋找一種工具來簡化流程，那麼 Jetpack VaultPress Backup 是一個很好的選擇。

Jetpack VaultPress Backup 會自動保存您站點上的每個更改。 然後您可以使用一鍵恢復來快速恢復您的內容。 Jetpack 甚至允許您從 Jetpack 移動應用程序恢復您的網站。 此外，如果您遇到任何問題，您可以從一流的客戶支持——幸福工程師那裡獲得幫助！

為了進一步保護您的網站，還值得創建一個 WordPress 暫存站點。 然後，您可以在將更改上線之前測試您的更改。

如何將自定義 jQuery 腳本添加到 WordPress

既然您對 jQuery 有了更多的了解並準備好您的網站進行重大更改，讓我們討論兩種將自定義 jQuery 腳本添加到 WordPress 的方法！

方法一：手動添加jQuery

首先，我們將向您展示如何手動將 jQuery 添加到 WordPress。 如果您有一些開發經驗並希望完全控制該過程，則此方法可能適合您。

值得使用子主題，這樣您所做的任何更改都不會在您更新主題時被覆蓋。

第 1 步：進入兼容模式

jQuery 的一大優點是它允許您在編碼時使用一些熟悉的快捷方式。 最值得注意的是，您可以使用 $ 符號來表示 jQuery。 這可以為您節省很多時間，但其他一些庫使用此快捷方式來表示不同的東西。

因此，您需要進入兼容模式並為 jQuery 創建一個唯一的別名。 這樣，您將避免與其他庫發生衝突。

您可以使用以下代碼執行此操作：

 <!-- Putting jQuery into no-conflict mode. --> http://prototype.js http://jquery.js <script> var $j = jQuery.noConflict(); // $j is now an alias to the jQuery function; creating the new alias is optional. $j(document).ready(function() {    $j( "div" ).hide(); }); // The $ variable now has the prototype meaning, which is a shortcut for // document.getElementById(). mainDiv below is a DOM element, not a jQuery object. window.onload = function() {    var mainDiv = $( "main" ); } </script>

當您執行上述腳本時，您將能夠使用 $j 作為快捷方式而不是 $。 或者，您可以使用以下內容：

 <!-- Loading jQuery before other libraries. --> http://jquery.js http://prototype.js <script> // Use full jQuery function name to reference jQuery. jQuery( document ).ready(function() {    jQuery( "div" ).hide(); }); // Use the $ variable as defined in prototype.js window.onload = function() {    var mainDiv = $( "main" ); }; </script>

此代碼片段將簡單地防止任何衝突。 不過，您仍需要使用全名 jQuery，而不是快捷方式。

第二步：製作腳本文件

既然您已經有了所需的代碼，就可以製作腳本文件了。 創建一個文件並為其指定一個描述性名稱，例如“my_new_script_file.js”。 確保使用.js擴展名並在頂部添加您首選的兼容性代碼片段。

此時，您需要訪問和編輯您的主題文件，這些文件在您的網站文件中有其獨特的文件夾。

首先使用文件管理器或免費文件傳輸協議 (FTP) 客戶端（如 FileZilla）連接到您的網站。

然後，打開你的根目錄。 這應該被命名為類似public_html或簡單的public 。 或者，它可能只是您網站的名稱。

接下來，找到您的活動主題文件夾並創建一個新的子文件夾。 稱之為/js/ 。  

最後，將新的腳本文件添加到該子文件夾中。 其內容會因您嘗試實現的功能而異。

第 3 步：將 jQuery 腳本添加到您的functions.php文件

接下來，您需要找到主題的functions.php文件。 父主題和子主題都應該有一個。 這是所有手動自定義發生的地方。

由於 JavaScript 需要排隊，因此您需要使用 wp_enqueue_script() 函數。 您的代碼可能如下所示：

 function my_theme_scripts() {    wp_enqueue_script( 'my_new_script_file', get_template_directory_uri() . '/js/my_new_script_file.js', array( 'jquery' ), '1.0.0', true ); } add_action( 'wp_enqueue_scripts', 'my_theme_scripts' );

確保替換您唯一的腳本文件的名稱並將其添加到functions.php中。 這將告訴您的主題文件使用您在上一步中創建的腳本文件。

方法 2：使用 WordPress 插件添加 jQuery

正如我們剛剛看到的，手動添加 jQuery 可能既耗時又有點冒險，尤其是當您不熟悉在 WordPress 中編輯代碼時。 所以，現在我們將向您展示如何使用 WordPress 插件添加 jQuery。

第 1 步：安裝 jQuery 插件

首先，您需要選擇一個 jQuery 插件。 兩個最受歡迎的選項是簡單自定義 CSS 和 JS 以及高級自定義字段。

對於本教程，我們將使用高級自定義字段。 此工具可幫助您使用自定義塊類型創建引人入勝的交互式功能。

免費版有很多有用的塊類型，可用於添加按鈕組、Google 地圖、顏色選擇器、oEmbed 等元素。 但是，如果您想要所有 30 個自定義塊，則需要升級到高級自定義字段的付費版本。

一旦您選擇了您的首選計劃，只需像往常一樣安裝並激活插件。 在您的插件設置下添加任何許可證密鑰。

第 2 步：創建新的自定義字段

安裝並激活插件後，轉到Custom Fields → Add New 。

在這裡，您需要創建您的第一個字段組。 在Add New Field Group旁邊為其命名。 然後，單擊保存更改。

現在，您可以開始編輯新字段。 您可以通過單擊標籤下方的編輯來展開選項。

首先，打開字段類型的下拉菜單，然後選擇一個。

然後，填寫Field Label ， Field Name等。如果繼續向下滾動，您可以修改其他設置，如Location Rules和Presentation 。

根據您選擇的位置，您將能夠在那裡查看新的自定義塊。 在塊編輯器中，您可以通過在字段標籤下指定的標籤來識別塊。

完成後，單擊保存更改。 您可以選擇+ 添加字段按鈕並重複此過程。 之後，只需轉到您為字段選擇的位置之一併開始自定義它！

如何在 WordPress 中延遲 jQuery

正如我們所討論的，有很多理由在 WordPress 中使用 JavaScript 和 jQuery。 事實上，它們對於許多用戶認為理所當然的某些交互功能至關重要。

但缺點是這些複雜的客戶端元素可能會降低您的網站速度。 因此，您可能希望在加載 WordPress 網站時自動延遲 JavaScript（以及擴展的 jQuery）。

通過延遲 JavaScript，您網站上的所有主要元素都將在不太重要的 JavaScript 功能之前加載。 當然，您的站點訪問者可能不會注意到這種情況，但它可能會改善他們的用戶體驗 (UX)，因為頁面加載速度似乎更快。

如果你想在你的網站上自動延遲 jQuery，你可以使用 Jetpack Boost 來實現。

該插件可以顯著提高您網站的整體性能。 因此，您將能夠在不影響頁面速度的情況下保持所有您喜歡的 JavaScript 功能。

除了推遲非必要的 JavaScript 之外，Jetpack Boost 還可以優化 CSS 加載並應用延遲圖像加載（以及其他性能優化）。 使用此工具，您可以提高您的 Core Web Vitals 分數並提高您的網站在搜索結果中的可見度。

關於 WordPress 中 jQuery 的常見問題

希望我們已經澄清了您對 WordPress 中的 jQuery 的大部分疑慮。 不過，如果我們遺漏了什麼，這裡有一些常見問題解答！

您可以更改 WordPress 中使用的 jQuery 版本嗎？

有時主題和插件可以替換 jQuery 版本或將其添加到您的站點。 因此，確保您的版本始終是最新的非常重要。 您可以使用 jQuery Updater 或 Version Control for jQuery 等插件輕鬆完成此操作。

在哪裡可以查看我的 WordPress 網站上的 jQuery 版本？

您通常可以在瀏覽器中檢查您的 jQuery 版本。 在谷歌瀏覽器中，只需在前端導航到您的網站。 然後，轉到查看→ 開發人員 → JavaScript 控制台。

輸入 jQuery.fn.jquery，控制台應返回站點的當前版本。

你能從 WordPress 中完全刪除 jQuery 嗎？

簡短的回答是：是的。 如果您發現在您的網站上使用 JavaScript 會對其性能產生負面影響，您可能想要刪除或“註銷”jQuery。

為此，只需將以下代碼添加到您的functions.php文件中：

 // Remove jQuery function vpsb_remove_jquery() {    if (!is_admin()) {        wp_deregister_script('jquery');        wp_register_script('jquery', false);    } } add_action('init', 'vpsb_remove_jquery');

請記住，如果 jQuery 大大降低了您的頁面速度，您應該只從您的站點中完全刪除它。 不過，這可能不會發生，因為 jQuery 已經優化了較重的 JavaScript 代碼。

如果您的站點在添加 jQuery 後速度下降，更好的選擇是使用 Jetpack Boost 之類的解決方案。 它可以推遲非必要的 JavaScript。

你能用 vanilla JavaScript 替換 jQuery 嗎？

可以用 vanilla JavaScript 替換 jQuery。 但是，如果您沒有太多的開發經驗，這可能會證明具有挑戰性。 因此，如果您需要這樣做，您應該考慮聘請開發人員。

再一次，值得注意的是，用 vanilla JavaScript 替換 jQuery 可能是不必要的，因為 jQuery 已經提供了最佳的 JavaScript 代碼。 大多數時候，jQuery 的次要性能影響通常是值得的，延遲通常是更好的選擇。

如果您決定走這條路，那麼值得查看本指南以將 JavaScript 添加到 WordPress。 它可以幫助您完成該過程。

在 WordPress 中使用 jQuery

使用複雜的 JavaScript 來吸引您網站上的功能可以極大地改善用戶體驗並推進您的目標。 遺憾的是，您可能沒有時間或開發技能從頭開始創建這些交互元素。 好消息是您可以使用 jQuery 腳本來簡化此過程。

回顧一下，您可以通過兩種方式將 jQuery 添加到 WordPress。 首先，您可以通過進入兼容模式並創建腳本文件來手動執行此操作。 然後，將新腳本添加到functions.php文件中。 或者，您可以使用 Advanced Custom Fields 之類的插件來加快流程並消除手動編碼的需要。

當您使用 jQuery 向您的網站添加複雜的設計元素時，您可以改善用戶體驗並給訪問者留下深刻印象。 但是多種交互功能可能會損害網頁的性能。 幸運的是，Jetpack Boost 可以幫助優化您網站的速度。