WordPress 開發人員使用 JavaScript 和庫在網頁上創建交互元素並簡化編碼過程。最受歡迎的選項之一是 jQuery。
在 WordPress 中使用 jQuery 的特別之處在於廣泛的插件生態系統。開發人員無需從頭開始編寫 jQuery 腳本，而是可以通過使用可重複使用的代碼片段來自定義 WordPress 插件和主題來節省時間。
如果您想使用 jQuery 創建引人入勝的網站，本文將指導您完成整個過程。我們還將討論什麼是 jQuery、它的主要優點以及如何將 jQuery 添加到 WordPress。
什麼是 jQuery？
jQuery 是一個 JavaScript 庫，用於創建動態前端組件，例如旋轉滑塊。其輕量級代碼使 Web 開發人員能夠更有效地操作 HTML 元素和驗證數據。
為什麼使用 jQuery
除了它的插件生態系統，在 WordPress 中使用 jQuery 庫的其他原因是：
- 初學者友好。由於它使用簡單而簡短的文本格式，因此 jQuery 代碼易於閱讀和編寫。
- 緊湊性。jQuery 文件通常比純 JavaScript 小，讓您可以用更少的字元執行相同的任務。
- 跨瀏覽器兼容性。支持 jQuery 的流行瀏覽器包括 Google Chrome、 Microsoft Edge、 Mozilla Firefox、 Safari和 Opera。
- AJAX 支持。開發人員可以實施 AJAX 來構建響應迅速且用戶友好的網站。
- 降低帶寬使用率。jQuery 可以直接在用戶的瀏覽器上執行動畫效果，從而降低帶寬使用率。
如何在 WordPress 中使用 jQuery
有兩種方法可以將 jQuery 腳本添加到 WordPress 站點——手動或使用 WordPress 插件。
讓我們從手動方法開始。
手動添加 jQuery
如果您有 JavaScript 和 WordPress 開發經驗，請按照以下步驟操作：
1.切換到兼容模式
在開始將自己的 jQuery 腳本添加到 WordPress 之前，了解 jQuery 的兼容模式至關重要。
默認情況下，jQuery 使用 $ 符號作為快捷方式：
$（文檔）.ready（函數（）{$（「按鈕」）.click（函數（）{
但是，您網站上的其他 JavaScript 庫也在其語法中實現了美元符號。為避免衝突，請將$ 符號 替換為jQuery以進入兼容模式 。
看看下面的代碼：
jQuery（文檔）.ready（函數（）{jQuery（「按鈕」）.click（函數（）{
這種模式的唯一問題是，編寫 jQuery 而不是快捷方式意味著包含更多字元，從而導致腳本臃腫。
要解決此問題，請選擇一個新變數名來替換美元符號。最常見的是 $j。
只需將此代碼添加到 jQuery 腳本的頂部：
var $j = jQuery.noConflict()
2.製作腳本文件
之後，創建一個擴展名為 .js 的自定義腳本文件。Hostinger 用戶可以按照以下步驟操作：
重要的！ 對於初學者，我們建議先創建一個 WordPress 子主題。這樣，您可以在不更改父主題目錄的情況下自定義樣式、布局參數和腳本。
- 訪問 hPanel → 託管 → 管理。
- 在左側菜單中，選擇 文件 → 文件管理器。
- 輸入 public_html → wp-content。
- 打開 主題 文件夾 並選擇一個已安裝的主題。
- 在左側菜單中，單擊 新建文件夾 並將文件夾命名為 js。
- 單擊 新建文件 創建一個新的 .js 文件——例如： new_script.js。
- 將 jQuery 腳本添加到文件中。
- 重複相同的步驟來自定義 WordPress 插件。
專家提示
如果您不確定如何編寫腳本，請參閱我們的指南什麼是 jQuery？A Beginner’s Introduction to the jQuery Library 解釋了它的主要特性。
3. 將代碼添加到 functions.php 文件中
在將內聯腳本添加到 WordPress 之前，請 在主題文件夾中找到 functions.php文件。
打開文件並在頂部添加以下 jQuery 函數：
function add_my_scripts() { wp_enqueue_script( ‘new-script’, get_template_directory_uri() . ‘/js/new_script.js’, array( ‘jquery’ ), ‘1.0.0’, true );}add_action( ‘wp_enqueue_scripts’, ‘添加我的腳本’）
確保 用實際文件名替換new-script 和 new_script.js 。
通過在 PHP 代碼中插入 wp_enqueue_script 函數，用戶可以添加自定義腳本並通知 WordPress 它依賴於 jQuery。
它還可以幫助 WordPress 找到腳本文件並根據您的 jQuery 腳本自定義主題。
通過 WordPress 插件添加 jQuery
如果手動向 WordPress 添加腳本對您來說技術性太強，我們建議使用 WordPress jQuery 插件。
就是這樣：
1. 選擇一個插件
WordPress 提供了各種插件來使用 jQuery 創建互動式網站。以下是我們針對不同用例的首選：
- jQuery 更新程序。雖然 jQuery 預裝在 WordPress 中，但該平台通常使用過時的版本。jQuery Updater 確保您的站點自動安裝此 JavaScript 庫的最新版本。
- 高級自定義欄位。此工具適用於向帖子和頁面添加自定義欄位。它的一些基於 jQuery 的欄位包括 Color Picker、Google Map、Date Picker 和 Time Picker。
- Contact Form 7 的 jQuery 驗證。當用戶在 Contact Form 7 上輸入無效數據時，此插件允許您顯示錯誤消息。您可以為 URL、日期、信用卡和電話號碼創建驗證規則。
- jQuery 後拆分器。該插件與大多數 WordPress 主題兼容，可讓您將帖子和頁面拆分為滑塊。
雖然安裝這些插件可以簡化網站設計過程，但您仍然需要具備 JavaScript 和 jQuery 庫的基本知識才能使用它們。
結論
了解如何在 WordPress 中使用 jQuery 對於任何網站所有者和開發人員來說都是至關重要的。
jQuery 提供了一個輕量級的解決方案來創建交互元素、編輯頁面和自定義 WordPress 網站的整體外觀。
要手動添加 jQuery 腳本，請切換到其兼容模式，創建一個腳本文件，然後 在您的主題文件夾中自定義functions.php文件。
對於初學者， 高級自定義欄位等 WordPress jQuery 插件 將有助於完成此過程。
我們希望本文能幫助您開發一個更加獨特和引人入勝的網站。祝你好運。