WordPress ไร้หัวคืออะไร? จะสร้างได้อย่างไร? [บทช่วยสอน]
เผยแพร่แล้ว: 2024-03-04WordPress ไร้หัวคืออะไร?
ดังที่คุณอาจทราบแล้วว่า WordPress มีสองส่วน ได้แก่ แบ็กเอนด์และส่วนหน้า แบ็กเอนด์มีหน้าที่รับผิดชอบงานการจัดการทั้งหมด เช่น การแก้ไข การเพิ่ม และการลบโพสต์เนื้อหา รวมถึงการกำหนดค่าและการตั้งค่าทั้งหมดที่เปลี่ยนรูปลักษณ์ของเนื้อหา ในขณะที่ส่วนหน้ามีหน้าที่รับผิดชอบในการแสดงเนื้อหาที่ประมวลผลแบ็กเอนด์ทั้งหมดบนหน้าจอ
ในปัจจุบัน คำว่า Headless WordPress เกิดขึ้นเมื่อคุณแยกหรือแยกสองส่วนนี้ออก กล่าวคือ ส่วนหน้าและส่วนหลัง โดยไม่แตะต้องส่วนหลังสำหรับการจัดการเนื้อหา ตอนนี้คุณสามารถใช้เทคโนโลยีใดก็ได้เพื่อสร้างส่วนหน้าและแสดงบนหน้าจอ
ข้อดีและข้อเสียของ WordPress CMS ที่ไม่มีส่วนหัวคืออะไร?
Headless WordPress มาพร้อมกับข้อดีและข้อเสียมากมาย ซึ่งแต่ละข้ออาจส่งผลต่องานของคุณในสถานการณ์ที่แตกต่างกัน เพื่อให้เห็นภาพที่ชัดเจน ให้เราเปรียบเทียบข้อดีข้อเสียในรูปแบบตารางเปรียบเทียบ
ข้อดี | ข้อเสีย |
---|---|
1. สถาปัตยกรรมแบบแยกส่วนช่วยให้มีความยืดหยุ่นมากขึ้นในการพัฒนาส่วนหน้า | 1. เส้นโค้งการเรียนรู้ที่สูงชันสำหรับนักพัฒนา |
2. ความสามารถในการใช้ประโยชน์จากคุณสมบัติการจัดการเนื้อหาแบ็กเอนด์ที่แข็งแกร่งของ WordPress | 2. ต้องมีการตั้งค่าและการกำหนดค่าเพิ่มเติม |
3. บูรณาการอย่างราบรื่นกับปลั๊กอิน WordPress และระบบนิเวศ | 3. การสนับสนุนที่จำกัดเมื่อเทียบกับ WordPress แบบดั้งเดิม |
4. ปรับปรุงประสิทธิภาพเนื่องจากโหลดเซิร์ฟเวอร์ลดลง | 4. ความซับซ้อนที่อาจเกิดขึ้นในการจัดการหลายระบบ |
5. เพิ่มความปลอดภัยโดยลดพื้นผิวการโจมตีที่ส่วนหน้า | 5. ต้นทุนการพัฒนาและบำรุงรักษาเพิ่มขึ้น |
6. ตัวเลือกการปรับขนาดและการเพิ่มประสิทธิภาพที่ดีขึ้น | 6. การพึ่งพาเครื่องมือและบริการของบุคคลที่สาม |
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 ของคุณ > การตั้งค่า > ลิงก์ถาวร และเลือกชื่อโพสต์
- หลังจากนั้นคุณจะต้องดาวน์โหลดเครื่องมือทดสอบ Postman API
- ตอนนี้ภายในเครื่องมือบุรุษไปรษณีย์ API ให้ป้อน URL ตามรูปแบบที่ระบุด้านล่าง
https://mydomain.com/wp-json/wp/v2/posts
วิธีนี้จะดึงข้อมูลโพสต์ภายในเว็บไซต์ 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
Rahul Kumar เป็นผู้ชื่นชอบเว็บไซต์และเป็นนักยุทธศาสตร์ด้านเนื้อหาที่เชี่ยวชาญด้าน WordPress และเว็บโฮสติ้ง ด้วยประสบการณ์หลายปีและความมุ่งมั่นในการติดตามแนวโน้มของอุตสาหกรรม เขาจึงสร้างกลยุทธ์ออนไลน์ที่มีประสิทธิภาพที่กระตุ้นการเข้าชม เพิ่มการมีส่วนร่วม และเพิ่ม Conversion ความใส่ใจในรายละเอียดและความสามารถในการสร้างสรรค์เนื้อหาที่น่าสนใจของ Rahul ทำให้เขาเป็นทรัพย์สินที่มีค่าสำหรับแบรนด์ใดๆ ก็ตามที่ต้องการปรับปรุงการนำเสนอตัวตนในโลกออนไลน์