建站
咨詢
售后
建站咨詢
新聞中心
wordpress一直是開發(fā)者和非開發(fā)者快速構(gòu)建和創(chuàng)建驚人網(wǎng)站的內(nèi)容管理系統(tǒng)。
使用內(nèi)容管理后端與前端分離的微服務(wù)體系結(jié)構(gòu)，可以最大限度地控制兩個“端”。這種分離問題正是無頭內(nèi)容管理系統(tǒng)（包括無頭WordPress解決方案）試圖解決的問題。
通過無頭方法，企業(yè)可以對內(nèi)容管理后端進(jìn)行更精細(xì)的控制。他們還可以自由使用自己選擇的任何前端，包括React、Vue、Angular等。
本指南將詳細(xì)探討無頭WordPress，以及它的全部內(nèi)容、何時以及為什么應(yīng)該考慮使用它。最后，我們將探索創(chuàng)建無頭WordPress環(huán)境，使用Vue.js構(gòu)建前端，并部署無頭WordPress。
什么是無頭WordPress
WordPress是一個整體式應(yīng)用程序，后端和前端部分緊密地纏繞在一起。后端是進(jìn)行管理的地方，在這里您可以創(chuàng)建、編輯、添加和刪除內(nèi)容，包括更改外觀配置。相反，前端負(fù)責(zé)向用戶顯示內(nèi)容。
無頭WordPress是用來描述解耦WordPress的術(shù)語。后臺（管理）部分與WordPress CMS的前端部分是分開的。您可以使用您選擇的任何前端框架作為獨立應(yīng)用程序開發(fā)和管理前端。
無頭WordPress的利弊
接下來，我們將探討無頭WordPress的優(yōu)缺點，讓您更好地理解這個概念。
優(yōu)點
（1）超高速性能-在這個應(yīng)用程序運行速度極快的時代，您的網(wǎng)站加載時間不應(yīng)超過幾秒鐘，以免失去訪問者。由于前端與WordPress分離，并且可以使用現(xiàn)代前端工具開發(fā)高性能和可擴(kuò)展性，因此采用無頭WordPress方法對網(wǎng)站的整體用戶體驗非常有益。
（2）粒度控制-選擇無頭架構(gòu)可以讓您更好地控制設(shè)計布局、內(nèi)容展示以及用戶與應(yīng)用程序前端的交互方式。它還允許從中心位置保護(hù)和訪問后端內(nèi)容。
（3）增強的可擴(kuò)展性-擴(kuò)展WordPress有時可能會很復(fù)雜，因為您無法完全控制驅(qū)動WordPress的所有組件和代碼，主要是在您不是開發(fā)人員的情況下。但是通過WordPress的解耦，可以輕松地單獨縮放每個部分，并且您可以輕松地檢測出需要縮放的部分。
（4）更嚴(yán)密的安全-我們無法充分強調(diào)無頭WordPress的安全優(yōu)勢，因為解耦WordPress在抵御黑客和DDoS攻擊方面具有很高的安全優(yōu)勢。無頭WordPress方法使得黑客很難訪問您的敏感后端數(shù)據(jù)，因為它與您的前端（面向用戶的網(wǎng)站）是分開的。
（5）輕量化設(shè)計-您將可以更好地控制前端設(shè)計的結(jié)構(gòu)和布局。此外，您還可以在前端進(jìn)行更自由的定制設(shè)計；由于RESTAPI調(diào)用，您將能夠利用現(xiàn)代web工具并在前端部署它們。
（6）多渠道內(nèi)容發(fā)布-由于無頭WordPress使用基于API的系統(tǒng)將您的內(nèi)容傳送到前端，因此您可以在任何位置和任何平臺上顯示您的內(nèi)容，包括桌面、網(wǎng)站、移動應(yīng)用程序和觸摸屏信息亭。還可以充分利用增強現(xiàn)實、虛擬現(xiàn)實和物聯(lián)網(wǎng)設(shè)備來顯示和呈現(xiàn)來自基于API的系統(tǒng)的內(nèi)容。
缺點
我們將更深入地探討無頭的缺點，但其主要缺點是：
何時無頭WordPress可能不是最好的選擇
由于無頭WordPress是一項具有巨大優(yōu)勢的難以置信的創(chuàng)新，因此在決定是否使用它時，您需要記住一些事情。
- 無頭WordPress的維護(hù)費用非常昂貴。從基礎(chǔ)設(shè)施到多個開發(fā)人員，您將維護(hù)一個網(wǎng)站的兩個不同實例。
- 無頭WordPress不支持WordPress的所有功能。例如，WordPress的強大功能，如所見即所得編輯器和live preview，在使用單獨的前端時無法工作。
- 設(shè)置無頭WordPress的成本更高。因此，始終牢記其增加的成本。
誰應(yīng)該使用無頭WordPress
以下是您可能需要無頭WordPress的最佳情況：
誰應(yīng)該避免使用無頭WordPress
以下幾種情況下，使用無頭WordPress不是一個好的選擇：
如何搭建無頭WordPress（構(gòu)建應(yīng)用程序）
本節(jié)將探討如何構(gòu)建和開發(fā)一個新聞博客，其后端為無頭WordPress，前端為Vue 3。
使用Devkinsta設(shè)置無頭WordPress
我們將使用DevKinsta開發(fā)無頭WordPress，DevKinsta是一個流行的WordPress本地開發(fā)環(huán)境，用于設(shè)計、開發(fā)和部署WordPress站點，使您的本地機器舒適。
DevKinsta是永遠(yuǎn)免費的，它為您開發(fā)和構(gòu)建WordPress提供了巨大的好處和舒適。
您可以從官方網(wǎng)站下載并安裝DevKinsta，并按照文檔中的說明開始。
由于我們已經(jīng)安裝了DevKinsta，我們將打開它并按照下面的步驟設(shè)置我們的第一個無頭WordPress。
在DevKinsta儀表板上，使用Nginx、MySQL和任何可用的WordPress版本創(chuàng)建一個新的WordPress站點。此外，您還可以從儀表板導(dǎo)入現(xiàn)有WordPress實例或創(chuàng)建自定義WordPress實例。
接下來，為新創(chuàng)建的WordPress實例提供一個名稱、管理員用戶名和密碼，然后單擊Create并復(fù)制詳細(xì)信息，同時DevKinsta在本地計算機中創(chuàng)建一個新的WordPress實例。
接下來，單擊“Open Site”，在默認(rèn)瀏覽器上打開新創(chuàng)建的WordPress實例。
最后，您可以通過訪問 http://headless-wordpress-news-blog.local/wp-admin 鏈接并鍵入創(chuàng)建新實例時輸入的管理員登錄憑據(jù)。
注意，我們已經(jīng)在本地主機 http://news-blog.local使用URL http://headless-wordpress-news-blog.local 設(shè)置了無頭WordPress，我們將在整個教程中使用它。
配置我們的無頭WordPress
接下來，在成功登錄到WordPress儀表板之后，您可以繼續(xù)安裝您選擇的任何插件和配置。
我們將在本教程中完全禁用該主題，通過安裝簡單的網(wǎng)站重定向插件并進(jìn)行設(shè)置，僅通過基于WordPress REST API的端點訪問內(nèi)容。
轉(zhuǎn)到Plugins > 安裝插件并搜索Simple Website Redirect，安裝并啟用：
WordPress插件安裝
接下來，單擊插件Settings并輸入基于前端的URL (e.g. http://news-blog.local),，單擊Advanced setting options并將以下路徑 — /wp-admin, /wp-login.php和/wp-json 添加到Exclude Paths。
最后，通過在Redirect Status下拉列表中選擇Enabled 來啟用插件：
Simple Website Redirect插件設(shè)置
此外，如果在默認(rèn)情況下訪問 http://headless-wordpress-news-blog.local/wp-json 時未啟用JSON API，您可以通過在WordPress設(shè)置下打開固定鏈接并選擇文章名Post Name或您選擇的任何其他選項來啟用該功能（但樸素Plain除外）：
WordPress固定鏈接
現(xiàn)在當(dāng)你訪問你的http://headless-wordpress-news-blog.local/wp-json，它應(yīng)該向您提供JSON數(shù)據(jù)，如下所示：
{
"name": "Headless WordPress News Blog",
"description": "Just another WordPress site",
"url": "http://headless-wordpress-news-blog.local",
"home": "http://headless-wordpress-news-blog.local",
"gmt_offset": "0",
"timezone_string": "",
"namespaces": [
"oembed/1.0",
"wp/v2",
"wp-site-health/v1"
],
"authentication": [
],
"routes": {
"/": {
"namespace": "",
"methods": [
"GET"
],
"endpoints": [
{
"methods": [
"GET"
],
"args": {
"context": {
"default": "view",
"required": false
}
}
}
],
...
設(shè)置Vue.js（前端）
我們將使用Vite web開發(fā)工具創(chuàng)建Vue 3應(yīng)用程序，以連接無頭WordPress。您可以閱讀有關(guān)Vue 3和Vite開發(fā)工具的更多信息。
在本文中，我們將構(gòu)建一個新聞博客。該項目的所有后端內(nèi)容管理都將使用Devkinsta由我們的無頭WordPress開發(fā)和托管。
鍵入以下簡單命令：
npm init @vitejs/app news-blog cd news-blog npm install npm run dev
如果您的用戶名中存在空格問題，請嘗試使用：
npx create-vite-app news-blog
最后，使用您選擇的任何代碼編輯器打開Vue 3代碼庫。我們將使用VSCode，下面讓我們繼續(xù)努力碼字。
使用WordPress API
我們已經(jīng)著手開發(fā)Vue應(yīng)用程序的其余部分，以節(jié)省您的閱讀時間，但您可以繼續(xù)從我的GitHub克隆存儲庫。
顯示文章列表組成部分
下面的代碼片段顯示了我們?nèi)绾问褂肰ue實例實現(xiàn)WordPress REST API，以顯示來自無頭WordPress的所有文章：
Latest Backend Dev. Articles
Latest Backend Dev. Articles curated daily by the community.
顯示單一文章組成部分
代碼片段顯示了我們?nèi)绾问褂肳ordPress REST API和無頭WordPress檢索一篇文章，并將其顯示在我們的Vue實例中：
下面是對后端內(nèi)容的無WordPress API進(jìn)行API調(diào)用的存儲：
export const actions = {
async getPosts({ commit }, { page, count = 22 }) {
try {
const response = await fetch(
`http://headless-wordpress-news-blog.local/wp-json/wp/v2/posts`
)
const data = await response.json()
if (data) {
commit('setPosts', data)
}
return data
}
},
async getPost({ commit }, id) {
try {
const response = await fetch(
`http://headless-wordpress-news-blog.local/wp-json/wp/v2/posts/${id}`
)
const data = await response.json()
if (data) {
commit('setPost', data)
}
return data
}
},
}
使用服務(wù)器部署無頭WordPress
最后，使用托管服務(wù)部署您的無頭WordPress非常容易。
要將您的無頭WordPress部署到Kinsta，請單擊DevKinsta儀表盤上的Push to Staging按鈕，然后使用登錄憑據(jù)登錄到Kinsta。
最后，您可以將 Vue .js實例部署到您所選擇的任何云托管提供商。請務(wù)必相應(yīng)地更新您的無頭WordPress端點，以便在現(xiàn)場生產(chǎn)環(huán)境中測試您的應(yīng)用程序。
小結(jié)
無頭WordPress及其帶來的好處將持續(xù)一段時間。隨著越來越多的開發(fā)者和網(wǎng)站所有者開始了解無頭方案的好處，它的受歡迎程度將繼續(xù)增長。
在本指南中，我們向您介紹了無頭WordPress的特點和優(yōu)缺點，并向您展示了如何使用DevKinsta構(gòu)建和部署第一個無頭WordPress。您現(xiàn)在正在順利實現(xiàn)無頭WordPress。
文章題目：如何使用Vue創(chuàng)建無頭WordPress網(wǎng)站
鏈接地址：http://www.5511xx.com/article/dhopjcg.html
