使用 AJAX 使您的 WordPress 插件具有響應性

WordPress是構建網站的絕佳平台； 但是，內容管理器工具也有其缺點。 如果您在 WordPress 上構建了網站，那麼面臨加載速度慢的問題並不少見。 由於隨著數據庫和代碼庫的湧入而添加了大量插件，這實際上並不少見。 但是，重要的是要專注於解決方案。 您不希望您的觀眾因為速度慢而失去耐心而離開，失去潛在的業務！

如果我們告訴您，您可以通過將一個簡單的功能集成到您的插件中來優化您的 WordPress 網站的速度，稱為 AJAX。 AJAX 是異步 JavaScript 和 XML 的縮寫。 AJAX 幫助您提高網站的速度。 它只會加載頁面的某一部分並保持其餘頁面靜態，從而提高加載時間。 即使在今天，一些插件和應用程序已經在使用此功能來幫助提高其網頁的速度。

在短短的時間內，AJAX 在數字營銷領域獲得了極好的聲譽，並被大多數網站所有者使用。 幸運的是，WordPress 為 AJAX 提供了出色的支持，使得編寫集成到 AJAX 中的插件變得更加容易。 在 WordPress 和我們的文章的支持下，您應該能夠立即將 AJAX 集成到您的插件中。

以下是逐步指導您完成該過程的指南。

步驟#1 – 創建你的插件

第一步是創建一個簡單的插件，然後您可以使用它來開發更高級的產品，該產品響應速度更快，並減少了網頁的加載時間。 好消息是您在創建插件時不會有任何困難，因為您需要做的就是創建一個包含單行數據的文件。

您可以通過搜索文件“wp-content/plugins”並生成適合您的任何名稱的文件夾來執行此操作。 完成此操作後，您現在需要打開文件夾並創建一個名為“name_of_the_plugin.php”的文件。 在文本編輯器中打開此文件後，在文本編輯器中鍵入以下代碼。

<?php
/*
Plugin Name: Your choice
Plugin URI: http://yout-choice.com
Description: This loads post via ajax
Author: Your name
Author URI: http://yourname.com
Version: 1
*/

步驟 #2 – 添加 JavaScript 庫

您通過創建一個“ajaxloadpost”目錄開始這一步。 怎麼做？ 這非常簡單，因為您可以將它與 WordPress 插件一起安裝。 完成此步驟後，您現在可以創建已編碼的插件並運行它。 然後，您需要將以下代碼添加到您的 ajaxloadpost 中：

define('AJAXLOADPOSTURL', WP_PLUGIN_URL."/".dirname( plugin_basename( __FILE__ ) ) );
function 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);

您必須通過創建的插件的 URL 引導 WordPress； 這就是為什麼您需要通過 AJAXLOADPOSTURL 的名稱來定義變量的原因。

AJAX 總是與多種編程語言結合使用，我們將在剩下的文章中使用 JavaScript。 在 \wp-content\plugins\ajaxloadpost\js\folder 中查找 ajaxloadpost.js 並將 JavaScript 添加到其中。 您現在可以將 JavaScript 變量添加到腳本中。

步驟 #3 – 集成 AJAX 處理程序

一旦對上述所有內容進行了排序，您就可以繼續將 AJAX 處理程序集成到您的插件中。 以下是您的 AJAX 處理程序的代碼：

function ajaxloadpost_ajaxhandler() {
if ( !wp_verify_nonce( $_POST['nonce'], "ajaxloadpost_nonce")) {
exit("Wrong nonce");
}

$results = '';
$content_post = get_post($_POST['postid']);
$results = $content_post->post_content;

die($results);
}

上面的代碼基本上將完成兩個任務。 它將首先為用戶所需的帖子開發一個 ID。 第二個任務是創建“nonce”。 第二個元素你暫時不用擔心（文末有詳細介紹）。

相反，您應該繼續進行第二步，即在 WordPress 目錄中註冊您的 AJAX 處理程序。 這將使 AJAX 函數能夠在請求後被調用。 這個動作可以通過下面提到的代碼來實現：

add_action( 'wp_ajax_nopriv_ajaxloadpost_ajaxhandler', 'ajaxloadpost_ajaxhandler' );
add_action( 'wp_ajax_ajaxloadpost_ajaxhandler', 'ajaxloadpost_ajaxhandler' );

如果您不熟悉這種編程語言，那麼擁有 JavaScript 的背景知識對您來說是一個巨大的優勢，請尋求專家的幫助來指導您完成整個過程。 您還可以通過網絡導師或閱讀此處的文章來提高您的 JavaScript 技能。

步驟 #4 – 使用 JavaScript 進行 AJAX

接下來需要編寫一個函數，使 AJAX 能夠調用和更新通過 AJAX 處理程序返回的數據。 函數一般是ajacloadpost.js。 以下代碼可用於確定上述操作。

function ajaxloadpost_loadpost(postid,nonce) {
jQuery.ajax({
type: 'POST',
url: ajaxloadpostajax.ajaxurl,
data: {
action: 'ajaxloadpost_ajaxhandler',
postid: postid,
nonce: nonce
},
success: function(data, textStatus, XMLHttpRequest) {
var loadpostresult = '#loadpostresult';
jQuery(loadpostresult).html('');
jQuery(loadpostresult).append(data);
},
error: function(MLHttpRequest, textStatus, errorThrown) {
alert(errorThrown);
}
});

上面的函數將接受兩個輸入，其中一個是帖子的 id，第二個是隨機數。 您可以使用 jQuery.ajax 函數來調用服務器。 成功後，使用通過 AJAX 處理程序返回的數據更新 id #loadpostresult 的 <div>。 代碼的最後一位是發生錯誤時的條件。 如果發生錯誤，系統會彈出一個警報。

步驟 #5 – 顯示列表

對所有功能進行排序後，您可以進行最後一步，即顯示帖子標題。 請記住，每次點擊可能指向不同的帖子標題，您的代碼應該能夠獲取已調用的代碼。 以下代碼可以幫助您實現這一目標：

function ajaxloadpost_show_latest_posts($number = '5'){  

$results ='';
$the_query = new WP_Query( 'posts_per_page='.$number );  

while ( $the_query->have_posts() ) :
$the_query->the_post();
$nonce = wp_create_nonce("ajaxloadpost_nonce");  

$arguments = get_the_ID().",'".$nonce."'";  

$link = ' <a>'. get_the_title().'</a>';  

$result.= '<li>' . $link . '</li>';
endwhile;
wp_reset_postdata();  

$result.= '<div></div>';  

return $result;
}  

function ajaxloadpost_shortcode_function( $atts ){
return ajaxloadpost_show_latest_posts();
}
add_shortcode( 'AJAXLOADPOST', 'ajaxloadpost_shortcode_function' );

什麼是“隨機數”？

隨機數用於檢查請求是否來自真實來源。 可以使用一個簡單的 WordPress 函數生成隨機數：“wp_create_nonce”。 可以使用以下函數通過 AJAX 處理程序進一步檢查：“wp_verify_nonce”。 如果您在 WordPress 上執行敏感任務，則使用此功能非常重要。

  結論

  將 AJAX 與您的插件集成有助於顯著提高頁面的響應能力。 如果您對 JavaScript 不滿意，您可以選擇一種您覺得更容易編寫代碼的編程語言，或者尋找可以幫助您為插件編寫代碼的專家。 嘗試將 AJAX 集成到您的插件中，您不會失望的！