ทำให้ปลั๊กอิน WordPress ของคุณตอบสนองโดยใช้ AJAX

WordPress เป็นแพลตฟอร์มที่ยอดเยี่ยมสำหรับการสร้างเว็บไซต์ อย่างไรก็ตาม เครื่องมือจัดการเนื้อหามีข้อเสียอยู่ด้วย หากคุณสร้างเว็บไซต์ของคุณบน WordPress ไม่ใช่เรื่องแปลกที่จะเผชิญกับปัญหาความเร็วในการโหลดช้า เนื่องจากมีปลั๊กอินจำนวนมากที่เพิ่มเข้ามาพร้อมกับการไหลเข้าของฐานข้อมูลและฐานรหัส จึงไม่ใช่เรื่องแปลก อย่างไรก็ตาม สิ่งสำคัญคือต้องมุ่งเน้นไปที่การแก้ปัญหา คุณไม่ต้องการให้ผู้ชมของคุณหมดความอดทนและจากไปเนื่องจากความเร็วที่ช้าและสูญเสียโอกาสทางธุรกิจ!

จะเกิดอะไรขึ้นหากเราบอกคุณว่าคุณสามารถเพิ่มประสิทธิภาพความเร็วของเว็บไซต์ WordPress ได้โดยการผสานรวมคุณลักษณะง่ายๆ เข้ากับปลั๊กอินของคุณ ซึ่งเรียกว่า AJAX คำว่า AJAX นั้นย่อมาจาก JavaScript และ XML แบบอะซิงโครนัส AJAX ช่วยให้คุณปรับปรุงความเร็วของเว็บไซต์ของคุณ มันจะโหลดเฉพาะบางส่วนของหน้าและทำให้หน้าที่เหลือคงที่ซึ่งจะช่วยปรับปรุงเวลาในการโหลด ปลั๊กอินและแอปหลายตัวใช้คุณลักษณะนี้อยู่แล้วเพื่อช่วยปรับปรุงความเร็วของหน้าเว็บแม้ในปัจจุบัน

ในเวลาอันสั้น AJAX ได้รับชื่อเสียงอันยอดเยี่ยมในโลกของ Digital Marketing และถูกใช้โดยเจ้าของเว็บไซต์ส่วนใหญ่ โชคดีที่ 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);

คุณต้องนำ WordPress ผ่าน URL ของปลั๊กอินที่สร้างขึ้น นี่คือเหตุผลที่คุณต้องกำหนดตัวแปรโดยใช้ชื่อ AJAXLOADPOSTURL

AJAX มักใช้กับภาษาการเขียนโปรแกรมผสมกัน เราจะทำงานกับ JavaScript ในบทความที่เหลือ ค้นหา ajaxloadpost.js ใน \wp-content\plugins\ajaxloadpost\js\folder แล้วเพิ่ม JavaScript เข้าไป คุณสามารถเพิ่มตัวแปร JavaScript ลงในสคริปต์ของคุณได้แล้ว

ขั้นตอนที่ #3 – การรวม AJAX Handler

เมื่อจัดเรียงข้อมูลทั้งหมดข้างต้นแล้ว คุณก็ย้ายไปรวมตัวจัดการ 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" คุณไม่ต้องกังวลเกี่ยวกับองค์ประกอบที่สองในขณะนี้ (มีคำอธิบายโดยละเอียดอยู่ท้ายบทความ)

คุณควรไปที่ขั้นตอนที่สองแทน ซึ่งก็คือการลงทะเบียนตัวจัดการ AJAX ของคุณภายในไดเร็กทอรี WordPress การดำเนินการนี้จะทำให้เรียกใช้ฟังก์ชัน 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 ของโพสต์ และตัวที่สองคือ nonce คุณสามารถใช้ฟังก์ชัน jQuery.ajax เพื่อทำการเรียกไปยังเซิร์ฟเวอร์ เมื่อสำเร็จแล้ว ให้อัปเดต <div> ของ id #loadpostresult ด้วยข้อมูลที่ส่งคืนผ่านตัวจัดการ AJAX รหัสบิตสุดท้ายเป็นเงื่อนไขในกรณีที่เกิดข้อผิดพลาด หากเกิดข้อผิดพลาด ระบบจะแจ้งเตือนด้วยป๊อปอัป

ขั้นตอน #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' );

“nonce” คืออะไร?

nonce ใช้เพื่อตรวจสอบว่าคำขอนั้นมาจากแหล่งที่มาจริงหรือไม่ สามารถสร้าง nonce ได้โดยใช้ฟังก์ชัน WordPress อย่างง่าย: “wp_create_nonce” สามารถตรวจสอบเพิ่มเติมผ่านตัวจัดการ AJAX โดยใช้ฟังก์ชัน: “wp_verify_nonce” การใช้คุณลักษณะนี้มีความสำคัญอย่างยิ่งหากคุณกำลังทำงานที่ละเอียดอ่อนบน WordPress

  บทสรุป

  การผสานรวม AJAX กับปลั๊กอินของคุณสามารถช่วยปรับปรุงการตอบสนองของหน้าเว็บของคุณได้อย่างชัดเจน หากคุณไม่สะดวกใจกับ JavaScript คุณอาจเลือกใช้ภาษาการเขียนโปรแกรมที่คุณคิดว่าเขียนโค้ดได้ง่ายกว่า หรือหาผู้เชี่ยวชาญที่สามารถช่วยคุณเขียนโค้ดสำหรับปลั๊กอินของคุณได้ ลองผสานรวม AJAX เข้ากับปลั๊กอินของคุณแล้วคุณจะไม่ผิดหวัง!