了解如何使用 Vue.js 創建無頭 WordPress 網站

WordPress 一直是開發人員和非開發人員快速構建和創建令人驚嘆的網站的首選內容管理系統。

嘗試免費演示

使用微服務架構,其中內容管理後端與前端是分開的,可以最大限度地控制兩個「端」。這種分離問題是無頭內容管理系統,包括無頭 WordPress 解決方案,試圖解決的問題。

通過無頭方法,企業可以更精細地控制內容管理後端。他們還可以自由使用他們選擇的任何前端,包括 React、Vue、Angular 等。

本指南將詳細探討無頭 WordPress,以及它的全部內容,何時以及為何考慮使用它。最後,我們將探索創建無頭 WordPress 環境,使用 Vue.js 構建前端,並使用 Kinsta 部署無頭 WordPress。

什麼是無頭 WordPress?

WordPress 是一個整體應用程序,其中後端和前端部分緊密地纏繞在一起。後端是管理的地方,您可以在其中創建、編輯、添加和刪除內容,包括更改外觀配置。相比之下,前端負責向用戶顯示內容。

Headless WordPress 是用於描述解耦 WordPress 的術語。後端(管理)部分與 WordPress CMS 的前端部分是分開的。您可以使用您選擇的任何前端框架將前端作為獨立應用程序進行開發和管理。

了解為什麼您應該考慮使用它,以及如何在您的網站上部署它?🚀點擊這裡⬇️點擊推文
Headless WordPress 的優缺點

接下來,我們將探討無頭 WordPress 的優缺點,讓您更好地了解這個概念。

優點

首先,我們將從探索優點開始。

超快性能

在這個應用程序運行速度超快的時代,您的網站載入時間不應超過幾秒鐘,以免失去訪問者。由於前端與 WordPress 分離,並且可以使用現代前端工具在考慮高性能和可擴展性的情況下進行開發,因此採用無頭 WordPress 方法對您網站的整體用戶體驗大有裨益。

粒度控制

選擇無頭架構可以讓您更好地控制設計布局、內容呈現以及用戶與應用程序前端的交互方式。它還允許您從一個中心位置保護和訪問您的後端內容。

提高可擴展性

擴展 WordPress 有時會很複雜,因為您無法完全控制支持 WordPress 的所有組件和代碼,主要是如果您不是開發人員。但是通過 WordPress 的解耦,可以毫不費力地單獨縮放每個部分,並且可以輕鬆檢測哪個部分需要縮放。

更嚴格的安全性

我們不能充分強調無頭 WordPress 的安全優勢,因為解耦的 WordPress 具有針對黑客和 DDoS 攻擊的高安全優勢。無頭 WordPress 方法使黑客難以訪問您的敏感後端數據,因為它與您的前端(面向用戶的網站)分開。

輕量化設計

您將更好地控制前端設計的結構和布局。此外,您可以更自由地進行前端定製設計;藉助 REST API 調用,您將能夠利用現代 Web 工具並將它們部署在前端。

多渠道內容發布

由於無頭 WordPress 使用基於 API 的系統將您的內容傳達給前端,因此您可以在任何地方和任何平台上顯示您的內容,包括桌面、網站、移動應用程序和觸摸屏信息亭。還可以充分利用增強現實、虛擬現實和物聯網設備來顯示和呈現您來自基於 API 的系統的內容。

缺點

隨著我們的深入,我們將更深入地探討無頭的缺點,但它的主要缺點是:

  1. 在管理不同的網站實例時,將後端和前端分開會給您帶來額外的負擔。
  2. 實施起來可能會很昂貴,因為它需要團隊中的額外成員和運行不同實例的額外資金。
  3. 如果內容在所有平台上的呈現方式不一致,讓您的內容在不同平台上可用可能會導致用戶體驗不一致。

當無頭 WordPress 可能不是最佳選擇時

由於無頭 WordPress 是一項具有巨大優勢的令人難以置信的創新,因此在決定是否應該使用它時,您需要記住一些事情。

  1. 無頭 WordPress 的維護成本非常高。您將維護一個網站的兩個不同實例,從基礎設施到多個開發人員。
  2. Headless WordPress 不支持 WordPress 的所有功能。例如,當使用單獨的前端時,WYSIWYG 編輯器和實時預覽等出色的 WordPress 功能將不起作用。
  3. 設置無頭 WordPress 的成本更高。因此,請始終牢記其增加的成本。

誰應該使用無頭 WordPress?

以下是您可能需要無頭 WordPress 的最合適的情況:

  1. 如果您的網站安全是您最關心的問題並且對您的公司至關重要,那麼您應該使用無頭 WordPress。
  2. 接下來,如果您的網站不需要定期升級和更新,這將是您需要使用無頭設置的好兆頭。
  3. 接下來,如果您想要一個 WordPress 主題不容易做到的定製設計,您想用獨特的設計為您的網站前端增添趣味。然後,無頭 WordPress 是您的下一個選擇。
  4. 最後,如果您正在構建一個生命周期較短的網站或用於演示和教程的演示網站,那麼您可以嘗試無頭方法。

誰應該避免使用無頭 WordPress

在以下幾種情況下,使用無頭 WordPress 不是一個好的選擇:

  1. 當您的網站僅依賴特定的插件和功能來控制應用程序的前端並使其發揮最佳效果時,除非插件提供基於 API 的選項來使用數據,否則您應該堅持使用 WordPress。
  2. 假設您對網站編碼不感興趣,或者您的網站需要日常維護,並且由於預算不足,您沒有聘請專業人員進行日常維護。在這種情況下,WordPress 是您的合適選擇。
  3. 如果您不是經驗豐富的開發人員並且想單獨創建和管理您的網站,那麼您應該使用 WordPress。

如何使 WordPress 無頭(構建應用程序)

本節將探討如何構建和開發一個新聞博客,後端使用無頭 WordPress,面向用戶的前端使用 Vue 3。

使用 Devkinsta 設置無頭 WordPress

我們將使用 DevKinsta 開發無頭 WordPress,這是一種流行的 WordPress 本地開發環境,可在您舒適的本地機器上設計、開發和部署 WordPress 站點。

DevKinsta 永遠免費,並為您開發和構建 WordPress 提供了巨大的好處和舒適感。

您可以從官網下載並安裝 DevKinsta,並按照文檔中的說明開始使用。

由於我們已經安裝了 DevKinsta,我們將打開它並按照以下步驟設置我們的第一個無頭 WordPress。

在 DevKinsta 儀錶板上,使用 Nginx、MySQL 和任何可用的 WordPress 版本創建一個新的 WordPress 站點。此外,您可以從儀錶板導入現有 WordPress 實例或創建自定義 WordPress 實例。

訂閱時事通訊

想知道我們是如何將流量增加超過 1000% 的嗎?

加入 20,000 多名其他人,他們會收到我們的每周時事通訊,其中包含 WordPress 內幕技巧!

現在訂閱

接下來,為您新創建的 WordPress 實例提供名稱、管理員用戶名和密碼,然後單擊創建並複製詳細信息,同時 DevKinsta 在您的本地機器上創建一個新的 WordPress 實例。

接下來,單擊打開站點以在默認瀏覽器上打開新創建的 WordPress 實例。

最後,您可以通過訪問 http://headless-wordpress-news-blog.local/wp-admin 鏈接並輸入您在創建新實例時輸入的管理員登錄憑據登錄到管理儀錶板。

請注意,我們已經使用 URL http://headless-wordpress-news-blog.local 在本地設置了無頭 WordPress,前端在本地託管在 http://news-blog.local,我們將始終使用它教程。

配置我們的無頭 WordPress

接下來,在成功登錄您的 WordPress 儀錶板後,您可以繼續安裝您選擇的任何插件和配置。

我們將在本教程中完全禁用主題,並且僅通過安裝 Simple Website Redirect 插件並進行設置,通過基於 WordPress REST API 的端點訪問內容。

轉到 Plugins > Add new 並搜索 Simple Website Redirect,安裝並激活它:

WordPress 插件安裝屏幕。

WordPress插件安裝。

接下來,點擊插件設置並輸入基於前端的 URL(例如 http://news-blog.local),點擊高級設置選項並添加以下路徑 – /wp-admin、/wp-login.php , 和 /wp-json — 到排除路徑部分。

最後,通過在重定向狀態下拉列表中選擇啟用來啟用插件:

簡單的網站重定向插件設置頁面。

簡單的網站重定向插件設置。

……就是這樣!

此外,如果您在默認情況下訪問 http://headless-wordpress-news-blog.local/wp-json 時未啟用 JSON API,您可以通過在 WordPress 設置下打開您的固定鏈接並選擇帖子名稱或任何除了Plain之外的其他選擇:

WordPress 永久鏈接設置頁面。

WordPress 永久鏈接設置。

現在,當您訪問 http://headless-wordpress-news-blog.local/wp-json 時,它應該向您顯示如下 JSON 數據:

需要為您的新電子商務網站提供一流、快速且安全的託管服務?Kinsta 提供超快的伺服器和 WooCommerce 專家提供的 24/7 世界級支持。查看我們的計劃

{
“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-健康/v1”
],
“身份驗證”: [

],
“routes”: {
“/”: {
“namespace”: “”,
“methods”: [
“GET”
],
“endpoints”: [
{
“methods”: [
“GET”
],
“args”: {
“context”: {
“default”: “view”,
“required”: false
}
}
}
],

設置 Vue.js(前端)

我們將使用 Vite Web 開發工具來創建我們的 Vue 3 應用程序以連接無頭 WordPress。您可以閱讀有關 Vue 3 和 Vite 開發工具的更多信息。

在本文中,我們將構建一個新聞博客。該項目的所有後端內容管理都將使用 Devkinsta 由我們的無頭 WordPress 開發和託管。

輸入以下簡單命令:

npm init @vitejs / app news-blog
cd news-blog
npm install
npm run dev

如果您在用戶名中遇到空格問題,請嘗試使用:

npx create-vite-app 新聞博客

請注意,我們已將 Vue 3 應用程序配置為偵聽 http://news-blog.local,但您可以堅持使用默認的 http://localhost:3000。

最後,使用您選擇的任何代碼編輯器打開您的 Vue 3 代碼庫。我們將使用 VSCode,讓我們接觸代碼。

使用 WordPress API

我們已經繼續開發 Vue 應用程序的其餘部分以節省您的閱讀時間,但您可以繼續從我的 GitHub 克隆存儲庫。

顯示 App Post 組件

下面的代碼片段顯示了我們如何使用 Vue 實例實現 WordPress REST API 以顯示來自無頭 WordPress 的所有帖子:

<template>
<section>
<div class=”padding-top”>
<div class=”container inner-padding-top”>
<div class=”row”>
<div class=”col-md-12 col-sm -12-col-xs-12 text-center”>
<h2 class=”lead-title text-uppercase”>
最新後端開發。文章
</h2>
<h3 class=”article-subtitle”>
最新的後端開發。每天由社區策劃的文章。
</h3>
</div>
</div>
<div class=”row mb-1 mt-5″>
<post v-for=”(post, i) in posts” :key=”i” :post= “post” />
</div>
</div>
</div>

</section>
</模板>

<script>
import { mapState } from ‘vuex’
export default {
計算:{
…mapState({
posts: (state) => {
return […state.post.posts].slice(0, 22)
} ,
}),
},
}
</script>
顯示單個帖子組件

代碼片段顯示了我們如何使用 WordPress REST API 和無頭 WordPress 檢索單個帖子並將其顯示在我們的 Vue 實例中:

<template>
<div class=”card single”>
<div class=”card-head pl-3 pr-3 pt-3″>
<h1 class=”title”>{{ post.title || ” }}</h1>
<div class=”d-flex”>
<div class=”author d-flex pr-3 pb-4″>
<div class=”profile mr-2″></div>
<a :href=”‘/authors/’%20+%20post.author.slug” class=”subtitle is-6″>
{{ post.author.name }}
</a>
</div>

<div class=”date_created”>
<small class=”text-muted”>
<li class=”fa fa-calendar”></li>
<time
:datetime=”$moment(post.date).format(‘ MMMM Do YYYY, h:mm:ss a’)”
>{{ $moment(post.date).format(‘MMMM Do YYYY’) }}</time
>
</small>
</div>
</div>
</div>
<div class=”block-image pl-3 pr-3 pt-2 mb-3″>
<img
v-lazy-load
:data-src=”image”
class=”card-img-top img -fluid”
:alt=”post.title”
/>
</div>

<div class=”tags absolute”>
<a
v-for=”category in post.categories”
:key=”category.id”
:href=”‘/categories/’%20+%20category.slug”
class=”btn-tag ”
>
{{ category.title }}
</a>
</div>
</div>
</template>

<script>
從 ‘vue’ 導入 Vue

export default {
name: ‘SinglePost’,
props: {
post: {
type: [Object, Array],
default: () => {},
},
},
}
</script>

以下是為後端內容對無頭 WordPress API 進行 API 調用的商店:

導出 const 操作 = {
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
}
},
}

使用 Kinsta 部署 Headless WordPress

最後,使用 Kinsta 託管服務的 DevKinsta 可以非常輕鬆地部署無頭 WordPress。

要將無頭 WordPress 部署到 Kinsta,請單擊 DevKinsta 儀錶板上的 Push to Staging 按鈕,然後使用您的登錄憑據登錄 Kinsta。您可以創建一個新的 Kinsta 帳戶來獲取您的登錄憑據。

您可以了解如何將更改推送到暫存環境,以便通過單擊將您的無頭 WordPress 部署到 Kinsta 託管服務。

最後,您可以將 Vue.js 實例部署到您選擇的任何雲託管服務提供商。確保相應地更新您的無頭 WordPress 端點,以在實時生產環境中測試您的應用程序。

想要創建一個無頭的 WordPress 環境嗎?👀這個帖子有你覆蓋💪Click鳴叫
摘要

Headless WordPress 及其帶來的好處將持續一段時間。隨著越來越多的開發人員和網站所有者開始了解無頭選項的優點,它的受歡迎程度只會繼續增長。

在本指南中,我們向您介紹了無頭 WordPress 的優點、優點和缺點,並向您展示了如何使用 DevKinsta 構建和部署您的第一個無頭 WordPress。您現在已經可以實現無頭 WordPress 了。

部署無頭 WordPress 網站的技巧是什麼?請在評論部分分享它們!

通過以下方式節省時間、成本並最大限度地提高站點性能:

  • 來自 WordPress 託管專家的即時幫助,24/7。
  • Cloudflare 企業集成。
  • 全球受眾覆蓋全球 28 個數據中心。
  • 使用我們內置的應用程序性能監控進行優化。

所有這些以及更多,都在一個沒有長期合同、協助遷移和 30 天退款保證的計劃中。查看我們的計劃或與銷售人員交談以找到適合您的計劃。

相關文章