วิธีเพิ่ม AJAX ในเว็บไซต์ WordPress ของคุณ

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

มีหลายวิธีในการใช้ AJAX ใน WordPress แต่วิธีหนึ่งควรใช้มากที่สุด AJAX คือการรวมกันของโค้ด HTML, CSS และ JavaScript ที่ช่วยให้คุณสามารถส่งข้อมูลไปยังสคริปต์ รับและประมวลผลการตอบกลับ จากนั้นโหลดหน้าซ้ำ หากคุณไม่คุ้นเคยกับ AJAX ให้อ่านบทความ Wikipedia ที่ท้ายบทความนี้ ในโฟลเดอร์ผู้ดูแลระบบ WP มีไฟล์ admin-ajaxx ที่เก็บคำขอ AJAX หากไม่มีรายการอื่น ควรมีการดำเนินการ (สำหรับทั้งคำขอ GET และ POST) การเพิ่มฟังก์ชันไปยัง hook แรกหมายความว่าฟังก์ชันจะใช้งานได้หากผู้ใช้ที่เข้าสู่ระบบเริ่มต้นการดำเนินการ เมื่อใช้ hook ที่สอง คุณสามารถแยกผู้ใช้ที่ล็อกอินและไม่ได้ล็อกออกจากระบบได้

สร้างคลาส user_vote และคุณสมบัติ data-post_id ซึ่งมี ID ของโพสต์และเหตุการณ์คลิก โดยใช้ปลั๊กอินของคุณ ฟิลด์เมตาสามารถใช้เพื่อเก็บจำนวนการโหวตทั้งหมด ฟังก์ชัน update_post_meta() ใช้เพื่ออัปเดตจำนวนโหวตสำหรับโพสต์ของเรา เราจะสร้างอาร์เรย์สำหรับแต่ละกรณีเพื่อให้ตรงกับความสำเร็จหรือความล้มเหลวของฟังก์ชัน ตอนนี้มีการใช้เมธอดปกติเพื่อจัดการกับการกระทำของผู้ใช้ และตอนนี้ JavaScript ได้รับการพัฒนาแล้ว ฟังก์ชันที่ไม่ดีสำหรับการจัดการผู้ใช้ที่ออกจากระบบ แต่สามารถใช้เป็นตัวอย่างได้ เราต้องใช้ jQuery และโค้ด JavaScript ของเราเองเพื่อให้ระบบของเราใช้ AJAX

โดยทำตามขั้นตอนด้านล่าง คุณสามารถทำได้บนปลั๊กอินของคุณ ในไฟล์ my_voter_script.js เราจะพบ URL ของ myAjax.ajaxurl ซึ่งมี URL ของไฟล์ admin-ajax.html ของเรา เมื่อผู้ใช้คลิกปุ่มโหวตโดยไม่ใช้ JavaScript พวกเขาจะใช้วิธี GET (สตริงการสืบค้น) เพื่อส่งคำขอไปยังสคริปต์ พวกเขาสามารถเข้าถึงหน้าโดยใช้ JavaScript เพื่อตอบสนองต่อคำขอของเรา ข้อมูลควรถูกเปิดเผยต่อสาธารณะ ฟังก์ชัน my_user_vote() ในปลั๊กอินของเราคาดว่าจะประมวลผลและส่งอาร์เรย์ผลลัพธ์กลับมาให้เรา ตัวนับการลงคะแนน ในตัวอย่างของเรา จะเปลี่ยนแปลงมูลค่าเพื่อระบุการนับคะแนนใหม่ แพลตฟอร์ม AJAX ของ WordPress มีข้อเสนอมากมาย เช่นเดียวกับความสามารถในการแยกความแตกต่างระหว่างสถานะการเข้าสู่ระบบและไม่ใช่การออกจากระบบ

ฉันสามารถใช้ Ajax ใน WordPress ได้หรือไม่?

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

Ajax อนุญาตให้คุณแลกเปลี่ยนข้อมูลโดยไม่ต้องโหลดหน้าซ้ำ คุณสามารถทำได้ด้วยตัวเองหากคุณสร้างไฟล์แบบสแตนด์อโลนโดยใช้ WordPress แต่คุณต้องเรียกใช้และดำเนินการด้วยตัวเอง นอกจากนี้ WordPress ยังมีวิธีที่มีประสิทธิภาพและเรียบง่ายสำหรับการใช้ Ajax ภายใน โดยการเอาต์ซอร์ส Ajax เป็นไฟล์เพิ่มเติม คุณสามารถรวมไว้ใน functions.php Ajax เป็นรหัสจริงที่เราใช้ที่นี่ ข้อมูล Ajax ถูกประมวลผลโดยใช้ JavaScript ขั้นตอนที่ 4 ใน JavaScript คุณส่งข้อมูลกลับไปยังไคลเอนต์ในการโทรกลับ คุณยังสามารถเพิ่มเครื่องเทศเพิ่มเติมได้ตามต้องการ

สามารถใช้ AJAX เพื่อดึงข้อมูลจากเซิร์ฟเวอร์ ส่งข้อมูลไปยังสคริปต์ หรือทำการคำนวณ HTML5 มักถูกรวมเข้ากับ AJAX ทำให้นักออกแบบสามารถสร้างเว็บไซต์ที่ดูทันสมัยได้ง่ายขึ้น
สามารถสร้างหน้าเว็บด้วย AJAX ได้ในเวลาไม่กี่วินาที หน้าเว็บสามารถอัปเดตแบบอะซิงโครนัสได้โดยใช้ AJAX โดยการแลกเปลี่ยนข้อมูลจำนวนเล็กน้อยกับเซิร์ฟเวอร์เบื้องหลัง เนื่องจากส่วนต่างๆ ของหน้าเว็บสามารถอัปเดตได้โดยไม่ต้องโหลดซ้ำทั้งหน้า ซึ่งหมายความว่าส่วนต่างๆ สามารถอัปเดตได้โดยไม่ต้องโหลดซ้ำทั้งหน้า

วิธีใช้ฟังก์ชัน Admin_url () ใน WordPress Ajax

ในโค้ดตัวอย่าง AJAX ของเรา ฟังก์ชัน admin_url() จะส่งกลับ URL คำขอ AJAX นี่คือสิ่งที่ปรากฏแก่ฉันในภาพนี้: Ajax ( type:GET, dataType: json, url: admin_url('ajax.')) ใช้ GET ใน, data, action: get_data, success: function(response) alert("การโหวตของคุณไม่สามารถเพิ่มได้"); และในเหตุการณ์: รับ URL คำขอ AJAX สามารถระบุได้โดยใช้ฟังก์ชัน admin_url() ในตัวอย่างนี้ ข้อมูลเป็นดังนี้: *action: “get_data”, *success: function(response): “Your Vote can be added”); *การแจ้งเตือน: “ไม่สามารถเพิ่มการโหวตของคุณได้”

ฉันจะรับข้อมูล Ajax ใน WordPress ได้อย่างไร

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

Ajax ทำงานอย่างไรใน WordPress?

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

ฉันจะรู้ได้อย่างไรว่า WordPress Ajax ทำงานได้หรือไม่

Ajax เป็นเทคโนโลยีที่ช่วยให้สามารถสร้างเว็บแอปพลิเคชันแบบไดนามิกที่ตอบสนองได้ ช่วยให้หน้าเว็บสามารถขอและรับข้อมูลจากเซิร์ฟเวอร์โดยไม่ต้องโหลดซ้ำทั้งหน้า WordPress ใช้ Ajax เพื่อปรับปรุงประสบการณ์ผู้ใช้โดยให้อินเทอร์เฟซที่ตอบสนองมากขึ้น มีสองสามวิธีที่จะบอกได้ว่า WordPress Ajax ใช้งานได้หรือไม่ หนึ่งคือการดูคำขอเครือข่ายในเครื่องมือสำหรับนักพัฒนาของเบราว์เซอร์ของคุณ หากคุณเห็นคำขอส่งไปยัง URL ajax ของ WordPress (wp-admin/admin-ajax.php) แสดงว่า WordPress กำลังใช้ Ajax ในหน้านั้น อีกวิธีหนึ่งคือการมองหาเครื่องหมาย '#' ใน URL สิ่งนี้บ่งชี้ว่าหน้าใช้ตัวเลือก 'ส่วนย่อย' ซึ่งจำเป็นสำหรับคำขอ Ajax

สามารถใช้ ฟังก์ชัน WP_doing_ajax ได้เนื่องจาก WordPress 4.0.0 มีฟังก์ชันในตัวอยู่แล้ว เนื่องจากปลั๊กอินที่ใช้ Ajax ต่างกันสามารถกรองผลบวกปลอมออกได้ วิธีนี้จึงเป็นตัวเลือกที่ดีกว่า หากคุณใช้ Ajax ตามที่แนะนำใน codex คุณสามารถทดสอบค่าคงที่ DOING_AJAX เมื่อคำขอ AJAX ไม่ได้มีไว้สำหรับใช้กับ admin-ajax hook คำขอนั้นจะเป็นเพียงปลายทาง (เช่น PayPal IPN)

Ajax ใน WordPress โดยไม่ต้องใช้ปลั๊กอิน

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

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

ต่อไปนี้คือภาพรวมวิธีที่เราใช้แอตทริบิวต์ข้อมูล HTML5 เพื่อระบุโพสต์บล็อก Get_the_id() สามารถใช้เพื่อรับข้อมูลนี้หากคุณใช้ปลั๊กอิน เมื่อคุณเรียกใช้ Ajax บนวัตถุ คุณต้องส่งคำขอไปยัง ไฟล์ admin-ajax.php ไฟล์นี้จัดการและประมวลผลคำขอ WordPress Ajax ทั้งหมดของคุณ ในรหัสนี้ เราได้สร้างฟังก์ชันที่จะเรียกเมื่อผู้ใช้คลิกที่ลิงก์ 'อ่านฉันภายหลัง' เราได้รับ post ID ผ่าน data method ในฟังก์ชันนี้ และเราบันทึกไว้ในตัวแปร rml_post_id หลังจากที่คุณเพิ่มโค้ดต่อไปนี้แล้ว คุณจะต้องใช้เมธอด theajax() อีกครั้ง

เมื่อผู้ใช้คลิกที่ลิงก์ 'อ่านฉันภายหลัง' ลิงก์นั้นจะถูกลบออก ตัวแปร $rml_post_id มี ID ของโพสต์ เมื่อมีแถว ฟังก์ชัน get_meta() ของ WordPress จะคืนค่าเมตา เราจัดเก็บข้อมูลนี้ในตาราง usermeta ในฐานข้อมูลของเราหากเป็นจริง เราตรวจสอบเพื่อดูว่ามีค่า $value หรือไม่ มีหรือไม่มีอยู่จริง โปรดเพิ่มรหัสต่อไปนี้ในไฟล์ read-me-later.php คุณมีหน้าที่รับผิดชอบในการฆ่าเชื้อระบบของคุณโดยใช้ Update() เมื่อคุณทำการอัปเดต

ฟังก์ชัน WordPress get_posts() จะคืนค่าโพสต์ทั้งหมดตามความชอบของผู้ใช้ เราจะใช้วิธีวิดเจ็ต () เพื่อแสดงวลี 'อ่านฉัน' โพสต์จากเดือนก่อนหน้าจะถูกใช้ในส่วนหน้า พูดตามตรง เราต้องการวิดเจ็ตพื้นฐานในกรณีนี้ คุณลักษณะนี้ช่วยให้คุณสามารถระบุได้ว่าคำขอมาจากตำแหน่งที่ถูกต้องหรือไม่ และสร้างขึ้นโดยผู้ใช้ที่ได้รับการรับรองความถูกต้อง หาก nonce ไม่ถูกต้องหรือไม่ได้ตั้งค่า การ เรียก Ajax จะถูกยกเลิก บทแนะนำนี้จะสอนผู้ใช้ถึงวิธีบันทึกโพสต์ที่ต้องการอ่านในภายหลังแล้วอ่านในภายหลัง

WordPress Ajax Post

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

บทความของ Artisans Web เกี่ยวกับโพสต์ WordPress ที่โหลดด้วย Ajax เป็นแหล่งข้อมูลที่ดีในการเริ่มต้น บางครั้ง คุณจะพบสถานการณ์ที่คุณต้องการใช้ Ajax ในบทความ WordPress ในการตอบสนองต่อพฤติกรรมนี้ จะไม่มีการแสดงลิงก์การแบ่งหน้า และการโหลดหน้าซ้ำจะหยุดลง โพสต์ชุดถัดไปจะแสดงขึ้นเมื่อคลิกปุ่มนี้ ตราบใดที่คุณคลิกแล้วคลิก 'โหลดเพิ่มเติม' กระบวนการจะเสร็จสมบูรณ์เมื่อมีการดูโพสต์ทั้งหมดแล้ว ในการผสานรวม WordPress Ajax คุณต้องรวมไฟล์ JS ในสภาพแวดล้อมของ WordPress ในไดเร็กทอรี js ให้สร้างไฟล์ custom.js จากนั้นคัดลอกโค้ดต่อไปนี้ลงในไฟล์ functions.php

โค้ดนี้ใช้ค่า 'page' และแปลงเป็นค่า 'paged' โพสต์ WordPress ถูกแจกจ่ายและผลลัพธ์ที่ได้จะถูกสร้างขึ้น เมื่อคุณคลิกที่ปุ่ม 'โหลดเพิ่มเติม' โพสต์ถัดไปจะถูกโหลดใน Ajax

ความแตกต่างระหว่าง Ajax และ Post คืออะไร?

สัญลักษณ์ $ เรียกว่าโพสต์ เนื่องจากทั้งคำขอ POST และคำขอ POST ทำได้โดยใช้รหัสพื้นฐานเดียวกัน จึงมีความแตกต่างกันเพียงเล็กน้อย

ฟังก์ชัน WordPress Ajax Call Php

Ajax เป็นวิธีการทำให้หน้าเว็บตอบสนองและโต้ตอบได้ดีขึ้นโดยการแลกเปลี่ยนข้อมูลจำนวนเล็กน้อยกับเซิร์ฟเวอร์เบื้องหลัง การแลกเปลี่ยนข้อมูลนี้สามารถใช้เพื่ออัปเดตหน้าโดยไม่ต้องโหลดซ้ำ ตอบสนองต่อการป้อนข้อมูลของผู้ใช้โดยไม่ต้องโหลดหน้าซ้ำ โหลดเนื้อหาใหม่ลงในหน้าโดยไม่ต้องโหลดซ้ำ และอื่นๆ ใน WordPress Ajax ถูกใช้ในส่วนแบ็คเอนด์เพื่อทำงานต่างๆ เช่น การบันทึกโพสต์ รับข้อมูลจากฐานข้อมูล และอื่นๆ ในส่วนหน้า สามารถใช้ Ajax เพื่อใช้งานคุณลักษณะต่างๆ เช่น การเลื่อนแบบไม่สิ้นสุด การโหลดโพสต์เพิ่มเติมเมื่อคลิกปุ่ม และอื่นๆ ในการใช้ Ajax ใน WordPress เราจำเป็นต้องรวมไลบรารี jQuery ซึ่งรวมอยู่ใน WordPress แล้ว จากนั้นเราสามารถใช้วิธี jQuery.ajax() หรือ jQuery.post() เพื่อส่งคำขอ Ajax ของเรา ในส่วนแบ็คเอนด์ เราจำเป็นต้องเชื่อมต่อกับ การกระทำ wp_ajax เพื่อให้สามารถจัดการกับคำขอ Ajax ของเราได้ จากนั้นเราสามารถใช้ฟังก์ชัน wp_die() เพื่อออกจากสคริปต์ PHP ของเราและส่งคืนการตอบกลับของเรา ในส่วนหน้า เราจำเป็นต้องส่งคำขอ Ajax ของเราไปยัง WordPress ajaxurl ซึ่งเป็นตัวแปร JavaScript ส่วนกลาง จากนั้นเราจะใช้ฟังก์ชันเรียกกลับที่สำเร็จและข้อผิดพลาดเพื่อจัดการกับการตอบสนองของเรา

วิธีการโทร Ajax ใน WordPress

การสร้าง Ajax โทร โดยใช้ WordPress เพื่อให้การโทร Ajax ทำงานได้ สมาชิกหลักของ WordPress ต้องมีไฟล์ admin-ajax.php ภายในบริบทของ WordPress ไฟล์นี้มีหน้าที่ในการจัดการและประมวลผลคำขอ Ajax ทั้งหมดของคุณ อย่าใช้ URL โดยตรงของเส้นทางไฟล์เพื่อเข้าถึงไฟล์ ฉันจะรับ admin-ajax ใน WordPress ได้อย่างไร การโทร Ajax ทั้งหมดจะถูกส่งไปยังไดเร็กทอรี /wordpress/ajax/files ใน WordPress โดยใช้ไฟล์ admin-ajax.php Ajax เข้ากันได้กับ PHP หรือไม่ สามารถใช้ AJAX แทน PHP ได้ ในบทช่วยสอน PHP ของเรา เราจะสาธิตวิธีที่ AJAX สามารถอัปเดตส่วนต่างๆ ของหน้าเว็บโดยไม่ต้องโหลดซ้ำทั้งหน้า PHP จะใช้เพื่อสร้างสคริปต์เซิร์ฟเวอร์