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

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

Headless 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 ที่ไม่มีหัว คุณก็ทำได้เช่นกัน

บทสรุป

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

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

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

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

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

ราหุล

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