วิธีใช้ Ajax ใน WordPress

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

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

ในบทความนี้ เราจะแนะนำคุณเกี่ยวกับ Ajax และวิธีการทำงาน เราจะแนะนำคุณตลอดการเริ่มต้นใช้งาน Ajax ใน WordPress กระโดดเข้าไปเลย!

Ajax คืออะไรและทำงานอย่างไร?

Ajax รวบรวมภาษาโปรแกรมต่างๆ มากมาย เช่น HTML, CSS, JavaScript และอื่นๆ ในการทำงาน มันทำงานอยู่เบื้องหลังเพื่อรับคำขอจากเว็บเบราว์เซอร์ ส่งไปยังเซิร์ฟเวอร์ และโอนผลลัพธ์กลับไปยังเบราว์เซอร์

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

ทำไม Ajax ถึงมีประโยชน์?

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

ในฐานะผู้ใช้เว็บ เราได้รับประโยชน์จาก Ajax ตลอดเวลา ตัวอย่างหนึ่งคือฟังก์ชันการค้นหาการเติมข้อความอัตโนมัติของ Google

ตัวอย่างอื่นๆ ที่คุณอาจคุ้นเคย เช่น ความคิดเห็นบน Facebook และการถูกใจใน Instagram Ajax มีแนวโน้มที่จะทำงานทุกที่ที่คุณสามารถโต้ตอบกับหน้าเว็บและรับข้อมูลกลับมาได้ทันที

เริ่มต้นใช้งาน Ajax ใน WordPress

เมื่อพูดถึง WordPress มีบางวิธีที่ Ajax มีประโยชน์ ขั้นแรก เราจะดูที่ Ajax URL และวิธีใช้งานควบคู่ไปกับฟังก์ชัน hooks ของ WordPress

Ajax URL ใน WordPress

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

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

วิธีใช้ Ajax Action Hook ใน WordPress

WordPress ใช้ hooks ในการเขียนโปรแกรม เป็นวิธีสำหรับปลั๊กอินและธีมในการโต้ตอบกับ WordPress Core Hooks มีสองแบบ: 'การกระทำ' และ 'ตัวกรอง' ด้วย Ajax คุณจะใช้ action hook เพื่อเรียกใช้ฟังก์ชันต่างๆ

การดำเนินการช่วยให้คุณสามารถเพิ่มข้อมูลลงใน WordPress หรือเปลี่ยนวิธีการทำงานของมันได้ ด้วย Ajax คุณจะใช้การกระทำ wp_ajax_(การกระทำ) จากนั้นสามารถเชื่อมต่อฟังก์ชั่นที่กำหนดเองเข้ากับสิ่งนี้เพื่อดำเนินการระหว่างการโทร Ajax

ตัวอย่างเช่น โค้ดตัวอย่าง WordPress นี้แสดงวิธีการรวมการเรียก Ajax และวัตถุ JavaScript ในไฟล์เดียวกันเพื่อดำเนินการ:

<?php

add_action( 'wp_ajax_my_action', 'my_action' );

ฟังก์ชัน my_action() {
$wpdb ทั่วโลก; // นี่คือวิธีที่คุณเข้าถึงฐานข้อมูล

$อะไรก็ตาม = intval( $_POST['อะไรก็ตาม'] );

$อะไรก็ตาม += 10;

echo $อะไรก็ได้;

wp_die(); // สิ่งนี้จำเป็นต้องยุติทันทีและส่งคืนการตอบกลับที่เหมาะสม
}

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

วิธีใช้ Ajax โดยทำงานกับปลั๊กอินตัวอย่าง (3 ขั้นตอน)

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

ขั้นตอนที่ 1: สร้างโครงสร้างไฟล์ที่เหมาะสม

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

เมื่อคุณตัดสินใจเลือกชื่อได้แล้ว คุณต้องสร้างไฟล์อย่างน้อยสามไฟล์ต่อไปนี้ในไดเร็กทอรี wp-content/plugins/ ของคุณเอง:

• plugin-name.php
• plugin-name.js
• plugin-name.css

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

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

ขั้นตอนที่ 2: เลือกโค้ดตัวอย่างบางส่วนเพื่อเริ่มต้น

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

ดังที่เราได้กล่าวไว้ก่อนหน้านี้ เราจะใช้ WordPress Plugin Boilerplate สำหรับตัวอย่างของเรา โค้ดตัวอย่างนี้มาพร้อมกับไฟล์ที่คุณต้องใช้ในการทำปลั๊กอินให้สมบูรณ์

ปลั๊กอินตัวอย่างนี้ยังเป็นไปตามมาตรฐานการเขียนโค้ดและเอกสารประกอบของ WordPress คุณสามารถดาวน์โหลดไฟล์ .zip ของปลั๊กอินได้จากเว็บไซต์ต้นแบบเพื่อเริ่มต้น

ขั้นตอนที่ 3: เชื่อมโยงการกระทำเข้ากับรหัสของคุณ

โค้ดตัวอย่างปลั๊กอินที่เราใช้สร้างขึ้นด้วย Object-Oriented Programming (OOP) ซึ่งช่วยให้โปรแกรมเมอร์จัดระเบียบโค้ดของตน และสร้างรูปแบบการพัฒนาที่แชร์ได้ง่ายและใช้ซ้ำได้

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

มาดูตัวอย่างปลั๊กอินของเรากัน โดยดูที่ส่วนเริ่มต้นของไฟล์ plugin-name.php :

<?php

/**
* ไฟล์บูตสแตรปของปลั๊กอิน
*
* ไฟล์นี้ถูกอ่านโดย WordPress เพื่อสร้างข้อมูลปลั๊กอินในปลั๊กอิน
* พื้นที่ผู้ดูแลระบบ ไฟล์นี้ยังรวมถึงการอ้างอิงทั้งหมดที่ใช้โดยปลั๊กอิน
* ลงทะเบียนฟังก์ชันการเปิดใช้งานและการปิดใช้งาน และกำหนดฟังก์ชัน
* ลงทะเบียนฟังก์ชันการเปิดใช้งานและการปิดใช้งาน และกำหนดฟังก์ชัน
* ที่เริ่มปลั๊กอิน
*
* @ลิงค์ http://example.com
* @ตั้งแต่ 1.0.0
* @package Plugin_Name
*
* @wordpress-ปลั๊กอิน
* ชื่อปลั๊กอิน: ปลั๊กอิน WordPress Boilerplate
* URI ของปลั๊กอิน: http://example.com/plugin-name-uri/
* คำอธิบาย: นี่คือคำอธิบายสั้น ๆ เกี่ยวกับการทำงานของปลั๊กอิน จะแสดงในพื้นที่ผู้ดูแลระบบของ WordPress
* เวอร์ชัน: 1.0.0
* ผู้แต่ง: ชื่อของคุณหรือบริษัทของคุณ
* URI ผู้เขียน: http://example.com/
* ใบอนุญาต: GPL-2.0+
* URI ใบอนุญาต: http://www.gnu.org/licenses/gpl-2.0.txt
* โดเมนข้อความ: ชื่อปลั๊กอิน
* เส้นทางโดเมน: /languages
*/

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

ตอนนี้คุณจะต้องทำบางสิ่งเพื่อเชื่อมต่อจุดทั้งหมด รวมถึง:

• ตรวจสอบให้แน่ใจว่า Ajax URL ของคุณใช้ได้กับสคริปต์ของคุณ คุณสามารถใช้ wp_localize_script() เพื่อทำสิ่งนั้นให้สำเร็จ
• สร้างคลาสชื่อปลั๊กอินด้วยคลาส Plugin-Name{} ในไฟล์ plugin-name.php ของคุณ นี่คือที่ที่คุณจะกำหนดการกระทำของคุณ
• สร้างฟังก์ชัน JavaScript ที่เกี่ยวข้องในไฟล์ plugin-name.js ของคุณ

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

ถ้า ( is_admin() ) {
add_action( 'wp_ajax_my_frontend_action', 'my_frontend_action' );
add_action( 'wp_ajax_nopriv_my_frontend_action', 'my_frontend_action' );
add_action( 'wp_ajax_my_backend_action', 'my_backend_action' );
// เพิ่ม back-end action hook อื่นๆ ที่นี่
} อื่น {
// เพิ่ม hooks การดำเนินการส่วนหน้าที่ไม่ใช่ Ajax ที่นี่
}

ลองสังเกตบางสิ่งในตัวอย่างนี้ ประการแรก การกระทำเหล่านี้จะใช้ได้กับทุกคนบนไซต์ ไม่ว่าพวกเขาจะลงชื่อเข้าใช้บัญชีหรือไม่ก็ตาม ที่ระบุโดยการเรียก 'wp_ajax_nonpriv_()' ประการที่สอง คุณจะเห็นว่ายังมีส่วนหลัง การดำเนินการด้านการดูแลระบบที่เชื่อมโยงระหว่างการดำเนินการส่วนหน้า

เพื่อทำความเข้าใจกระบวนการที่เกิดขึ้นในการดำเนินการชุดนี้ สิ่งสำคัญคือต้องทราบด้วยว่า my_frontend_action จะเรียกใช้ฟังก์ชัน PHP my_frontend_action_callback()

ขั้นตอนที่ 4: ทดสอบและดีบักปลั๊กอินของคุณ

เมื่อคุณตั้งค่า action hook และฟังก์ชันที่เกี่ยวข้องทั้งหมดที่คุณต้องการแล้ว คุณจะต้องทดสอบและแก้ไขจุดบกพร่องของปลั๊กอินของคุณ (หากมีปัญหาใดๆ) โฮสต์เว็บของคุณอาจมีเครื่องมือดีบั๊กซึ่งเป็นส่วนหนึ่งของแพ็คเกจโฮสติ้ง

ที่ WP Engine เรามีบันทึกข้อผิดพลาดของ WP Engine เพื่อช่วยคุณค้นหาจุดที่เกิดปัญหา

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

สำรวจทรัพยากรและเครื่องมือ WP Engine อื่นๆ

ตอนนี้คุณกำลังจะสร้างปลั๊กอิน WordPress ที่ยอดเยี่ยมด้วย Ajax คุณอาจต้องการประเมินเครื่องมืออื่นๆ ที่คุณต้องการ WP Engine นำเสนอ Digital Experience Platform (DXP) ที่สมบูรณ์ และพร้อมช่วยคุณสร้างปลั๊กอินใหม่สำหรับ WordPress

ไม่ว่าคุณจะสนใจ WP Engine Error Log เพื่อให้คุณสามารถเรียกใช้ปลั๊กอินที่ปราศจากข้อบกพร่อง หรือคุณต้องการเพียงแค่โฮสติ้ง WordPress ที่มั่นคงและปลอดภัย เราก็เสนอแผนและทรัพยากรที่หลากหลายให้คุณใช้!