WordPress ไร้หัวคืออะไร? จะสร้างได้อย่างไร? [บทช่วยสอน]

เผยแพร่แล้ว: 2024-03-04

สารบัญ
WordPress ไร้หัวคืออะไร?
ข้อดีและข้อเสียของ WordPress CMS ที่ไม่มีส่วนหัวคืออะไร?
WordPress ที่ไม่มีหัวมีข้อจำกัดอะไรบ้าง?
WordPress ที่ไม่มีหัวดีหรือไม่?
WordPress ไร้หัวทำงานอย่างไร?
ฉันจะทำให้ WordPress ไร้หัวได้อย่างไร (บทช่วยสอน WordPress ที่ไม่มีหัว)
ตัวอย่าง WordPress ที่ไม่มีหัว
การไม่มีหัวดีต่อ SEO หรือไม่?
บทสรุป
คำถามที่พบบ่อย

WordPress ไร้หัวคืออะไร?

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

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


ข้อดีและข้อเสียของ WordPress CMS ที่ไม่มีส่วนหัวคืออะไร?

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

ข้อดี ข้อเสีย
1. สถาปัตยกรรมแบบแยกส่วนช่วยให้มีความยืดหยุ่นมากขึ้นในการพัฒนาส่วนหน้า 1. เส้นโค้งการเรียนรู้ที่สูงชันสำหรับนักพัฒนา
2. ความสามารถในการใช้ประโยชน์จากคุณสมบัติการจัดการเนื้อหาแบ็กเอนด์ที่แข็งแกร่งของ WordPress 2. ต้องมีการตั้งค่าและการกำหนดค่าเพิ่มเติม
3. บูรณาการอย่างราบรื่นกับปลั๊กอิน WordPress และระบบนิเวศ 3. การสนับสนุนที่จำกัดเมื่อเทียบกับ WordPress แบบดั้งเดิม
4. ปรับปรุงประสิทธิภาพเนื่องจากโหลดเซิร์ฟเวอร์ลดลง 4. ความซับซ้อนที่อาจเกิดขึ้นในการจัดการหลายระบบ
5. เพิ่มความปลอดภัยโดยลดพื้นผิวการโจมตีที่ส่วนหน้า 5. ต้นทุนการพัฒนาและบำรุงรักษาเพิ่มขึ้น
6. ตัวเลือกการปรับขนาดและการเพิ่มประสิทธิภาพที่ดีขึ้น 6. การพึ่งพาเครื่องมือและบริการของบุคคลที่สาม
ข้อดีและข้อเสียของ WordPress ที่ไม่มีหัว

WordPress ที่ไม่มีหัวมีข้อจำกัดอะไรบ้าง?

ไม่ว่าข้อดีของการตั้งค่า Headless WordPress จะบดบังข้อเสียก็ตาม แต่ก็มีข้อจำกัดบางประการของ WordPress แบบ headless ที่คุณต้องจำไว้:

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

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


WordPress ที่ไม่มีหัวดีหรือไม่?

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

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

WordPress ไร้หัวทำงานอย่างไร?

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

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

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

เป็นอินเทอร์เฟซการเขียนโปรแกรมที่ช่วยให้นักพัฒนาสามารถเข้าถึงและโต้ตอบกับข้อมูลเว็บไซต์ WordPress โดยใช้วิธี HTTP มาตรฐาน

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


ฉันจะทำให้ WordPress ไร้หัวได้อย่างไร (บทช่วยสอน WordPress ที่ไม่มีหัว)

มีหลายวิธีในการแยก WordPress มาตรฐาน ขึ้นอยู่กับเทคโนโลยีที่คุณจะใช้ ทรัพยากร ภาษาที่ต้องการ และเฟรมเวิร์ก ไม่ว่าจะใช้วิธีใดก็ตาม คุณควรคุ้นเคยกับภาษาส่วนหน้าและ WordPress Rest API

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

ขั้นตอนที่ 1: ตั้งค่า WordPress

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

แต่การเลือกแพลตฟอร์มโฮสติ้ง WordPress ที่เหมาะสมนั้นเป็นงานที่ยากมาก และยังเป็นขั้นตอนที่สำคัญมากในการตั้งค่า WordPress และสร้าง CMS ที่ไม่มีส่วนหัว

มันสำคัญมากเพราะถึงแม้ส่วนหน้าและส่วนหลังจะแยกจากกัน แต่ส่วนหลังยังคงต้องอยู่บนเซิร์ฟเวอร์ที่ต้องมีโฮสติ้ง

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

ดังนั้นจึงจำเป็นอย่างยิ่งที่จะต้องเลือกโฮสต์ที่นำเสนอประสิทธิภาพของเซิร์ฟเวอร์ Blazing Fast และความปลอดภัยที่เข้มงวดยิ่งขึ้น

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

  • โดยเฉพาะอย่างยิ่ง WPOven ให้บริการโฮสติ้งที่มีการจัดการบน Linode ผู้ให้บริการคลาวด์ระดับแนวหน้า เพื่อให้มั่นใจถึงประสิทธิภาพความเร็วสูงและความสามารถในการปรับขนาด
  • แพลตฟอร์มนี้เสนอการติดตั้งล่วงหน้า WordPress ทำให้การตั้งค่า WordPress และเครื่องมืออื่น ๆ ปราศจากความยุ่งยาก
  • นอกจากนี้ ด้วยระบบแคชขั้นสูงในตัวและเครือข่ายการจัดส่งเนื้อหา (CDN) ของ Cloudflare เนื้อหาของคุณจะถูกส่งเร็วขึ้น โดยไม่คำนึงถึงตำแหน่งของผู้ใช้
  • นอกจากนี้ WPOven ยังรับประกันความปลอดภัยที่แข็งแกร่งระดับองค์กรผ่านไฟร์วอลล์ป้องกันเว็บในตัวและการติดตั้ง SSL ซึ่งช่วยปกป้องข้อมูลแบ็กเอนด์และการโต้ตอบของคุณ
  • การสำรองข้อมูลอัตโนมัติและตัวเลือกการคืนค่าที่ง่ายดายช่วยเพิ่มการปกป้องข้อมูลอีกชั้นและความอุ่นใจ
  • นอกจากนี้ การสนับสนุนลูกค้าตลอด 24 ชั่วโมงทุกวันและฐานความรู้ที่กว้างขวางของ WPOven ช่วยให้มั่นใจได้ว่าปัญหาใดๆ ได้รับการแก้ไขอย่างรวดเร็ว ช่วยให้คุณสามารถมุ่งเน้นไปที่การสร้างและจัดการ CMS ที่ไม่มีส่วนหัวของคุณได้โดยไม่ต้องยุ่งยากกับการโฮสต์

ขั้นตอนที่ 2: เปิดใช้งาน REST API

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

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

https://example.com/wp-json/wp/v2/

เปลี่ยน 'example.com” ด้วยชื่อโดเมนจริงของคุณ และหากเปิดใช้งาน API ก็จะแสดงการตอบสนอง JSON พร้อมข้อมูลบางอย่างเกี่ยวกับโพสต์ในเว็บไซต์ของคุณ

หรือคุณสามารถรับความช่วยเหลือจากปลั๊กอิน เช่น ปลั๊กอิน WP REST API


อ่าน: WordPress REST API: คู่มือการเริ่มต้นใช้งาน


ขั้นตอนที่ 3: ดึงข้อมูลโพสต์ผ่าน API

หากคุณต้องการดึงข้อมูลโพสต์ ให้ทำตามขั้นตอนเหล่านี้:

  • เปิดแดชบอร์ด WordPress ของคุณ > การตั้งค่า > ลิงก์ถาวร และเลือกชื่อโพสต์
Headless WordPress
แดชบอร์ด WordPress
  • หลังจากนั้นคุณจะต้องดาวน์โหลดเครื่องมือทดสอบ Postman API
  • ตอนนี้ภายในเครื่องมือบุรุษไปรษณีย์ API ให้ป้อน URL ตามรูปแบบที่ระบุด้านล่าง

https://mydomain.com/wp-json/wp/v2/posts

วิธีนี้จะดึงข้อมูลโพสต์ภายในเว็บไซต์ WordPress ของคุณ

fetch the post data inside your WordPress website
ดึงข้อมูลโพสต์ภายในเว็บไซต์ WordPress ของคุณ

ขั้นตอนที่ 6: ตั้งค่าแอปพลิเคชัน React

ตอนนี้เราจัดการกับแบ็กเอนด์เสร็จแล้ว ก็ถึงเวลาเริ่มทำงานกับส่วนหน้า ขั้นแรก เราสร้าง React Application โดยรันโค้ดด้านล่างใน Terminal

npm create vite@latest my-blog-app
cd my-blog-app
npm install

คำสั่งนี้จะสร้างแอปพลิเคชัน React ใหม่โดยใช้ Vite และติดตั้งไลบรารีหรือแพ็คเกจภายนอกที่จำเป็นด้วย

นอกจากนี้คุณยังต้องรวม Axios เพื่อจัดการคำขอ HTTP ด้วย สำหรับการรันคำสั่งต่อไปนี้เพื่อติดตั้ง

npm install axios

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

เมื่อคุณรันคำสั่งนี้ มันจะเริ่มต้นเซิร์ฟเวอร์บนเครื่องของคุณ และจะทำให้แอปพลิเคชันของคุณพร้อมใช้งานที่ URL https://127.0.0.1:5173

สิ่งถัดไปที่คุณต้องทำคือเปิดโปรเจ็กต์ของคุณในโปรแกรมแก้ไขโค้ด (แล้วแต่คุณจะชอบ เช่น Visual Studio Code, Subkline Text, Atom ฯลฯ) และลบไฟล์ที่ไม่จำเป็น เช่น index.css, app.css เป็นต้น

ขั้นตอนที่ 7: ดึงโพสต์จาก WordPress

ในไฟล์ App.jsx ของคุณ ที่ด้านบน ให้นำเข้า useState hook จากไลบรารี React สิ่งนี้ทำให้คุณสามารถใช้สถานะในองค์ประกอบการทำงานของคุณได้

import React, { useState } from 'react';

ภายใน App องค์ประกอบการทำงานของคุณ เริ่มต้นสถานะส่วนหนึ่งที่เรียกว่า posts โดยใช้ตะขอ useState สถานะนี้จะเก็บอาร์เรย์ของโพสต์ useState([]) เริ่มต้น posts ด้วยอาร์เรย์ว่างเป็นค่าเริ่มต้น

const [posts, setPosts] = useState([]);

หลังจากเริ่มต้นสถานะ posts ด้วยอาร์เรย์ว่างโดยใช้ useState([]) คุณจะต้องเพิ่มโค้ดเพื่อดึงโพสต์จาก WordPress REST API สิ่งนี้เกี่ยวข้องกับการส่งคำขอ HTTP ไปยังจุดสิ้นสุด API ที่ให้บริการข้อมูลการโพสต์

คุณต้องเพิ่มโค้ดที่จำเป็นในการดึงข้อมูลโพสต์หลังจากการประกาศสถานะ โดยทั่วไปโค้ดนี้จะเกี่ยวข้องกับการใช้วิธีการเช่น fetch() หรือไลบรารีเช่น Axios เพื่อสร้างคำขอ HTTP GET ไปยังตำแหน่งข้อมูล WordPress API ที่ให้ข้อมูลโพสต์

ถัดไป เพิ่มโค้ดต่อไปนี้หลังการประกาศสถานะเพื่อดึงข้อมูลโพสต์จาก WordPress REST API และอัปเดตโพสต์ตามนั้น

const fetchPosts = () => {
// Using axios to fetch the posts
axios
.get("https://yourdomain.com/wp-json/wp/v2/posts")
.then((res) => {
// Saving the data to state
setPosts(res.data);
});
}
// Calling the function on page load
useEffect(() => {
fetchPosts()
}, [])

โค้ดนี้จะดึงโพสต์จาก REST API ของเว็บไซต์ WordPress เมื่อคอมโพเนนต์เมาต์ และอัปเดตสถานะของคอมโพเนนต์ด้วยข้อมูลที่ดึงมาโดยใช้ฟังก์ชัน setPosts ของ useState hook

ขั้นตอนที่ 8: การสร้างองค์ประกอบบล็อกและการแสดงผล

ตอนนี้สร้างโฟลเดอร์ใหม่ชื่อ "ส่วนประกอบ" ภายในโฟลเดอร์ src และสร้างไฟล์ใหม่สองไฟล์ Blog.jsx และ blog.css (ภายในส่วนประกอบ)

ถัดไป เพิ่มโค้ดต่อไปนี้ลงในไฟล์ Blog.jsx ก่อน:

import axios from "axios";
import React, { useEffect, useState } from "react";
import "./blog.css";
export default function Blog({ post }) {
const [featuredImage, setFeaturedImage] = useState();
const getImage = () => {
axios
.get(post?._links["wp:featuredmedia"][0]?.href)
.then((response) => {
setFeaturedImage(response.data.source_url);
});
};

useEffect(() => {
getImage();
}, []);
return (
<div class="container">
<div class="blog-container">
<p className="blog-date">
{new Date(Date.now()).toLocaleDateString("en-US", {
day: "numeric",
month: "long",
year: "numeric",
})}
</p>
<h2 className="blog-title">{post.title.rendered}</h2>
<p
className="blog-excerpt"
dangerouslySetInnerHTML={{ __html: post.excerpt.rendered }}
/>
<img src={featuredImage} class="mask" />
</div>
</div>
);
}

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

หลังจากนั้นเพิ่มสไตล์ต่อไปนี้ลงในไฟล์ blog.css

@import url("https://fonts.googleapis.com/css?display=swap&family=Poppins");
.blog-container {
width: 400px;
height: 322px;
background: white;
border-radius: 10px;
box-shadow: 0px 20px 50px #d9dbdf;
-webkit-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
img {
width: 400px;
height: 210px;
object-fit: cover;
overflow: hidden;
z-index: 999;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}

.blog-title {
margin: auto;
text-align: left;
padding-left: 22px;
font-family: "Poppins";
font-size: 22px;
}

.blog-date {
text-align: justify;
padding-left: 22px;
padding-right: 22px;
font-family: "Poppins";
font-size: 12px;
color: #c8c8c8;
line-height: 18px;
padding-top: 10px;
}

.blog-excerpt {
text-align: justify;
padding-left: 22px;
padding-right: 22px;
font-family: "Poppins";
font-size: 12px;
color: #8a8a8a;
line-height: 18px;
margin-bottom: 13px;
}

สุดท้าย ให้แทรกข้อมูลโค้ดต่อไปนี้ภายในคำสั่ง return ของไฟล์ App.jsx นี่คือที่ที่คุณกำหนดโครงสร้างของ UI ส่วนประกอบของคุณโดยใช้ไวยากรณ์ JSX

<div>
{posts.map((item) => (
<Blog post={item} />
))}
</div>;

Here's the final version of your "App.jsx":
import React, { useEffect, useState } from 'react'
import axios from "axios"
import Blog from './components/Blog';
export default function App() {
const [posts, setPosts] = useState([]);
const fetchPosts = () => {
axios
.get("https://my-awesome-website.local/wp-json/wp/v2/posts")
.then((res) => {
setPosts(res.data);
});
}

useEffect(() => {
fetchPosts()
}, [])
return (
<div>
{posts.map((item) => (
<Blog
post={item}
/>
))}
</div>
)
}

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


ตัวอย่าง WordPress ที่ไม่มีหัว

เพื่อเป็นข้อมูลอ้างอิงและเพื่อสร้างความมั่นใจ เราขอนำเสนอตัวอย่าง WordPress แบบ Headless ให้กับคุณ:

1. เทคครันช์

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

เพื่อให้บรรลุเป้าหมายนี้ พวกเขาเลือกใช้แนวทาง Headless WordPress และใช้แอปพลิเคชัน React เพื่อสร้างส่วนหน้าและ WordPress ที่ไม่มีส่วนหัวสำหรับส่วนหลัง

2. ศูนย์ทรัพยากรแบรนด์ Facebook

ปัจจุบัน Facebook เป็นที่รู้จักกันอย่างแพร่หลายในชื่อ Meta ซึ่งเป็นโซเชียลมีเดียยักษ์ใหญ่ใช้แนวทาง Headless WordPress ในเว็บไซต์ Brand Resource Center เพื่อเป็นแนวทางสำหรับทรัพย์สินของแบรนด์

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


การไม่มีหัวดีต่อ SEO หรือไม่?

หากใช้งานอย่างถูกต้อง WordPress ที่ไม่มีหัวก็สามารถสร้างสิ่งมหัศจรรย์ได้จากมุมมองของ SEO นี่คือวิธีการ

  • เพิ่ม ประสิทธิภาพ เว็บไซต์ : เนื่องจากประสิทธิภาพของเว็บไซต์เป็นปัจจัยการจัดอันดับเครื่องมือค้นหาที่สำคัญ Headless WordPress ช่วยให้คุณสร้างแอปพลิเคชันส่วนหน้าที่รวดเร็วและมีน้ำหนักเบา ด้วยการให้บริการไฟล์ HTML แบบคงที่หรือใช้ประโยชน์จากการเรนเดอร์ฝั่งเซิร์ฟเวอร์ (SSR) การตั้งค่าแบบไม่มีส่วนหัวสามารถส่งเนื้อหาไปยังผู้ใช้ได้รวดเร็วยิ่งขึ้น และด้วยเหตุนี้จึงสามารถเพิ่มอันดับ SEO ได้
  • ข้อมูลที่มีโครงสร้างและข้อมูลเมตา : ยิ่งคุณให้ข้อมูลเพิ่มเติมแก่เครื่องมือค้นหาเกี่ยวกับเว็บไซต์หรือเนื้อหาของคุณมากเท่าใด ข้อมูลก็จะยิ่งเข้าใจมากขึ้นในการช่วยในการจัดทำดัชนี ดังนั้นจึงจำเป็นต้องมีสคีมาหรือข้อมูลที่มีโครงสร้างพร้อมกับข้อมูลเมตา ด้วย WordPress ที่ไม่มีหัว คุณสามารถควบคุมโครงสร้างและการจัดรูปแบบเนื้อหาของคุณได้อย่างเต็มที่ ช่วยให้คุณใช้มาร์กอัปข้อมูลที่มีโครงสร้าง (เช่น Schema.org) ได้อย่างง่ายดาย และเพิ่มประสิทธิภาพข้อมูลเมตา (แท็กชื่อ คำอธิบายเมตา ฯลฯ) เพื่อปรับปรุงการมองเห็นของเครื่องมือค้นหาและอัตราการคลิกผ่าน
  • ความยืดหยุ่นในการนำเสนอเนื้อหา : สถาปัตยกรรมแบบ Headless ช่วยให้นักพัฒนาสามารถสร้างประสบการณ์ผู้ใช้แบบโต้ตอบและปรับแต่งได้สูง ยิ่งประสบการณ์ผู้ใช้ดีขึ้น การรักษาผู้เยี่ยมชมก็จะดีขึ้น และอัตราตีกลับที่น้อยลง และจะให้สัญญาณเชิงบวกแก่เครื่องมือค้นหา
  • บูรณาการกับเครื่องมือ SEO : เครื่องมือและปลั๊กอิน SEO จำนวนมากเข้ากันได้กับการตั้งค่า WordPress ที่ไม่มีหัว คุณยังคงสามารถใช้ปลั๊กอิน SEO ยอดนิยม เช่น Yoast SEO หรือ Rank Math เพื่อเพิ่มประสิทธิภาพเนื้อหาและติดตามประสิทธิภาพเว็บไซต์ของคุณ
  • การออกแบบที่เหมาะกับมือถือ : Headless WordPress ช่วยให้สามารถสร้างเว็บไซต์ที่ตอบสนองและเหมาะกับมือถือเป็นค่าเริ่มต้น เนื่องจากความเหมาะกับอุปกรณ์เคลื่อนที่เป็นปัจจัยสำคัญในการจัดอันดับ SEO (โดยเฉพาะอย่างยิ่งกับการจัดทำดัชนีเพื่ออุปกรณ์เคลื่อนที่เป็นอันดับแรกของ Google) การตั้งค่าแบบไม่มีส่วนหัวจึงสามารถช่วยปรับปรุงการมองเห็นเว็บไซต์ของคุณในผลการค้นหาได้

บทสรุป

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

ไม่ต้องสงสัยเลยว่าการแยก WordPress มาตรฐานออกสามารถเปิดโลกแห่งความเป็นไปได้ได้ เช่น การได้รับอิสระในการออกแบบ UI ของเว็บไซต์โดยใช้ React และการจัดการเนื้อหาโดยใช้ WordPress

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

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


คำถามที่พบบ่อย

WordPress สามารถใช้แบบไม่มีหัวได้หรือไม่?

ใช่ WordPress สามารถใช้แบบไม่มีหัวได้ ในการตั้งค่า WordPress ที่ไม่มีส่วนหัว ส่วนหน้าของ WordPress แบบดั้งเดิมจะถูกแยกออกจากส่วนหลัง แทนที่จะเรนเดอร์หน้าเว็บโดยใช้ระบบเทมเพลต PHP ในตัวของ WordPress การตั้งค่า WordPress ที่ไม่มีส่วนหัวจะใช้ REST API หรือ GraphQL API เพื่อดึงเนื้อหา ซึ่งจะแสดงบนแอปพลิเคชันส่วนหน้าแยกต่างหากที่สร้างด้วยสแต็กเทคโนโลยีที่แตกต่างกัน เช่น React, Vue .js หรือเชิงมุม

WordPress ที่ไม่มีหัวเร็วกว่าไหม?

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

ใครบ้างที่ต้องการ CMS ที่ไม่มีหัว?

Headless CMS รวมถึง Headless WordPress จะเป็นประโยชน์อย่างมากสำหรับผู้ใช้ในบางสถานการณ์ เช่น;
1. เหมาะที่สุดสำหรับ นักพัฒนาและเอเจนซี่
2. ผู้สร้างและบรรณาธิการเนื้อหา
3. นักการตลาดดิจิทัล
4. องค์กรวิสาหกิจ
5 . สื่อและสำนักพิมพ์
6. สตาร์ทอัพและ SMB