วิธีใช้ WordPress เป็น Back End: แหล่งข้อมูลสำหรับการเริ่มต้นใช้งาน REST API

เผยแพร่แล้ว: 2019-06-23

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

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

ไปกันเถอะ!

บทนำสู่ WordPress REST API

มีบทความมากมายที่อธิบายว่า WordPress REST API คืออะไร – เราได้กล่าวถึงก่อนหน้านี้แล้ว – ดังนั้นเราจะเก็บบทสรุปนี้ไว้เพื่อหลีกเลี่ยงการทำซ้ำ พูดง่ายๆ คือ Application Programming Interface (API) คือสิ่งที่เปิดใช้งานการเชื่อมต่อระหว่างอุปกรณ์ แอปพลิเคชัน และข้อมูลต่างๆ

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

Representational State Transfer (REST) ​​เป็น 'รูปแบบสถาปัตยกรรม' หรือประเภทของ API ได้รับการออกแบบมาให้มีน้ำหนักเบาและต้องใช้แบนด์วิดท์น้อยที่สุดเมื่อใช้งาน เมื่อใช้ REST API คุณสามารถสร้างคำขอพื้นฐานได้สี่ประเภท:

  • GET : ดึงข้อมูลจากอุปกรณ์ แอปพลิเคชัน หรือฐานข้อมูลที่คุณกำลังสื่อสารด้วย
  • POST : เพิ่มข้อมูลลงในอุปกรณ์ แอปพลิเคชัน หรือฐานข้อมูลที่คุณกำลังสื่อสารด้วย
  • PUT : อัปเดตข้อมูลที่มีอยู่แล้วบนอุปกรณ์ แอปพลิเคชัน หรือฐานข้อมูลที่คุณกำลังสื่อสารด้วย
  • ลบ : ลบข้อมูลออกจากอุปกรณ์ แอปพลิเคชัน หรือฐานข้อมูลที่คุณกำลังสื่อสารด้วย

WordPress REST API ใช้ JavaScript Object Notation (JSON) เพื่อส่งคืนข้อมูล ดังนั้น เมื่อคุณรวมทั้งหมดนี้เข้าด้วยกัน คุณจะได้รับวิธีการ ง่ายๆ ใน การสื่อสาร คำขอ GET , POST , PUT และ DELETE ระหว่างเว็บไซต์ WordPress และแพลตฟอร์มอื่นๆ ผ่านการใช้ JSON

ทำความเข้าใจว่า WordPress REST API ทำอะไรได้บ้าง

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

  • กำลังซิงค์เนื้อหา คุณสามารถใช้ REST API เพื่อเปิดใช้งานไซต์ WordPress ต่างๆ เพื่อสื่อสารระหว่างกันได้ ตัวอย่างเช่น คุณสามารถทดสอบการออกแบบเว็บไซต์ใหม่โดยซิงค์เนื้อหาระหว่างไซต์ปัจจุบันของคุณกับเวอร์ชันที่ออกแบบใหม่
  • เนื้อหาที่เผยแพร่ ในทำนองเดียวกัน คุณยังสามารถรวมเนื้อหาจากเว็บไซต์ต่างๆ ได้ ทำธุรกิจที่มีสถานที่ตั้งหลายแห่ง โดยแต่ละแห่งมีไซต์ของตนเอง คุณสามารถรวมเนื้อหาจากทั้งสามไปยังไซต์อื่นที่ครอบคลุมได้
  • การตั้งค่าข้อมูล WordPress Google ชีต เมื่อใช้ REST API คุณสามารถเชื่อมต่อไซต์ WordPress และ Google ชีตได้ วิธีนี้จะช่วยคุณจัดระเบียบโพสต์ในสเปรดชีตเพื่อให้ทันกับการอัปเดตเนื้อหา
  • การสร้างแอพมือถือ ด้วยการเชื่อมต่อไซต์ WordPress ของคุณกับส่วนหน้าของแอปที่กำหนดเอง คุณสามารถสร้างแอปบนอุปกรณ์เคลื่อนที่เพื่อเสริมไซต์เดสก์ท็อปของคุณได้ สิ่งนี้มีประโยชน์สำหรับสถานการณ์ต่างๆ เช่น การสร้างเวอร์ชันแอปของร้านค้า WooCommerce
  • ใช้ WordPress 'หัวขาด' หากตัวเลือกการแสดงผลส่วนหน้าสำหรับ WordPress ไม่ได้ทำเพื่อคุณ REST API จะช่วยให้คุณใช้ WordPress สำหรับการสร้างและจัดการเนื้อหาทั้งหมดของคุณในขณะที่ให้บริการเนื้อหาแก่ผู้ใช้บนเว็บไซต์ที่กำหนดเองหรือส่วนหน้าของเว็บแอป สิ่งนี้เรียกว่า WordPress 'หัวขาด'

การค้นหาโดย Google อย่างรวดเร็วจะทำให้มีการใช้ WordPress REST API ในรูปแบบอื่นๆ อีกมากมาย อย่างไรก็ตาม สำหรับส่วนที่เหลือของโพสต์นี้ เราจะเน้นที่การใช้ WordPress เป็นแบ็คเอนด์สำหรับแอปหรือเว็บไซต์

วิธีใช้ WordPress เป็น Back End (ใน 3 ขั้นตอน)

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

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

ขั้นตอนที่ 1: โหลดเนื้อหาลงใน WordPress และทดสอบ REST API

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

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

เมื่อคุณเตรียมทุกอย่างเรียบร้อยแล้ว คุณอาจต้องการทำการทดสอบเพื่อดูว่า WordPress REST API ทำงานอย่างไร โชคดีที่คุณทำได้ในเบราว์เซอร์ของคุณ เพียงพิมพ์โดเมนของคุณตามด้วย wp-json/wp/v2/posts:

JSON กลับมาหลังจากขอโพสต์ทั้งหมดผ่าน WordPress REST API

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

สรุปขั้นตอนนี้:

  1. ขั้นแรก เราตั้งค่าการติดตั้ง WordPress เพื่อทำหน้าที่เป็นส่วนหลังสำหรับแอพ/เว็บไซต์ของเรา
  2. เราสร้างเนื้อหาที่เราต้องการแสดงบนส่วนหน้าของโปรเจ็กต์ของเราใน WordPress เป็นโพสต์ หน้า ฯลฯ
  3. หากต้องการดูการทำงานของ REST API เราส่งคืน JSON สำหรับโพสต์ทั้งหมดของเราภายในเบราว์เซอร์

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

ขั้นตอนที่ 2: ตั้งค่าส่วนหน้าของแอปหรือเว็บไซต์ของคุณโดยใช้ React

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

หน้าแรกของ React

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

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

ขั้นตอนที่ 3: เชื่อมต่อ WordPress Back End กับ Front End

ถึงตอนนี้ คุณควรจะมีส่วนหลังของ WordPress และส่วนหน้าของ React (หรืออื่นๆ) ตอนนี้ คุณเพียงแค่ต้องให้พวกเขาคุยกันเพื่อให้ข้อมูลจาก WordPress แสดงผลในแอปหรือเว็บไซต์ของคุณ นี่คือที่มาของ WordPress REST API

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

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

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

เมื่อคุณใช้ WordPress REST API เพื่อรับเนื้อหาทั้งหมดของคุณไปยังส่วนหน้าของคุณแล้ว คุณสามารถเริ่มต้นสร้างส่วนประกอบเพิ่มเติม (และซับซ้อนมากขึ้น) จากนั้นปรับแต่งส่วนหน้าของไซต์ของคุณเพิ่มเติม – ทั้งหมดในขณะที่ใช้ WordPress เพื่อ สร้างและจัดการเนื้อหาต่อไป

บทสรุป

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

โพสต์นี้มีขั้นตอนพื้นฐานที่เข้าใจง่ายสำหรับการใช้ WordPress เป็นแบ็กเอนด์ มาสรุปกันอย่างรวดเร็ว:

  1. โหลดเนื้อหาลงใน WordPress และทดสอบ REST API
  2. ตั้งค่าส่วนหน้าของแอพหรือเว็บไซต์ของคุณโดยใช้ React
  3. เชื่อมต่อ WordPress ของคุณกับส่วนหน้า React ของคุณ

คุณมีคำถามใด ๆ เกี่ยวกับ REST API หรือใช้ WordPress เป็นแบ็คเอนด์หรือไม่? ถามพวกเขาในส่วนความคิดเห็นด้านล่าง!

ภาพขนาดย่อของบทความ Jesus Sanz / shutterstock.com