WordPress Ajax พื้นฐาน และแนวทางการเขียน

ธีม Seed ในชุด Seed Kit สำหรับทำเว็บ ออกเวอร์ชั่น 2.0 แล้ว ในเวอร์ชั่นนี้ได้นำเอา jQuery ออกไปเรียบร้อยแล้ว ถ้าหากเราต้องใช้ Ajax ของเวิร์ดเพรสส์ มีแนวทางในการเขียนอย่างไรบ้าง

พื้นฐานการเขียน WordPress Ajax

ตั้งแต่ Ajax ได้ถูกรวมเข้ามาในฟังก์ชั่นการทำงานหลักของเวิร์ดเพรสส์แล้วนั้น ทำให้เราสามารถเขียน Function Hooks เพื่อเพิ่มประสิทธิภาพการทำงานให้กับเวิร์ดเพรสส์ได้มากยิ่งขึ้น

ถ้าหากสงสัยว่า Function Hooks คืออะไร? สามารถอ่านรายละเอียดเพิ่มเติมได้ที่ลิ้งก์นี้ได้เลย What is: Hooks

ก่อนจะไปถึงเรื่องการโค้ดมีเรื่องที่เราต้องทำความเข้าใจก่อน 2 เรื่อง คือ

  • admin-ajax.php คือ ไฟล์ php ที่เราต้องส่งข้อมูลไปให้
  • wp_ajax_ คือ ชื่อฟังก์ชั่นที่บอกว่า Function Hook นี้ สำหรับเรียกข้อมูลแบบ Ajax

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

  • เมื่อผู้ใช้ Login จะแสดง Display Name
  • เมื่อผู้ใช้ Logout จะแสดงข้อความ Not Login

เมื่อได้โจทย์แล้ว ก็มาถึงเวลาลงมือทำกันได้เลย อ่านมาตั้งนาน ไม่ได้เริ่มทำสักที

สร้างฟังก์ชั่นสำหรับ Ajax Request

เราจะสร้างฟังก์ชั่นง่าย ๆ โดยไม่ต้องสร้างปลั๊กอินขึ้นมา แต่จะเขียน Function Hooks ผ่านไฟล์ funcion.php ของธีมนะครับ โดยเข้าไปที่ /wp-content/themes/berry/funcion.php จัดการก๊อปปี้โค้ดด้านล่างนี้ไปวางแล้วกดเซฟได้เลยครับ

add_action( 'wp_ajax_test_ajax_request', function() {
    wp_send_json_success( 'Logged in' );
   // Always die in functions echoing ajax content
   die();
});

ทดสอบการทำงานของ WordPress Ajax

เราสามารถทดสอบฟังก์ชั่นที่เขียนผ่าน Browser ได้เลย ตามตัวอย่างด้านล่างนี้

https://s190111.todsorb.com/wp-admin/admin-ajax.php?action=test_ajax_request

หน้าตาของผลลัพธ์ก็จะออกมาประมาณนี้

เย้ ผลลัพธ์ของฟังก์ชั่นทำงานตามที่เขียนไว้เลย ทีนี้เราทดสอบผลลัพธ์เบื้องต้นได้แล้ว แต่โจทย์ของเราคือ แสดง Display Name ของคนที่ Loged In แล้วเราจะเขียนยังไงล่ะ?

wp_get_current_user()

ใน WordPress มีฟังก์ชั่นที่ชื่อว่า wp_get_current_user() ให้เราใช้ สามารถนำมาใช้งานได้เลย ฟังก์ชั่นนี้เป็นฟังก์ชั่นที่อยู่ในรูปแบบของ Object ในบทความนี้ผมจะไม่เขียนถึงเรื่อง Object Functions ของ PHP ว่าคืออะไรนะครับ เพราะจะกลายเป็นการออกนอกเรื่องเกินไป

ทีนี้เราจะแก้ไขโค้ดเดิมของเรานิดหน่อย เพื่อดูว่าฟังก์ชั่นนี้ของเวิร์ดเพรส เตรียมข้อมูลอะไรไว้ให้เราบ้าง?

add_action( 'wp_ajax_test_ajax_request', function() {
    $current_user = wp_get_current_user();
    wp_send_json_success( $current_user );
   // Always die in functions echoing ajax content
   die();
});

อธิบายโค้ดด้านบน ผมประกาศตัวแปลที่ชื่อว่า $current_user ไว้รับฟังก์ชั่น wp_get_current_user() ที่เวิร์ดเพรสเตรียมไว้ให้แล้ว

wp_send_json_success() เป็นฟังก์ชั่นของเวิร์ดเพรสที่จะส่งข้อมูลกลับไปให้ Ajax Request ในรูปแบบของ JSON( JavaScript Object Notation ) ซึ่งในบทความนี้เราจะไม่พูดถึงเรื่อง JSON เพราะจะกลายเป็นการออกนอกเรื่องเกินไปอีกนั่นแหละ ทีนี้เรามาดูผลลัพธ์กันเถอะ!!!

จากรูปด้านบนจะเห็นว่าเวิร์ดเพรสเตรียมข้อมูลอะไรไว้ให้เราใช้งานบ้าง แต่ทีนี้เราจะเอาเฉพาะส่วนที่อยู่ใน Data ก็พอ เมื่อมีคน Request ข้อมูลผ่าน Ajax เราจะส่งข้อมูล display_name กลับไป ตามโจทย์ที่เราตั้งไว้ในตอนแรก เราก็จะแก้ไขข้อมูลนิดหน่อยก่อนส่งข้อมูลกลับไป ตามโค้ดตัวอย่างด้านล่างนี้

add_action( 'wp_ajax_test_ajax_request', function() {
    $current_user = wp_get_current_user();
    wp_send_json_success( $current_user->display_name );
   // Always die in functions echoing ajax content
   die();
});

เราก็จะได้ข้อมูล Display Name ตามโจทย์ที่เราตั้งไว้ในตอนแรกตามรูปตัวอย่างด้านล่างนี้

ทีนี้เราได้ข้อมูลของคนที่ Logged-in มาแล้ว ถ้าหากเป็นคนที่ไม่ได้ Logged-in ล่ะ จะทำยังไง?

AJax Action Hook

สำหรับการเขียน Ajax Action Hook ในเวิร์ดเพรสนั้น เวิร์ดเพรสได้เตรียมไว้ให้เรา 2 ฟังก์ชั่น นั่นก็คือ

  • wp ajax (action) สำหรับผู้ใช้ที่ยืนยันตัวตนเรียบร้อยแล้ว
  • wp_ajax_nopriv_{$_REQUEST[‘action’]} สำหรับผู้ใช้ที่ยังไม่ได้ยืนยันตัวตน

จะเห็นได้ว่าในตอนแรกเราใช้ฟังก์ชั่น wp ajax (action) กัน คือผ่านการยืนยันตัวตนด้วยการเข้าสู่ระบบหลังบ้านของเวิร์ดเพรสเรียบร้อยแล้ว( /wp-admin ) ถึงสามารถใชังานฟังก์ชั่นต่าง ๆ ของเวิร์ดเพรสได้เช่น wp_get_current_user() ที่จะเป็นฟังก์ชั่นสำหรับแสดงข้อมูลของเราที่ Logged-in อยู่

แต่ว่าฟังก์ชั่น wp_ajax_nopriv_{$_REQUEST[‘action’]} นั่นใช้สำหรับผู้ใช้ที่ยังไม่ได้ยืนยันตัวตนแล้วเรียกข้อมูลแบบ Ajax Request มา เราจะสามารถตอบกลับไปได้ว่า Not Logged-in ได้ มาเริ่มกันเลยดีกว่า

add_action( 'wp_ajax_nopriv_test_ajax_request', function() {
    wp_send_json_success( 'Not Login' );
   // Always die in functions echoing ajax content
   die();
});

มาลองทดสอบผลลัพธ์กันเถอะ!!!

Logout User Call Ajax Request
Google Chrome Incognito Mode Call Ajax Request
Postman Call Ajax Request

จากการทดสอบเรียกข้อมูลจาก 3 ช่องทาง ก็ได้ผลลัพธ์เหมือนกันนั่นก็คือ Not Login เราก็ชัวร์แล้วว่าถ้าผู้ใช้ที่ไม่ได้ Logged-in จะไปเรียก Ajax Action Hook ที่ชื่อว่า wp_ajax_nopriv_{$_REQUEST[‘action’]} ซึ่งบทความต่อไป เราจะมาเขียน WordPress Ajax กันแบบใช้งานจริงกัน มาดูกันว่ามีแนวทางการเขียนยังไงบ้าง? ซึ่งบทความนี้ผมก็ขอจบการปูพื้นฐานไว้เพียงเท่านี้ก่อนนะครับ

ขอให้สนุกกับการเขียนโค้ดครับ

Coding have fun

หมายเหตุ: คำถามผ่านเฟซบุคอาจมีการตกหล่น แนะนำให้ติดต่อผ่าน อินบ๊อกซ์ หรือ เว็บบอร์ด นะครับ