วิธีใช้ Ajax ใน WordPress

Ajax เป็นเทคนิคยอดนิยมสำหรับการสร้างเว็บแอปพลิเคชันแบบไดนามิกและตอบสนอง ธีมและปลั๊กอิน WordPress จำนวนมากใช้ Ajax เพื่อมอบประสบการณ์การใช้งานที่ราบรื่นยิ่งขึ้น ในบทช่วยสอนนี้ เราจะแสดงวิธีใช้ Ajax ในธีม WordPress ของคุณ เราจะครอบคลุมหัวข้อต่อไปนี้: Ajax คืออะไร? วิธีการใช้ Ajax ใน WordPress? Ajax ในธีม WordPress Ajax ในปลั๊กอิน WordPress ตัวอย่าง Ajax ใน WordPress Ajax คืออะไร? Ajax เป็น เทคนิคการพัฒนาเว็บ ที่ช่วยให้เว็บแอปพลิเคชันสามารถโต้ตอบกับข้อมูลเซิร์ฟเวอร์โดยไม่ต้องโหลดหน้าซ้ำ คำขอ Ajax สร้างขึ้นโดยใช้วัตถุ XMLHttpRequest เซิร์ฟเวอร์ประมวลผลคำขอและส่งคืนการตอบกลับ เบราว์เซอร์จะประมวลผลการตอบสนองและผลลัพธ์จะแสดงบนหน้า สามารถใช้ Ajax เพื่อสร้างเว็บแอปพลิเคชันแบบไดนามิกและตอบสนองได้ มีสองวิธีในการใช้ Ajax ใน WordPress: 1. ใช้ฟังก์ชัน WordPress Ajax ในตัว 2. ใช้ไลบรารี jQuery ฟังก์ชัน WordPress Ajax เป็นวิธีที่เหมาะสำหรับสถานการณ์ส่วนใหญ่ ไลบรารี jQuery เป็นไลบรารี JavaScript ยอดนิยมที่สามารถใช้สร้างคำขอ Ajax ธีม Ajax ใน WordPress ธีม WordPress จำนวนมากใช้ Ajax เพื่อปรับปรุงประสบการณ์ผู้ใช้ ตัวอย่างเช่น ธีม WordPress Twenty Seventeen ใช้ Ajax เพื่อโหลดความคิดเห็นในโพสต์บล็อก หากคุณกำลังพัฒนาธีม WordPress คุณสามารถใช้ฟังก์ชัน WordPress Ajax ในตัวหรือไลบรารี jQuery เพื่อสร้างคำขอ Ajax ปลั๊กอิน Ajax ใน WordPress ปลั๊กอิน WordPress จำนวนมากใช้ Ajax เพื่อปรับปรุงประสบการณ์ผู้ใช้ ตัวอย่างเช่น ปลั๊กอิน WordPress Contact Form 7 ใช้ Ajax เพื่อส่งข้อมูลแบบฟอร์มโดยไม่ต้องโหลดหน้าซ้ำ หากคุณกำลังพัฒนาปลั๊กอิน WordPress คุณสามารถใช้ฟังก์ชัน WordPress Ajax ในตัวหรือไลบรารี jQuery เพื่อสร้างคำขอ Ajax ตัวอย่าง Ajax ใน WordPress ต่อไปนี้เป็นตัวอย่างวิธีการใช้ Ajax ใน WordPress: การโหลดความคิดเห็นบนบล็อกโพสต์ การส่งข้อมูลแบบฟอร์มโดยไม่ต้องโหลดหน้าซ้ำ การโหลดผลการค้นหาโดยไม่ต้องโหลดหน้าใหม่ การแสดงบทความใหม่โดยไม่ต้องโหลดหน้าใหม่ หากคุณกำลังพัฒนาธีม WordPress หรือ ปลั๊กอิน คุณสามารถใช้ Ajax เพื่อปรับปรุงประสบการณ์ผู้ใช้

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

ในการเริ่มต้น คุณต้องเปิดไฟล์ custom.js ก่อนและคัดลอกโค้ดต่อไปนี้ หากต้องการส่งคำขอ AJAX โปรดไปที่ www.example.com/administrator/ajax.php เราต้องกำหนด action hook เพื่อจัดการกับคำขอเพื่อจัดการอย่างถูกต้อง

กล่าวโดยย่อ AJAX คือ JavaScript และ XML แบบอะซิงโครนัส โดยพื้นฐานแล้ว XMLHttpRequest ใช้เพื่อส่งคำขอไปยังเซิร์ฟเวอร์ ระบบสามารถส่งและรับข้อมูลได้หลากหลายรูปแบบ รวมถึงไฟล์ JSON, XML, HTML และข้อความ

JavaScript ถูกวางไว้ในส่วนหัวหรือเนื้อหาในเบราว์เซอร์ หากคุณวาง JavaScript ทั้งหมด รวมถึง JavaScript ทั้งหมดไว้ที่ด้านล่างสุดของส่วน body> จะช่วยลดเวลาในการโหลด

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

ใน WordPress ผู้ใช้เรียกคำขอ Ajax ซึ่งจะถูกส่งต่อไปยัง admin-ajax ผ่าน วิธี Ajax คุณสามารถเข้าถึงได้โดยคัดลอกไฟล์ php จากโฟลเดอร์ WP-Admin ในการส่งคำขอ Ajax ต้องระบุข้อมูลอย่างน้อยหนึ่งชิ้น (ไม่ว่าจะผ่าน GET หรือ POST)

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

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

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

การใช้ WP_doing_ajax ใน WordPress 4.0.0 จะช่วยให้คุณดำเนินการใดๆ ได้ วิธีนี้ดีกว่าเพราะปลั๊กอินที่ทำ Ajax ต่างกันสามารถเปลี่ยนลำดับตัวกรองจากเท็จเป็นจริงได้ ใน codex ต้องตั้งค่า do_AJAX เป็น true เพื่อทดสอบค่าคงที่นี้ เอียนและสเปนเซอร์ต่างก็ระบุการตีความที่ถูกต้อง

วิธีใช้ Ajax ใน WordPress

ในพื้นที่ผู้ดูแลระบบ WordPress จะใช้ AJAX สิ่งที่คุณต้องทำคือใช้รหัสที่สร้างไว้แล้วสำหรับคุณ

วิธี Ajax () ทำอะไร?

คำขอ AJAX ( HTTP แบบอะซิงโครนัส) ดำเนินการโดยใช้วิธี Ajax() เมธอด jQuery AJAX ซึ่งใช้เมธอด jQuery() ใช้สำหรับ เมธอด jQuery AJAX ทั้งหมด วิธีนี้มักจะใช้เพื่อตอบสนองคำขอที่วิธีการอื่นไม่ได้ระบุ

ไม่มีภาษาโปรแกรมใน Ajax ตามที่บรรยายไว้ เทคโนโลยีอะซิงโครนัสทำงานในลักษณะเดียวกับที่ AJAX ทำ ซึ่งก็คือการขอข้อมูลเพิ่มเติมจากเซิร์ฟเวอร์และโหลดบนเซิร์ฟเวอร์ในเบื้องหลังโดยไม่ต้องสัมผัสกับมุมมองหรือส่วนอื่นๆ ของหน้า โดยการทำเช่นนั้น คุณสามารถเรียกดูข้อมูลที่แสดงโดยไม่ต้องโหลดไซต์ซ้ำ สามารถใช้เมธอด $.load() เพื่อโหลดข้อมูลลงในองค์ประกอบเว็บไซต์ $.get() วิธีการและ $.post() วิธีการทั้งสองทำในสิ่งเดียวกัน เราส่งพารามิเตอร์เกี่ยวกับวิธีการเหล่านี้เพื่อส่งค่าแรก แต่ไม่ใช่ข้อกำหนด นี่คือภาพรวมทั่วโลกของการนำ AJAX และ JQuery ไปใช้งาน

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

คำขอ Servlet สามประเภท

เซิร์ฟเล็ตแบ่งออกเป็นสามประเภท: br>, br>2 และ br>3 คำขอ GET เป็นตัวอย่างของคำขอข้อมูลเซิร์ฟเวอร์
การใช้ POST เป็นวิธีที่ใช้กันทั่วไปในการส่งข้อมูลไปยังเซิร์ฟเวอร์
ข้อมูลถูกถ่ายโอนระหว่างเซิร์ฟเวอร์และไฟล์ PUT

WordPress Ajax Post

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

Ajax เป็นคำขอโพสต์หรือไม่?

เป็นความจริงที่คำขอโพสต์ถูกส่งผ่าน Ajax

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

Ajax เป็นเทคนิคที่ใช้ในการสร้างคำขอแบบอะซิงโครนัสจากเบราว์เซอร์ไปยังเซิร์ฟเวอร์ ซึ่งหมายความว่าแทนที่จะต้องโหลดซ้ำทั้งหน้าเมื่อผู้ใช้คลิกลิงก์ ระบบจะโหลดซ้ำเฉพาะบางส่วนของหน้าที่ต้องอัปเดตเท่านั้น WordPress มาพร้อมกับไลบรารี ajax ของตัวเอง ซึ่งสามารถใช้เพื่อดำเนินการร้องขอ ajax โดยไม่ต้องติดตั้งปลั๊กอิน ในการใช้ไลบรารี ajax ของ WordPress เพียงแค่ใส่โค้ดต่อไปนี้ในไฟล์ functions.php ของธีมของคุณ: add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_scripts' ); ฟังก์ชั่น my_theme_enqueue_scripts() { wp_enqueue_script( 'ajax-script', get_template_directory_uri() . ' /js/ajax.js', array('jquery') ); wp_localize_script( 'ajax-script', 'ajax_params', array( 'ajax_url' => admin_url( 'admin-ajax.php' ) )); } โค้ดด้านบนจะจัดคิวไฟล์ ajax.js และส่งพารามิเตอร์ ajax_url ไปให้ พารามิเตอร์ ajax_url คือ URL ของไฟล์ WordPress admin-ajax.php ซึ่งใช้เพื่อจัดการคำขอ ajax ในไฟล์ ajax.js คุณสามารถใช้ ตัวแปร ajax_params.ajax_url เพื่อสร้างคำขอ ajax: jQuery(document).ready(function($){ $.ajax({ url: ajax_params.ajax_url, type: 'POST', ข้อมูล: { การกระทำ: 'my_action', param1: 'value1', param2: 'value2' }, ความสำเร็จ: ฟังก์ชั่น (ข้อมูล) { alert ('success'); }, ข้อผิดพลาด: ฟังก์ชัน (ข้อมูล) { alert ('error' ); } }); }); โค้ดด้านบนจะส่งคำขอ POST ไปยังไฟล์ admin-ajax.php โดยตั้งค่าพารามิเตอร์ action เป็น my_action การดำเนินการ my_action จะถูกจัดการโดยฟังก์ชันในไฟล์ functions.php: add_action( 'wp

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

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

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

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

การใช้ Ajax ใน WordPress

หากคุณต้องการใช้ Ajax บนไซต์ WordPress ของคุณ ก่อนอื่นคุณต้องเข้าใจว่าคำขอทำงานอย่างไร ก่อนที่คุณจะสามารถตั้งค่า ไฟล์ admin-ajax.html ของคุณเพื่อส่งคำขอ Ajax ไปยัง URL ที่ถูกต้อง

WordPress Ajax Url

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

วิธีใช้ Ajax ใน WordPress

URL ถูกระบุในตัวอย่าง AJAX ส่วนใหญ่ในหน้าเอกสาร jQuery เมื่อใดก็ตามที่คุณส่งคำขอเซิร์ฟเวอร์ ไม่ว่าจะใช้ AJAX หรือวิธีการแบบซิงโครนัสแบบเก่า คุณต้องระบุว่าจะส่งไปให้ใคร (ไม่ว่าคุณจะใช้ AJAX หรือวิธีการแบบซิงโครนัสแบบเก่า) ตัวอย่างเกือบทั้งหมดที่ฉันเห็นในหน้าเอกสาร jQuery มี URL ที่ระบุ (url: test)
AJAX คืออะไร? เมื่อใช้ AJAX คุณสามารถส่งข้อมูลไปยังสคริปต์ จากนั้นรับและประมวลผลการตอบสนองโดยไม่ต้องโหลดหน้าซ้ำ เมื่อใช้ HTML, CSS และ JavaScript คุณสามารถส่งข้อมูลไปยังสคริปต์ได้ ในการดำเนินการดังกล่าว ต้องทำคำขอ AJAX และต้องระบุ URL ให้กับสคริปต์ที่จะประมวลผลข้อมูล
WordPress มีไว้เพื่ออะไร?
ระบบจัดการเนื้อหา WordPress (CMS) เป็น CMS ยอดนิยมที่ใช้ AJAX เพื่อให้คุณสามารถส่งข้อมูลไปยังสคริปต์และรับและประมวลผลการตอบกลับของสคริปต์โดยไม่จำเป็นต้องโหลดหน้าซ้ำ WordPress เชื่อมต่อฟังก์ชันแบบกำหนดเองเข้ากับการโทร Ajax ที่เรียกว่า WP_ajax_ ซึ่งดำเนินการระหว่างการโทร Ajax
ฉันจะเรียกผู้ดูแลระบบใน WordPress เป็น Ajax ได้อย่างไร
คำขอ AJAX ของ WordPress จะถูกส่งไปยัง URL ทั่วไป และเมื่อมีการส่งคืนพารามิเตอร์ วิธีการที่เกี่ยวข้องจะถูกเรียกภายในโดยใช้พารามิเตอร์ admin_url 'ajax' เป็นตัวเลือกที่เหมาะสมที่สุด สามารถรับ URL นี้ได้โดยใช้ฟังก์ชัน WordPress PHP' (')