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

เผยแพร่แล้ว: 2020-06-02
WordPress Plugin Responsive

ปรับปรุงล่าสุด - 8 กรกฎาคม 2021

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

ซึ่งไม่เพียงแต่ทำให้หน้าเว็บหรือปลั๊กอินตอบสนองเท่านั้น แต่ยังช่วยลดเวลารอลงครึ่งหนึ่งอีกด้วย มีปลั๊กอินและแอปพลิเคชันหลายตัวที่ใช้ Ajax เพื่อสร้างประสบการณ์ที่ดีขึ้นสำหรับผู้ใช้ ตัวอย่างเช่น WooCommerce ใช้คุณสมบัติ Ajax เพื่อปรับปรุงพฤติกรรมการหยิบใส่รถเข็น

ด้วยตัวเลือกที่เปิดใช้งาน AJAX ลูกค้าของคุณจะสามารถช็อปปิ้งต่อได้แม้หลังจากเพิ่มสินค้าลงในตะกร้าแล้ว

เมื่อพิจารณาถึงประโยชน์ของมัน เราจะสอนวิธีทำให้ปลั๊กอิน WordPress ของคุณตอบสนองผ่าน AJAX

การสร้างปลั๊กอิน

ก่อนที่คุณจะใช้เวทย์มนตร์กับ AJAX ได้ คุณต้องมีพื้นฐานปลั๊กอินพื้นฐานที่คุณสามารถใช้เพื่อสร้างผลิตภัณฑ์ขั้นสูงและตอบสนองได้

การสร้างปลั๊กอินนั้นไม่ใช่เรื่องยาก เพราะทั้งหมดที่คุณต้องการคือการสร้างไฟล์ที่มีเนื้อหาแบบซับเดียว เพื่อจุดประสงค์นี้ ขั้นตอนแรกคือไปที่ไฟล์ wp-content/plugins และสร้างโฟลเดอร์ใหม่ด้วยชื่อที่คุณเลือก เปิดโฟลเดอร์และสร้างไฟล์ใหม่ name_of_the_plugin.php ตอนนี้ ดูไฟล์ในโปรแกรมแก้ไขข้อความและเขียนข้อมูลต่อไปนี้:

<?php

/*

ชื่อปลั๊กอิน: Coolness Inducer

URI ของปลั๊กอิน: http://coolness-inducer.com

คำอธิบาย: >-

ปลั๊กอินที่สมบูรณ์แบบสำหรับการทำให้เว็บไซต์ของคุณเจ๋งเป็นพิเศษ

เวอร์ชัน: 1.3

ผู้เขียน: คุณเวเดอร์

URI ผู้เขียน: http://msvader.com

ใบอนุญาต: GPL2

*/

?>

ก่อนทำสิ่งนี้ ให้สร้างไดเร็กทอรี ajaxloadpost ในการติดตั้งปลั๊กอินของ WordPress เมื่อคุณทำสิ่งนี้แล้ว ให้สร้างปลั๊กอินและเปิดใช้งาน หลังจากนี้ รวมข้อมูลต่อไปนี้ไว้ใน 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', อาร์เรย์ ( 'ajaxurl' => admin_url( 'admin-ajax.php' ) ) );

}

add_action('wp_enqueue_scripts', ajaxloadpost_enqueuescripts);

จากนั้นกำหนดตัวแปร AJAXLOADPOSTURL เนื่องจากคุณจะต้องใช้ตัวแปรดังกล่าวเพื่อนำ WordPress ไปยัง URL ของปลั๊กอินของคุณ ตอนนี้ คุณต้องจัดคิวสคริปต์ของคุณ ซึ่งคุณสามารถทำได้โดยเพิ่ม ajaxloadpost_enqueuescripts ลงใน wp_enqueue_scripts ของ WordPress

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

ดำเนินการต่อ เพิ่ม JavaScript ลงใน ajaxloadpost.js ซึ่งคุณจะพบใน \wp-content\plugins\ajaxloadpost\js\folder ทำตามการกระทำนี้โดยสร้างโฟลเดอร์ JS และวาง ajaxloadpost.js ลงไป

ตอนนี้ ใช้ WordPress wp_localize_script เพื่อเพิ่มตัวแปร JS ที่จำเป็น การดำเนินการนี้จะจัดเตรียมโครงสร้างให้กับไดเร็กทอรีของคุณและจัดคิวสคริปต์ของคุณ

การเขียนตัวจัดการ AJAX

ในการเขียนตัวจัดการ AJAX คุณจะต้องมีรหัสต่อไปนี้:

ฟังก์ชัน ajaxloadpost_ajaxhandler () {

if ( !wp_verify_nonce( $_POST['nonce'], “ajaxloadpost_nonce”)) {

exit("ผิด nonce");

}

$ผลลัพธ์ = ”;

$content_post = get_post($_POST['postid']); $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 ของโพสต์ที่ผู้ใช้ต้องการและอย่างที่สองคือจะสร้าง nonce แต่นั่นไม่ใช่ประเด็น! เมื่อรหัสของตัวจัดการ AJAX พร้อมใช้งานแล้ว คุณต้องไปยังขั้นตอนถัดไปที่ลงทะเบียนตัวจัดการ AJAX ในไดเร็กทอรี WordPress การทำเช่นนี้จะทำให้ปลั๊กอิน 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',

URL: ajaxloadpostajax.ajaxurl,

ข้อมูล: {

การกระทำ: 'ajaxloadpost_ajaxhandler',

postid: โพสต์,

nonce: nonce

},

ความสำเร็จ: ฟังก์ชัน (data, textStatus, XMLHttpRequest) {

var loadpostresult = '#loadpostresult';

jQuery(loadpostresult).html(”);

jQuery(loadpostresult).append(ข้อมูล);

},

ข้อผิดพลาด: ฟังก์ชัน (MLHttpRequest, textStatus, errorThrown) {

การแจ้งเตือน (ข้อผิดพลาดโยน);

}

});

}

เช่นเดียวกับขั้นตอนที่กล่าวไว้ข้างต้น การดำเนินการนี้จะสร้างผลลัพธ์สองประการ ได้แก่ nonce และ post ID

ขั้นตอนต่อไปต้องใช้ความชำนาญใน jQuery เช่นกัน ดังนั้น หากทักษะของคุณไม่ธรรมดา คุณจะพบว่าบทความนี้มีประโยชน์!

ต่อไป ใช้ฟังก์ชัน jQuery.ajax เพื่อทำการเรียก AJAX ไปยังเซิร์ฟเวอร์ที่เหมาะสม ในโค้ดด้านบนนี้ URL จะเป็น admin-ajax.php URL ซึ่งสามารถพบได้ในตัวแปร JavaScript ที่เราลงทะเบียนตอนเข้าคิวสคริปต์ นอกจากนี้ ให้ระบุการดำเนินการนี้ด้วยชื่อตัวจัดการการดำเนินการที่ลงทะเบียนกับ WordPress และโพสต์ nonce และรหัสโพสต์ด้วย

หากทุกอย่างถูกต้อง คุณสามารถอัปเดต <div> ของ id #loadpostresult และแทนที่เนื้อหาที่ดึงมาด้วยตัวจัดการ AJAX

การเผชิญหน้ากับรหัสของคุณ

ตอนนี้ ได้เวลาสร้างรหัสที่จะแสดงชื่อโพสต์ที่เหมาะสมและแสดงข้อมูลที่ผู้ใช้ต้องการผ่านการโทร AJAX นี่คือรหัสต่อไปนี้:

ฟังก์ชัน ajaxloadpost_show_latest_posts ($number = '5'){

$ผลลัพธ์ =”;

$the_query = ใหม่ 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 Plugin Responsive แสดงความคิดเห็นหากคุณมีคำถาม

อ่านเพิ่มเติม

  • การออกแบบที่ปรับเปลี่ยนตามอุปกรณ์ช่วยให้คุณปรับปรุงอัตราการแปลง
  • ธีม WooCommerce ที่ตอบสนองได้ดีที่สุด