使用 AJAX 使您的 WordPress 插件具有響應性
已發表: 2020-06-02
最後更新 - 2021 年 7 月 8 日
AJAX 是最新的開發方法，並且由於它為開發人員提供的易用性而逐漸獲得動力。 通過簡單地將 AJAX 集成到您的 WordPress 插件中，您基本上減少了不斷重新加載整個網頁的需要。 換句話說，AJAX 將使您的 WordPress 插件具有響應性，並使用戶能夠通過僅重新加載特定部分來獲取新信息，同時保持頁面的其餘部分保持靜態。
這不僅使網頁或插件具有響應性，而且還將等待時間減少了一半。 有幾個插件和應用程序使用 Ajax 為用戶創造更好的體驗。 例如，WooCommerce 使用 Ajax 功能來改進添加到購物車的行為。
考慮到它的好處，我們將教您如何通過 AJAX 使您的 WordPress 插件響應。
創建插件
在你可以使用 AJAX 發揮你的魔力之前，你需要有一個基本的插件基礎，你可以使用它來創建一個高級和響應式的產品。
創建插件並不困難，因為您只需要創建一個包含單行內容的文件。 為此，第一步是導航到 wp-content/plugins 文件並使用您選擇的名稱創建一個全新的文件夾。 打開文件夾並創建一個新文件名_of_the_plugin.php。 現在，在任何文本編輯器中查看該文件並寫入以下信息：
<?php
/*
插件名稱：Coolness Inducer
插件 URI：http://coolness-inducer.com
說明：>-
一個完美的插件，讓您的網站更加酷炫。
版本：1.3
作者：維德女士
作者 URI：http://msvader.com
許可證：GPL2
*/
?>
在此之前，請在您的 WordPress 插件安裝中創建一個 ajaxloadpost 目錄。 完成此操作後，創建插件並激活它。 在此之後，在您的 ajaxloadpost 中包含以下信息。
定義（'AJAXLOADPOSTURL', WP_PLUGIN_URL.”/”.dirname( plugin_basename( __FILE__ ) ) );
函數 ajaxloadpost_enqueuescripts() {
wp_enqueue_script('ajaxloadpost', AJAXLOADPOSTURL.'/js/ajaxloadpost.js', array('jquery'));
wp_localize_script('ajaxloadpost', 'ajaxloadpostajax', array('ajaxurl' => admin_url('admin-ajax.php')));
}
add_action('wp_enqueue_scripts', ajaxloadpost_enqueuescripts);
然後，定義 AJAXLOADPOSTURL 變量，因為您需要它來將 WordPress 定向到插件的 URL。 現在您必須將腳本加入隊列，您可以通過將 ajaxloadpost_enqueuescripts 添加到 WordPress 的 wp_enqueue_scripts 來完成。
請記住，AJAX 永遠不能以其原始形式使用。 它將始終與其他編程語言（即 jQuery 或 JavaScript）結合使用。 在這種情況下，我們將使用 JavaScript，因此您需要對它有一些基本的了解。
繼續，將 JavaScript 添加到您將在 \wp-content\plugins\ajaxloadpost\js\folder 中找到的 ajaxloadpost.js。 按照此操作創建一個 JS 文件夾並將 ajaxloadpost.js 放入其中。
現在，使用 WordPress wp_localize_script 添加所需的 JS 變量。 此操作將為您的目錄提供一個結構並將您的腳本排入隊列。
編寫 AJAX 處理程序
要編寫 AJAX 處理程序，您將需要以下代碼：
函數 ajaxloadpost_ajaxhandler() {
如果（！wp_verify_nonce（$_POST['nonce']，“ajaxloadpost_nonce”））{
exit(“錯誤的隨機數”);
}
$結果 = ”;
$content_post = get_post($_POST['postid']);
$results = $content_post->post_content;
死（$結果）；
}
add_action('wp_ajax_nopriv_ajaxloadpost_ajaxhandler', 'ajaxloadpost_ajaxhandler');
add_action('wp_ajax_ajaxloadpost_ajaxhandler', 'ajaxloadpost_ajaxhandler');
完成此操作將導致兩個結果。 首先，它將創建用戶需要的帖子的 ID，其次是創建隨機數。 但這不是重點！ 一旦 AJAX 處理程序的代碼就位，您需要進行下一步，即在 WordPress 目錄中註冊 AJAX 處理程序。 這樣做將使 WordPress 插件響應 AJAX 調用。 您可以通過以下代碼實現此目的：
add_action('wp_ajax_nopriv_ajaxloadpost_ajaxhandler', 'ajaxloadpost_ajaxhandler');
add_action('wp_ajax_ajaxloadpost_ajaxhandler', 'ajaxloadpost_ajaxhandler');
JavaScript 基礎和 AJAX
有了 AJAX 調用和 AJAX 處理程序，您需要創建一個 JS 函數來連接這兩個點。 下面的 JavaScript 將幫助您實現此操作，您將把它放入您的 ajaxloadpost.js 中：
函數 ajaxloadpost_loadpost(postid,nonce) {
jQuery.ajax({
類型：'POST'，
網址：ajaxloadpostajax.ajaxurl，
數據： {
行動：'ajaxloadpost_ajaxhandler'，
郵遞：郵遞，
隨機數：隨機數
},
成功：函數（數據，文本狀態，XMLHttpRequest）{
var loadpostresult = '#loadpostresult';
jQuery(loadpostresult).html(”);
jQuery(loadpostresult).append(data);
},
錯誤：函數（MLHttpRequest，textStatus，errorThrown）{
警報（錯誤拋出）；
}
});
}
就像上面提到的步驟一樣，這個動作也會產生兩個結果，即nonce和post ID。
下一步還需要精通 jQuery。 所以，如果你的技能有點粗俗，你會發現這篇文章很有幫助！
繼續，使用 jQuery.ajax 函數對適當的服務器進行 AJAX 調用。 在上面的代碼中，URL 是 admin-ajax.php URL，它可以在我們在腳本入隊時註冊的 JavaScript 變量中找到。 此外，使用在 WordPress 中註冊的操作處理程序的名稱指定此操作，並同時發布 nonce 和發布 ID。
如果一切順利，您可以更新 ID #loadpostresult 的 <div> 並將獲取的內容替換為 AJAX 處理程序。
為您的代碼添加一個面孔
現在，是時候創建代碼來顯示適當的帖子標題並通過 AJAX 調用顯示用戶想要的信息。 以下是以下代碼：
函數 ajaxloadpost_show_latest_posts($number = '5'){
$結果 =”;
$the_query = new WP_Query('posts_per_page='.$number);
而（ $the_query->have_posts() ）：
$the_query->the_post();
$nonce = wp_create_nonce(“ajaxloadpost_nonce”);
$arguments = get_the_ID().”,'”.$nonce.”'”;
$link = ' <a onclick=”ajaxloadpost_loadpost('.$arguments.');”>'. get_the_title().'</a>';
$result.= '<li>' 。 $鏈接。 '</li>';
結束；
wp_reset_postdata();
$result.= '<div id=”loadpostresult”></div>';
返回$結果；
}
函數 ajaxloadpost_shortcode_function( $atts ){
返回 ajaxloadpost_show_latest_posts();
}
add_shortcode('AJAXLOADPOST', 'ajaxloadpost_shortcode_function');
希望本文能幫助您使您的 WordPress 插件具有響應性。 如果您有任何疑問，請給我們留言。
進一步閱讀
- 響應式設計可幫助您提高轉化率。
- 最佳響應 WooCommerce 主題