如何在 WordPress 中使用 Ajax
已發表: 2023-02-12如果您的網站擁有積極活躍的客戶群，您可能想知道如何為他們提供真正互動和豐富的網絡體驗。 提供實時交互可以極大地吸引您的觀眾。
幸運的是，異步 JavaScript 和 XML (Ajax) 是一種向您的網站添加交互功能的可行方法。 對於 WordPress，您甚至可以使用基於 Ajax 的插件來簡化流程。
在本文中，我們將向您介紹 Ajax 及其工作原理。 我們還將引導您開始使用 WordPress 中的 Ajax。 讓我們開始吧！
什麼是 Ajax 及其工作原理？
Ajax 匯集了許多不同的編程語言，例如 HTML、CSS、JavaScript 等等。 實際上，它在幕後工作以從 Web 瀏覽器獲取請求，將它們發送到服務器，然後將結果傳輸回瀏覽器。
作為 Web 用戶，您不會知道 Ajax 正在發揮作用。 您將獲得高度互動的體驗。 例如，在您自己的站點上，您可以使用 Ajax 接受登錄用戶對帖子的點贊，並顯示實時計數。
為什麼 Ajax 有用？
使用 Ajax，用戶不必重新加載頁面即可看到某些更改。 這意味著您的網站將保持快速，並提供更流暢的用戶體驗。 由於 Ajax 是高效的，只來回發送它需要的數據，它可以最大化帶寬並避免更重的數據傳輸。
作為 Web 用戶，我們無時無刻不在享受 Ajax 帶來的好處。 一個例子是谷歌的自動完成搜索功能。
您可能熟悉的其他示例包括 Facebook 評論和 Instagram 點贊。 Ajax 很可能在您能夠與網頁交互並立即接收返回信息的任何地方發揮作用。
在 WordPress 中開始使用 Ajax
對於 WordPress，Ajax 有幾種派上用場的方法。 首先，我們將了解 Ajax URL 以及如何將其與 WordPress 函數掛鉤一起使用。
WordPress 中的 Ajax URL
由於 WordPress 在管理儀表板中默認使用 Ajax，因此添加更多 Ajax 功能並不困難。 但是，如果您想在站點的前端使用 Ajax，則需要了解 Ajax URL 的工作原理。
在 WordPress 中，您的admin-ajax.php文件有一個 URL。 這提供了發送數據進行處理所需的信息，這對前端 Ajax 開發至關重要。 WordPress 使用 wp_localize_script() 調用來使用 Ajax URL 連接 JavaScript 和 PHP 函數，因為 PHP 無法在沒有一些幫助的情況下直接鏡像這些。
如何在 WordPress 中使用 Ajax Action Hook
WordPress 在其編程中使用鉤子，作為插件和主題與 WordPress 核心交互的一種方式。 鉤子有兩種類型：“動作”和“過濾器”。 使用 Ajax，您將使用動作掛鉤來執行函數。
Actions 使您能夠向 WordPress 添加數據或更改其運行方式。 對於 Ajax，您將使用操作 wp_ajax_(action)。 然後可以將自定義函數掛接到此函數，以便在 Ajax 調用期間執行。
例如，此 WordPress 示例代碼顯示瞭如何將 Ajax 調用和 JavaScript 對象組合在同一個文件中以執行操作：
<?php
add_action( 'wp_ajax_my_action', 'my_action' );
函數 my_action() {
全球$wpdb； // 這是你訪問數據庫的方式
$whatever = intval( $_POST['whatever'] );
$隨便+=10；
迴聲 $隨便;
wp_die(); // 這需要立即終止並返回正確的響應
}
您還可以為 Ajax 操作創建單獨的 JavaScript 文件。 您只需要確保使用 Ajax URL，這樣調用就不會丟失。
如何通過使用示例插件來使用 Ajax（3 個步驟）
如果您想試驗 Ajax，最好的方法是用它構建一個插件。 幸運的是，有許多示例代碼或基本插件可供您開始使用。 對於此示例，我們將使用一些可下載的 WordPress 插件樣板示例代碼。
第 1 步：創建適當的文件結構
首先，您需要為插件命名並為其創建適當的文件結構。 該名稱必須是唯一的，並且不能與 WordPress 插件目錄中的任何其他工具衝突。 那是因為當用戶上傳你的插件時，它會進入他們的wp-content/plugins/目錄。
確定名稱後，您需要在自己的wp-content/plugins/目錄中至少創建以下三個文件：
- 插件名稱.php
- 插件名稱.js
- 插件名稱.css
您需要將.php文件放在新插件的文件夾中，並為 JavaScript 和 CSS 文件創建單獨的子文件夾。插件運行所需的所有文件都需要位於同一個主文件夾中。
在下一步中，您將看到我們使用的示例代碼帶有預先創建的文件結構。 然而，我們認為了解如何從頭開始很重要，以及為什麼您的文件需要以某種方式構建。
第 2 步：選擇一些示例代碼作為開始
在您的第一個插件上試用 Ajax 時，使用示例代碼文件是一個很好的起點。 但是，您總是希望仔細檢查您的示例代碼，以確保它是安全的並且不包含錯誤。
正如我們之前提到的，我們將在示例中使用 WordPress 插件樣板。 此示例代碼與完成插件所需的文件打包在一起。
此示例插件還符合 WordPress 的編碼和文檔標準。 您可以從樣板網站下載插件的.zip文件以開始使用。
第 3 步：將操作掛鉤到您的代碼中
我們使用的插件示例代碼是使用面向對象編程 (OOP) 構建的。 這有助於程序員組織他們的代碼，並創建易於共享和重用的開發模式。
此外，該代碼還打包了插件開發所需的所有文件，包括/includes/目錄中的激活和停用文件。 您還會發現根據需要可以輕鬆找到面向公眾和麵向管理員的文件。
讓我們通過查看plugin-name.php文件的開頭來了解我們的示例插件：
<?php
/**
* 插件引導文件
*
* 該文件由WordPress讀取生成插件中的插件信息
* 管理區。 該文件還包括插件使用的所有依賴項，
* 註冊激活和去激活函數，並定義一個函數
* 註冊激活和去激活函數，並定義一個函數
* 啟動插件。
*
* @link http://example.com
* @自 1.0.0 以來
* @package 插件名稱
*
* @wordpress-插件
* 插件名稱：WordPress 插件樣板
* 插件 URI: http://example.com/plugin-name-uri/
* 描述：這是對插件功能的簡短描述。 它顯示在 WordPress 管理區域中。
*版本：1.0.0
* 作者：您的姓名或您的公司
* 作者 URI：http://example.com/
* 許可證：GPL-2.0+
* 許可證 URI：http://www.gnu.org/licenses/gpl-2.0.txt
* 文本域：插件名稱
* 域名路徑：/languages
*/
這部分代碼中包含的所有信息對於在 WordPress 中註冊您的插件都很重要。 這就是插件目錄將如何知道要為您的插件顯示什麼。
現在你需要做一些事情來連接所有的點，包括：
- 確保您的 Ajax URL 可用於您的腳本。 您可以使用 wp_localize_script() 來完成它。
- 在您的plugin-name.php文件中使用 class Plugin-Name{} 創建一個 plugin-name 類。 這是您定義動作掛鉤的地方。
- 在plugin-name.js文件中創建相應的 JavaScript 函數。
Ajax 方法的一個重要元素是定義誰可以使用每個功能，尤其是在創建前端交互性時。 我們將使用 WordPress 中的一些示例代碼掛接前端操作：
如果（is_admin（））{
add_action( 'wp_ajax_my_frontend_action', 'my_frontend_action' );
add_action( 'wp_ajax_nopriv_my_frontend_action', 'my_frontend_action' );
add_action( 'wp_ajax_my_backend_action', 'my_backend_action' );
// 在此處添加其他後端操作掛鉤
} 別的 {
// 在此處添加非 Ajax 前端操作掛鉤
}
讓我們注意這個例子中的一些事情。 首先，網站上的任何人都可以使用這些操作，無論他們是否登錄帳戶。 這由“wp_ajax_nonpriv_()”調用指示。 其次，您可以看到在前端操作期間還掛鉤了後端管理操作。
要了解在這組動作中發生的過程，了解 my_frontend_action 將觸發 PHP 函數 my_frontend_action_callback() 也很重要。
第 4 步：測試和調試您的插件
一旦你設置了你需要的所有動作掛鉤和相應的功能，你就會想要測試並可能調試你的插件（如果有任何問題）。 您的虛擬主機可能會提供調試工具作為其託管包的一部分。
在 WP Engine，我們提供 WP Engine 錯誤日誌來幫助您找到問題點。
我們的錯誤日誌提供了您網站代碼中任何錯誤的顏色編碼演練，以及它們與我們的服務器或您網站的其他部分交互的位置。 這使得故障排除變得更加容易，無論您是使用 Ajax 還是完全使用其他東西。
探索其他 WP Engine 資源和工具
現在您已經開始使用 Ajax 創建令人驚嘆的 WordPress 插件，您可能想要評估您還需要哪些其他工具。 WP Engine 提供完整的數字體驗平台 (DXP)，可幫助您為 WordPress 創建新插件。
無論您是對我們的 WP Engine 錯誤日誌感興趣以便執行無錯誤的插件，還是只需要可靠且安全的 WordPress 託管，我們都會提供各種計劃和資源供您使用！