使用您自己的插件在您的 WordPress 網站上使用 AJAX 和 PHP
已發表: 2021-07-23
在本文中，我們討論了用於 WordPress 網站的 AJAX 和 PHP。
AJAX 是一種 Web 開發技術，可幫助用戶在網站上開發交互式應用程序。 它為用戶提供更快、更流暢的網絡體驗。 它允許用戶在不重新加載或刷新頁面的情況下更改或更新網頁中的內容。 需要了解各種編程語言才能使用 AJAX。
什麼是 AJAX？
AJAX 代表“異步 JavaScript 和 XML”。 如前所述，它用於創建具有娛樂性、不斷變化和交互性的 Web 應用程序。
在 AJAX 和相關技術的幫助下開發的 Web 應用程序的一些流行示例包括 Google 地圖、Google 搜索的自動完成功能、各種社交媒體帖子上的評論和點贊等等。
AJAX 基礎知識
Ajax 在各種編程語言（如 JavaScript、HTML、CSS 和 XML）的幫助下開發更快和改進的 Web 應用程序和網站。 除了這些編程語言，對於 Web 應用程序的開發，AJAX 與 PHP 和其他服務器端語言也被使用。
它使用 JavaScript 來顯示內容，而 CSS 有助於呈現和文檔對像模型。 它進一步將 XHTML 用於內容。
在傳統的 Web 應用程序或網頁中，信息是與服務器同步交換的。 另一方面，在設計為使用 AJAX 的 Web 應用程序中，當發生諸如單擊按鈕或填寫表單之類的事件時，JavaScript 會創建 XMLHTTP 請求並將其以 XML 格式發送到服務器。
服務器處理請求創建響應服務器端並將其發送回瀏覽器。 JavaScript 然後處理響應並更新當前顯示屏幕上的內容。 由於不需要重新加載或刷新頁面，用戶不會意識到將任何信息傳輸到服務器。
在 WordPress 中使用 AJAX 所需的技能
從上面的討論可以理解，用戶需要以下技能才能正確使用 AJAX。
• 熟悉JavaScript、HTML 和CSS 等編程語言
• 精通服務器端語言，如 PHP 等
• XML 或 JSON 的基礎知識
AJAX 的優點
下面討論 AJAX 的各種優點
• 幾乎支持當前使用的所有瀏覽器
• 它涉及更快的響應時間，這意味著在速度和性能方面改善了用戶體驗
• 可以使用Prototype、jQuery 等開源JavaScript 庫
• 它減少了客戶端和服務器之間的時間，因此節省了用戶和服務器的時間
• 由於服務器不需要處理大量數據，它有助於減少帶寬的使用並優化網絡運行。
• 由於XMLHTTP 請求用於檢索數據，用戶可以同時執行多個任務。
WordPress 中的 AJAX
AJAX 用於 WordPress 的後端，因此，無論何時對帖子或類別進行任何更改，或者每當管理員正在審核評論時，都會立即進行更新。 AJAX 主要與 WordPress 上的 JQuery 一起使用。 WordPress使用AJAX的流程如下
• 發出請求時，它會通過位於“wp-admin”文件夾中的“admin-ajax.php”文件。
• 這些請求需要通過使用“get”或“post”方法提供至少一條數據，通常也稱為“action”。
• 此操作提示'admin-ajax.php' 文件中的代碼創建兩個掛鉤，即'wp_ajax_my_action' 和'wp_ajax_nopriv_my_action'。 這些鉤子中的“my_action”表示“get”或“post”方法的變量“action”的值。
• 第一個鉤子用於登錄用戶執行的操作，而第二個鉤子專門用於已註銷用戶。
• 應為優雅降級規劃掛鉤函數，以確保即使在瀏覽器上禁用 JavaScript，代碼仍然可以工作。
創建一個 WordPress AJAX 插件
在本節中，讓我們以一個名為“Post Likes Counter”的基本 WordPress AJAX 插件為例。 該插件包括以下功能：
• 在前端即時更新
• 已登錄的用戶可以點贊帖子。
• 如果已註銷的用戶嘗試點贊帖子，屏幕上會出現錯誤消息
• 這個插件有助於維護“喜歡”數量的總記錄並顯示它們
首先，需要創建並激活一個空的 WordPress 插件。 要創建插件，需要執行以下步驟。
第 1 步：為插件選擇一個唯一的名稱。 可以檢查插件存儲庫以確保插件的建議名稱已未被使用。 通常，插件開發人員會根據插件應該執行的功能來選擇插件的名稱。
第 2 步：在下一步中，需要使用選定的插件名稱創建 PHP 文件。 作為將安裝此插件的用戶，需要將 PHP 文件放在 WordPress 插件目錄“wp-content/plugins-”進行安裝，插件不能與 PHP 文件共享相同的名稱。
因此，插件文件名也應該是唯一的，以避免與存儲庫中的另一個插件衝突。 可以在前綴中使用他們的姓名或公司名稱來為 PHP 文件創建一個唯一的名稱。
第 3 步：需要注意的是，WordPress 插件應包含至少一個 PHP 文件以及 JavaScript、CSS、語言和圖像文件。 如果存在多個文件，請為目錄選擇一個唯一名稱，為主 PHP 文件選擇一個首選名稱。
將所有插件文件放入創建的目錄中，並請求插件用戶將整個目錄上傳到“wp-content/plugins/”目錄。
可以將 WordPress 安裝配置為更改標準插件目錄“wp-content/plugins/”。 因此，必須在 PHP 代碼中使用 plugin_dir_path() 和 plugin_url() 或絕對路徑和 URL。
主題的帖子模板
創建插件後，需要找到他們主題的“single.php”帖子模板。 它可以在活動主題的根目錄中找到。 查詢單個帖子時使用； 想要放置他們的“Post Like Counter”插件的地方。 該文件應保持打開狀態以進行編輯。
為 AJAX 調用準備帖子模板
需要創建一個鏈接，以便用戶可以喜歡帖子。 如果用戶啟用了 JavaScript，他們可以使用 JavaScript 文件（稍後將創建），否則，他們可以直接點擊鏈接。 為此，在“single.php”文件中插入以下代碼。 此代碼也可以添加到“single.php”文件包含的任何模板部分。
// 'likes' 元鍵值將存儲特定帖子的總喜歡計數，如果它是空字符串，它將顯示 0 ID，“喜歡”，真）； $likes = ($likes == "") ？ 0 : $喜歡; ?> 此帖子有 <span id='like_counter'></span> 個贊<br> // 鏈接到 admin-ajax.php 文件。 包括隨機數檢查以增加安全性。 請注意啟用 JS 的客戶端的“user_like”類。 ID.'&nonce='.$nonce); echo '<a class="user_like" data-nonce="' . $nonce . '">ID . '" href="' 。 $鏈接。 '">喜歡這篇文章</a>'; ?>
在沒有 JavaScript 的情況下解決 Ajax 調用
通過單擊上一步創建的鏈接，將轉發到“admin-ajax.php”腳本； 但是，他們不會找到任何有用的結果，因為該函數不是為了運行該操作而創建的。 要在插件文件中創建函數並將其添加到 WordPress 創建的掛鉤中，請插入以下代碼。
<?php // 此處僅用於啟用語法高亮。 如果它已經包含在您的插件文件中，請忽略它。
// 為創建的兩個鉤子定義操作，第一個用於登錄用戶，下一個用於註銷用戶
add_action（“wp_ajax_my_user_like”，“my_user_like”）；
add_action（“wp_ajax_nopriv_my_user_like”，“please_login”）；
// 定義為登錄用戶觸發的函數
功能 my_user_like() {
// nonce 檢查額外的安全層，如果失敗，函數將退出
如果（！wp_verify_nonce（$_REQUEST['nonce']，“my_user_like_nonce”））{
退出（“汪汪汪汪”）；
}
// 獲取一個帖子的like_count，如果它為空則設置為0，當點擊被註冊時增加1
$like_count = get_post_meta($_REQUEST["post_id"], "likes", true);
$like_count = ($like_count == ') ？ 0 : $like_count;
$new_like_count = $like_count + 1;
// 更新 'likes' 的值指定帖子的元鍵，如果不存在則為帖子創建新的元數據
$like = update_post_meta($_REQUEST["post_id"], "likes", $new_like_count);
// 如果上述操作失敗，結果類型設置為 'error' 並且 like_count 設置為舊值，如果成功，則更新為 new_like_count
如果（$like === 假）{
$result['type'] = "錯誤";
$result['like_count'] = $like_count;
}
別的 {
$result['type'] = "成功";
$result['like_count'] = $new_like_count;
}
// 檢查是否通過 Ajax 調用觸發了操作。 如果是，將觸發JS代碼，否則將用戶重定向到帖子頁面
if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
$result = json_encode($result);
回顯$結果；
}
別的 {
header("位置：".$_SERVER["HTTP_REFERER"]);
}
// 不要忘記用 die() 函數結束你的腳本——非常重要
死（）;
}
// 定義為註銷用戶觸發的函數
功能請登錄（）{
echo "必須登錄才能點贊";
死（）;
}
如果一切正常，當登錄用戶點擊“喜歡這篇文章”鏈接時，喜歡的數量將自動更新。 另一方面，如果 JavaScript 被禁用，頁面將被刷新，顯示更新後的“喜歡”計數。
添加對 JavaScript 的支持
添加對 JavaScript 的支持可以使事情變得更容易。 為了在 WordPress 上使用 AJAX 和 PHP，需要將 jQuery 庫與插件的自定義 JavaScript 文件一起排隊。 為此，請在插件中編寫以下代碼。
admin_url('admin-ajax.php')));
// 將 jQuery 庫和您在上面註冊的腳本加入隊列
wp_enqueue_script('jquery');
wp_enqueue_script('liker_script');
}
接下來，需要創建 Javascript 文件“liker_script.js”，該文件將進一步上傳到插件的根文件夾中。 以下代碼用於創建“liker_script.js”文件。
jQuery（文檔）.ready（函數（）{
jQuery(".user_like").click( 函數(e) {
e.preventDefault();
post_id = jQuery(this).attr("data-post_id");
nonce = jQuery(this).attr("data-nonce");
jQuery.ajax({
類型：“帖子”，
數據類型：“json”，
網址：myAjax.ajaxurl，
數據：{action：“my_user_like”，post_id：post_id，nonce：nonce}，
成功：功能（響應）{
if(response.type == "成功") {
jQuery("#like_counter").html(response.like_count);
}
別的 {
alert("你的讚無法添加");
}
}
});
});
});
如何在 WordPress 主題中實現 AJAX
以下步驟將有助於在 WordPress 主題中使用 PHP 實現 AJAX。 例如，假設我們的工作是在下拉菜單中顯示類別，然後單擊“父類別”，子類別將出現在另一個下拉框中。 此任務將在以下步驟的幫助下完成
第 1 步：選擇儀表板左側的“類別”，在右側出現的框中插入類別名稱，並在下方插入類別段。 如果正在創建父類別，請選擇“無”，或者如果正在創建子類別，請從選項中選擇父類別。
第 2 步：在此步驟中，將創建一個 WordPress 模板，其中將實現 AJAX 功能。 打開一個新的 PHP 文件並保存。 在創建的頁面中插入以下代碼。
在上面的代碼中，“模板名稱：實現 Ajax”是 WordPress 模板的名稱，“get_header()”和“get_footer()”函數用於顯示頁面的頁眉和頁腳內容。
首先，頁面中需要包含 jQuery 庫文件，這將有助於添加 AJAX 內容。 使用 PHP 的 AJAX 可以使用任何 JavaScript 庫，也可以使用原始 JavaScript 調用 AJAX。 在以下示例中，jQuery JavaScript 庫用於實現 AJAX。
第三步：在模板中添加jQuery文件並調用'wp_dropdown_categories'函數，這樣就可以檢索到下拉菜單中的父類。
#內容{寬度：自動； 高度：400px； 邊距：50 像素；}
<div>
</div>
<?php
第 4 步：插入 jQuery 代碼以獲取正在選擇的主要類別的 ID。 將其發送到“functions.php”文件以獲取所選父類別 ID 下的子類別。 然後可以將結果發送回頁面而無需刷新。
$(函數(){
$('#main_cat').change(function(){
var $mainCat=$('#main_cat').val();
//調用ajax
$("#sub_cat").empty();
$.ajax({
url:"/wp-admin/admin-ajax.php",
類型：'POST'，
數據：'action=my_special_action&main_catid=' + $mainCat,
成功：功能（結果）
{
// 警報（結果）；
$("#sub_cat").removeAttr("disabled");
$("#sub_cat").append(results);
}
});
}
);
});
在上面的代碼中，代碼是在 ID 為“#main_cat”的主要類別下拉列表的更改事件中添加的。
var $mainCat=$('#main_cat').val();
.val() 函數有助於從下拉列表中獲取選定的選項值並存儲在變量“$mainCat”中。
$("#sub_cat").empty();
如果子類別下拉列表“#sub_cat”包含任何先前的值，則需要在調用 AJAX 之前將其騰出。
以下 jQuery 行將有助於調用 AJAX jQuery 函數。 檢查下一節中給出的 AJAX 函數的參數。
url:"bloginfo('wpurl'); ?>/wp-admin/admin-ajax.php",
類型：'POST'，
為了使 AJAX 在 WordPress 中工作，使用了“URL”參數。 因此，請求將被發送到“admin-ajax.php”文件。 接下來，將調用“functions.php”文件中的鉤子以獲取發送到 URL 的發布數據：“/wp-admin/admin-ajax.php”
要將值與請求一起發送，請使用“數據”參數。 在此示例中，使用了兩個帶有 data 參數的參數——action 和 main_catid。
第 5 步：在“functions.php”文件中，以下代碼用於掛鉤操作。
add_action('wp_ajax_my_special_action', 'my_action_callback');
在上述動作中，鉤子有兩個參數。 在第一個參數“wp_ajax_my_special_action”中，“wp_ajax_”是與數據參數“action”一起發送的值。 在第二個參數“my_action_callback”中，將處理數據並將結果發送回。
上述動作掛鉤適用於登錄用戶。 對於已註銷的用戶，可以掛鉤以下操作
add_action('wp_ajax_nopriv_my_special_action', 'my_action_callback');
添加用戶和回調函數的鉤子後的最終代碼如下
功能實現_ajax（）{
if(isset($_POST['main_catid']))
{
$categories= get_categories('child_of='.$_POST['main_catid'].'&hide_empty=0');
foreach ($categories as $cat) {
$option .= 'term_id.'">';
$option .= $cat->cat_name;
$option .= ' ('.$cat->category_count.')';
$option .= '';
}
echo 'Scegli...'.$option;
死（）;
} // 萬一
}
add_action('wp_ajax_my_special_ajax_call', 'implement_ajax');
add_action('wp_ajax_nopriv_my_special_ajax_call', 'implement_ajax');//對於未登錄的用戶。
第 6 步：在此步驟中，在儀表板中創建一個新頁面並將模板分配給它。 在瀏覽器中加載頁面後，將在其中加載第一個包含父類別的下拉菜單。
由於第二個下拉列表為空，請選擇第一個下拉列表中的選項以檢查其工作原理。
因此，借助新創建的插件，可以在 WordPress 網站上使用帶有 PHP 的 AJAX。