เชื่อว่าหลายคนที่เคยทำ Blog มาแล้วก็น่าจะรู้จักดีกับเจ้า Wordpress นี้ และก็อาจจะมีอีกหลายคนที่ขัดใจกับการจัดการหน้า Front end เพราะว่าจะสามารถจัดการได้ตาม Features ของ Template นั้นๆ และอาจจะมีบางคนที่คิดว่าไม่ใช้ Wordpress ละ ทำเองหมดเลยดีกว่า ซึ่งผลก็คือแค่ทำ Backoffice ก็กินเวลามากๆ แล้ว ดังนั้นในบทความนี้ก็เลยอยากจะมาแนะนำว่าให้เจอกันคนละครึ่งทางดีกว่า ฮ่าๆ ซึ่งนั้นก็คือการทำ Wordpress API ครับ

ติดตั้ง Wordpress

ก่อนอื่นเลยเริ่มจากการติดตั้ง Wordpress ผมจะะไม่พูดถึงขั้นตอนการติดตั้งพวก database หรือ Environment ต่างๆ ที่ใช้ในการทำงานของ Wordpress นะครับ

ขั้นตอนการติดตั้งก็ไม่ยากครับ ทำตามนี้เลยครับ

1. กรอกข้อมูลสำหรับ Connect database
2. เลือกภาษาที่จะใช้
3. สร้าง User และข้อมูลพื้นฐานโดยตรงนี้จะต้องติ๊กถูกที่ Search Engine Visibility ครับ เพื่อไม่ให้ Bot ของ Search engine ต่างมาเก็บข้อมูลของเว็บไซต์เราจาก Wordpress ครับ เพราะเราต้องการแค่ให้ Wordpress เป็นแค่ Backoffice ครับ ส่วยหน้า Front end เราจะทำเอง

เมื่อเสร็จแล้วก็สามารถ Login เข้าสู่หน้า Manager ได้เลยครับ

เริ่มการใช้งาน API กันเลยดีกว่า

เมื่อติดตั้งเสร็จแล้วก็มาลองใช้งาน API กันเลยดีกว่า ซึ่งต้องบอกก่อนนะครับว่าตอนนี้ผมรันอยู่ที่ http://localhost:8585 เอาล่ะครับลองเข้า http://localhost:8585/wp-json/wp/v2/posts เมื่อเข้ามาแล้วจะเจอหน้า 404 ครับ

ไม่ต้องตกใจนะครับ เพราะว่าตอนนี้เรายังไม่ได้ตั้งค่า Permalink ดังนั้นก็ไปหน้า Permalink Setting กันเลยครับ

เข้าไปที่ Setting->Permalinks

ให้สังเกตุส่วนของ Common Settings ค่า Default ของ Wordpress จะเป็น Plain ให้เราเปลี่ยนเป็น Post name ครับตามรูปด้านล่างเลยครับ

พอกด Save Change ก็ลองทดสอบ API กันเลยครับ เหมือนเดิมครับเข้าไปที่ http://localhost:8585/wp-json/wp/v2/posts ผลประกฎว่า

เย้!! เราสามารถใช้ Wordpress API ได้แล้ว Wordpress มีอะไรให้ใช้บ้างลองเข้าไปอ่าน Documents เพิ่มเติมได้ครับ https://developer.wordpress.org/rest-api/

แม้ว่าตอนนี้เราสามารถใช้ API ได้แล้ว แต่ว่ายังเป็น API ที่ไม่สมบูรณ์ครับ ถ้าจะให้สมบูรณ์ต้องมีอะไรบ้าง

• สำหรับ SEO ก็ต้อง Yoast SEO Plugin
• ต้อง Resize รูป เพื่อ Performance สำหรับหน้าเว็บไซต์

ถ้าได้ 2 ข้มนี้ก็จะพอเป็น API ที่สมบูรณ์ได้แล้วครับ

ก่อนอื่นมาเริ่มที่ Yoast SEO เลยครับ

ติดตั้ง Yoast SEO Plugin และ WP API Yoast SEO Plugin

เข้า Plugins->Add New แล้วค้นหาคำว่า Yoast SEO ครับ จากนั้นให้กด Install แล้วกด Activate

จากนั้นลองสร้าง Post ใหม่ซัก 1 Post ครับ จะมี Yoast SEO เพิ่มเข้ามาตรงด้านล่างของ Content เราสามารถกำหนดค่าสำหรับ SEO ได้แล้ว

แต่เมื่อลองเข้า http://localhost:8585/wp-json/wp/v2/posts จะยังไม่เห็นข้อมูลของ Yoast SEO เลย ดังนั้นเราต้องทำการติดตั้ง WP API Yoast SEO ก่อนครับ แต่เจ้า Plugin ตัวนี้ไม่มีให้โหลดในหน้า Admin ของ Wordpress นะครับ เราจะต้อง Upload Plugin เอง โดยทำตามนี้ได้เลยครับ

1. โหลด Plugin ที่ https://th.wordpress.org/plugins/wp-api-yoast-meta/
2. Upload Plugin ที่เราโหลดมาและทำการ Install และกด Activate ได้เลยครับ เพียงเท่านี้ก็ติดตั้งเรียบร้อยแล้วครับ

เมื่อติดตั้งเจ้า WP API Yoast SEO เรียบร้อยแล้วก็ลองยิง API อีกรอบครับ จะเห็นว่ามี Key ที่ชื่อว่า "yoast" มาแล้ว เท่านี้ก็ได้ข้อมูลสำหรับทำ Meta tag SEO แล้วครับ

ติดตั้ง Better REST API Featured Images Plugin

เมื่อลองยิง http://localhost:8585/wp-json/wp/v2/posts แล้วเราจะยังไม่เห็นข้อมูลของรูปภาพเลยใช่มั้ยครับ อย่างนั้นลองยิงดู Media ครับ http://localhost:8585/wp-json/wp/v2/media จะเห็นข้อมูล Media ที่เราอัพโหลดไป ซึ่งต้องบอกเลยครับว่าการ Handle ส่วนของ Media ของ Wordpress นั้นดีมากๆ เลยทีเดียวครับ และยังมี Resizer Image ให้เราด้วย เพื่อการเพิ่มประสิทธิภาพการแสดงผลหน้าเว็บไซต์ แต่ตอนนี้เราติดปัญหาที่ว่าตอนเราดึงข้อมูล Posts เราจะยังไม่ได้ข้อมูล Media ติดมาด้วย ดังนั้นเราต้องติดตั้งเจ้าตัว Better REST API Featured Images Plugin ก่อนครับ ทำตามนี้เลยครับ

1. เหมือนเดิมครับต้อง Download Plugin ที่ https://wordpress.org/plugins/better-rest-api-featured-images/
2. Upload Plugin และทำการ Install และกด Activate ได้เลยครับ
3. ลองดึงข้อมูล Posts จาก http://localhost:8585/wp-json/wp/v2/posts จะเห็น Key ชื่อว่า "better_featured_image" แล้วครับและสังเกตุตรง Key ชื่อว่า "sizes" จะมีรูปแต่ละขนาดที่ทำการ Resized แล้วให้เราครับ ตรงนี้ผมชอบมากๆ

เพียงแค่นี้เราก็จะได้ข้อมูลรูปภาพมาแล้วครับ ซึ่งข้อมูลทั้งหมดนี้ก็เพียงพอที่จะนำไปใช้งานกับ Front end แล้วครับ

สุดท้ายแล้ว!! มีของแถมเล็กๆ น้อยๆ ครับ

สำหรับ REST API แล้วการที่จะเอาทุก Fields มาใช้งานนั้น จะค่อนข้างเป็นข้อมูลก้อนใหญ่ครับ ดังนั้นเราควรเลือกเฉพาะ Fields ที่เราต้องการเท่านั้นครับ ทาง Wordpress เค้าก็เตรียมพร้อมมาให้เราแล้วครับ เพียงแค่เราเพิ่ม Query String ชื่อว่า _fields[] ใน URL เราก็จะได้เพียงแค่ Fields นั้นที่เราต้องการครับ

ตัวอย่างการใช้งาน

http://localhost:8585/wp-json/wp/v2/posts?_fields[]=id&_fields[]=title&_fields[]=slug

และผลลัพธ์ก็จะได้

เป็นไงบ้างครับ หาดต้องการทำหน้า Front end เองแต่ไม่อยากเสียเวลาในการทำ Backoffice ก็ลองนำ Wordpress API มาปรับแต่งดูครับ บางทีอาจจะตอบโจทย์เราก็เป็นได้