什麼是無頭 WordPress？ 如何創建一個？ [教程]

WordPress 無頭 CMS 的優點和缺點是什麼？

Headless WordPress 有許多優點和缺點，每個優點和缺點都會影響您在不同場景下的工作。 為了清楚了解，讓我們以比較表的形式來比較其優缺點。

無頭 WordPress 好用嗎？

如果您忽略我們之前提到的限制，在某些情況下使用無頭 WordPress 可能會對您有利。

• 如果您的網站安全是重中之重，且資料處理非常敏感或關鍵。
• 如果您喜歡客製化設計和無限的可能性，而不受 WordPress 有限主題選項的限制，並且您正在尋求獨特的前端設計，那麼請選擇 Headless WordPress。
• 如果您想讓您的網站與 WordPress 的頻繁更新和升級隔離。
• 如果您想讓您的網站或應用程式面向未來並適應新技術、趨勢和用戶行為，而無需徹底檢修整個基礎設施，請考慮無頭 WordPress。
• 如果您正在尋找演示網站、小型或短期專案或教程，無頭設定可能是一個不錯的選擇。

無頭 WordPress 是如何運作的？

在談論標準 WordPress 時，它具有用戶友好的介面和易於使用的管理面板，透過它您可以輕鬆編輯、創建和刪除內容以及管理網站。

對於前端，它提供了數千個主題選項，結合內建主題以及第三方主題，在螢幕上製作一個具有視覺吸引力的網站。

但是，當您解耦 WordPress 時，您可以享受兩全其美的好處。 為此，WordPress 有一個名為 WordPress REST API 的 API。

它是一個程式設計接口，允許開發人員使用標準 HTTP 方法存取 WordPress 網站資料並與之互動。

它允許開發人員遠端檢索、創建、更新和刪除 WordPress 內容，這使得更容易將 WordPress 與其他應用程式平台或其他前端技術（如 React.js、Angular.js 等）整合以建立自訂網站。

如何讓 WordPress 無頭？ （無頭 WordPress 教學）

您可以透過多種方式解耦標準 WordPress，具體取決於您要使用的技術、資源、首選語言和框架。 無論使用哪種方法，您都應該熟悉前端語言以及 WordPress Rest API。

但現在，我們將選擇最簡單的方法，因為大多數人都是初學者。 請參閱下面給出的步驟：

第 1 步：設定 WordPress

您需要做的第一件事是建立 WordPress 網站，就像您通常在伺服器上建立的網站一樣。 這意味著網站應該是即時的，有自己的網域和適當的網站寄存帳戶。

但選擇合適的 WordPress 託管平臺本身就是一項非常困難的任務，甚至是設定 WordPress 和建立無頭 CMS 時非常關鍵的一步。

它非常重要，因為即使前端和後端解耦，後端仍然需要駐留在需要託管的伺服器上。

伺服器不僅提供了儲存所有網站內容的場所，而且無論使用哪種技術，其效能、安全性和可靠性對於將網站內容順利交付到前端也非常關鍵。

因此，選擇一台提供極速伺服器效能和嚴格安全性的主機變得至關重要。

考慮到這一點，您可以選擇 WPOven，它是最快、領先的完全託管 WordPress 託管公司之一，提供速度、企業級安全性和禮賓支持，確保您的無頭 WordPress 之旅更加順利。

• 具體來說， WPOven在頂級雲端供應商Linode上提供託管託管，確保高速效能和可擴充性。
• 該平台提供 WordPress 預先安裝，讓 WordPress 和其他工具的設定變得輕鬆。
• 此外，借助內建的高階快取系統和 Cloudflare 的內容交付網路 (CDN)，無論使用者位於何處，您的內容都可以更快地交付。
• 此外，WPOven 透過內建 Web 保護防火牆和 SSL 安裝確保企業級強大的安全性，協助保護您的後端資料和互動。
• 自動備份和輕鬆復原選項提供了額外的資料保護層，讓您高枕無憂。
• 此外，WPOven 的 24/7 客戶支援和廣泛的知識庫可確保快速解決任何問題，使您能夠專注於建立和管理無頭 CMS，而無需擔心託管相關的麻煩。

步驟 2：啟用 REST API

接下來，您需要做的是確保 WordPress REST API 已啟用。 預設情況下，它在所有新安裝的 WordPress 上啟用。

但是，您仍然需要驗證它是否在您的網站上啟用。 您只需在瀏覽器中輸入以下 URL 發出 API 請求即可做到這一點：

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

將“example.com”更改為您的實際域名，如果啟用了 API，它將顯示一個 JSON 回應，其中包含有關您網站帖子的一些資訊。

或者，您可以藉助插件，例如 WP REST API 插件。

閱讀： WordPress REST API：入門指南

步驟3：透過API取得貼文數據

如果您想取得發布數據，請依照下列步驟操作：

• 開啟 WordPress 儀表板 > 設定 > 永久鏈接，然後選擇貼文名稱。

• 之後，您需要下載Postman API測試工具。
• 現在，在 Postman API 工具中輸入以下格式的 URL。

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

這將獲取您的 WordPress 網站內的貼文資料。

第 6 步：設定 React 應用程式

現在我們已經完成了後端的工作，是時候開始前端的工作了。 首先，我們透過在終端機中執行下面給出的程式碼來建立一個 React 應用程式。

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

此命令將使用 Vite 建立一個新的 React 應用程序，並安裝必要的外部程式庫或套件。

另外，您還需要包含 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檔案的頂部，從 React 程式庫匯入useState掛鉤。 這允許您在功能組件中使用狀態。

import React, { useState } from 'react';

在你的功能元件App中，使用useState鉤子初始化一個名為posts的狀態。 該州將擔任一系列職位。 useState([])使用空數組作為初始值來初始化posts 。

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

使用useState([])使用空數組初始化posts狀態後，您需要添加程式碼以從 WordPress REST API 獲取帖子。 這涉及到向提供帖子資料的 API 端點發出 HTTP 請求。

您需要在狀態聲明之後添加獲取帖子資料所需的程式碼。 此程式碼通常涉及使用fetch()等方法或 Axios 等程式庫向提供貼文資料的 WordPress API 端點發出 HTTP GET 請求。

接下來，在狀態聲明後添加以下程式碼，以從 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()
}, [])

此程式碼在元件安裝時從 WordPress 網站的 REST API 取得帖子，並使用useState掛鉤的setPosts函數使用取得的資料更新元件的狀態。

第 8 步：建立部落格元件並渲染它

現在在src資料夾內建立一個名為「components」的新資料夾，並建立兩個新檔案 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;
}

最後，在App.jsx檔案的return語句中插入以下程式碼片段。 您可以在此處使用 JSX 語法定義元件 UI 的結構。

<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 範例

為了供您參考並建立信心，我們在這裡為您提供了一些 Headless WordPress 範例：

1.Techcrunch

如果你是科技愛好者，那你一定對 TechCrunch 很熟悉。 這是一個領先的科技媒體和新聞網站。 他們重新設計了網站的前端，以提供無縫的用戶體驗。

為了實現這一目標，他們採用了 Headless WordPress 方法，並使用 React 應用程式創建前端和後端 WordPress。

2.Facebook品牌資源中心

Facebook 現在俗稱 Meta，是一家社群媒體巨頭，在其品牌資源中心網站中使用這種無頭 WordPress 方法作為其品牌資產的風格指南。

該網站採用獨特而優雅的網頁設計與流暢的用戶體驗的獨特融合。 如果 Facebook/Meta 像大型科技巨頭一樣可以的話。 相信無頭 WordPress，你也可以。

結論

總之，除了它的某些限制、缺點或缺點之外。 如果實施得當，無頭方法可以創造奇蹟。 特別是對於喜歡創建無頭 Web 應用程式的開發人員或內容創建者來說，它非常有利。

毫無疑問，解耦標準 WordPress 可以打開一個充滿可能性的世界，例如獲得使用 React 設計網站 UI 的自由以及使用 WordPress 管理內容的自由。

該技術使您能夠享受每種技術的完整功能以及靈活性、可擴展性和 SEO 優化的優勢。

在整個部落格中，我們嘗試解決所有有關無頭 WordPress 的一般查詢，並為您提供了一些有關如何建立無頭 WordPress 的步驟供您參考。 （但是，可以有多種方法來解耦 WordPress，因此請遵循您認為最簡單的方法）。

經常問的問題

拉胡爾

Rahul Kumar 是一位網路愛好者和內容策略師，專門從事 WordPress 和網站託管。 憑藉多年的經驗和對了解最新行業趨勢的承諾，他制定了有效的線上策略來增加流量、提高參與度並提高轉換率。 拉胡爾對細節的關注以及製作引人入勝的內容的能力使他成為任何希望提高其線上形象的品牌的寶貴資產。