如何使用Vue建立無頭WordPress網站

WordPress一直是開發者和非開發者快速構建和建立驚人網站的內容管理系統。

使用內容管理後端與前端分離的微服務體系結構，可以最大限度地控制兩個“端”。這種分離問題正是無頭內容管理系統（包括無頭WordPress解決方案）試圖解決的問題。

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

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

1. 什麼是無頭WordPress
2. 無頭WordPress的利弊
3. 何時無頭WordPress可能不是最好的選擇
4. 誰應該使用無頭WordPress
5. 誰應該避免使用無頭WordPress
6. 如何搭建無頭WordPress（構建應用程式）

什麼是無頭WordPress

WordPress是一個整體式應用程式，後端和前端部分緊密地纏繞在一起。後端是進行管理的地方，在這裡您可以建立、編輯、新增和刪除內容，包括更改外觀配置。相反，前端負責向使用者顯示內容。

無頭WordPress是用來描述解耦WordPress的術語。後臺（管理）部分與WordPress CMS的前端部分是分開的。您可以使用您選擇的任何前端框架作為獨立應用程式開發和管理前端。

無頭WordPress的利弊

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

優點

（1）超高速效能-在這個應用程式執行速度極快的時代，您的網站載入時間不應超過幾秒鐘，以免失去訪問者。由於前端與WordPress分離，並且可以使用現代前端工具開發高效能和可擴充套件性，因此採用無頭WordPress方法對網站的整體使用者體驗非常有益。

（2）粒度控制-選擇無頭架構可以讓您更好地控制設計佈局、內容展示以及使用者與應用程式前端的互動方式。它還允許從中心位置保護和訪問後端內容。

（3）增強的可擴充套件性-擴充套件WordPress有時可能會很複雜，因為您無法完全控制驅動WordPress的所有元件和程式碼，主要是在您不是開發人員的情況下。但是通過WordPress的解耦，可以輕鬆地單獨縮放每個部分，並且您可以輕鬆地檢測出需要縮放的部分。

（4）更嚴密的安全-我們無法充分強調無頭WordPress的安全優勢，因為解耦WordPress在抵禦黑客和DDoS攻擊方面具有很高的安全優勢。無頭WordPress方法使得黑客很難訪問您的敏感後端資料，因為它與您的前端（面向使用者的網站）是分開的。

（5）輕量化設計-您將可以更好地控制前端設計的結構和佈局。此外，您還可以在前端進行更自由的定製設計；由於RESTAPI呼叫，您將能夠利用現代web工具並在前端部署它們。

（6）多渠道內容釋出-由於無頭WordPress使用基於API的系統將您的內容傳送到前端，因此您可以在任何位置和任何平臺上顯示您的內容，包括桌面、網站、移動應用程式和觸控式螢幕資訊亭。還可以充分利用增強現實、虛擬現實和物聯網裝置來顯示和呈現來自基於API的系統的內容。

缺點

我們將更深入地探討無頭的缺點，但其主要缺點是：

1. 在管理不同的網站例項時，分離後端和前端會給您帶來額外的負載。
2. 由於它需要團隊中的額外成員和執行不同例項的額外資金，因此實施起來可能會很昂貴。
3. 如果內容在所有平臺上呈現不一致，則在不同平臺上提供內容可能會導致使用者體驗不一致。

何時無頭WordPress可能不是最好的選擇

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

• 無頭WordPress的維護費用非常昂貴。從基礎設施到多個開發人員，您將維護一個網站的兩個不同例項。
• 無頭WordPress不支援WordPress的所有功能。例如，WordPress的強大功能，如所見即所得編輯器和live preview，在使用單獨的前端時無法工作。
• 設定無頭WordPress的成本更高。因此，始終牢記其增加的成本。

誰應該使用無頭WordPress

以下是您可能需要無頭WordPress的最佳情況：

1. 如果你的網站的安全性是你最關心的，也是對你的公司最重要的，那麼你應該使用無頭WordPress。
2. 接下來，如果您的網站不需要定期升級和更新，這將是一個很好的跡象，表明您需要使用無頭設定。
3. 接下來，如果你想有一個WordPress主題不容易實現的定製設計，你需要用一個獨特的設計來增加網站前端的趣味。那麼，無頭WordPress是你的下一個選擇。
4. 最後，如果你正在為演示和教程建立一個壽命很短的網站或演示網站，那麼你可以嘗試無頭方法。

誰應該避免使用無頭WordPress

以下幾種情況下，使用無頭WordPress不是一個好的選擇：

1. 當你的網站僅僅依賴於特定的外掛和功能來控制應用程式的前端並與之協同工作時，你應該堅持使用WordPress，除非外掛提供基於API的選項來使用資料。
2. 假設您對編寫網站程式碼不感興趣，或者您的網站需要日常維護，並且由於預算較低，您沒有僱傭專業人員進行日常維護。在這種情況下，WordPress是一個適合您的選項。
3. 如果你不是一個經驗豐富的開發人員，想單獨建立和管理你的網站，你應該使用WordPress。

如何搭建無頭WordPress（構建應用程式）

本節將探討如何構建和開發一個新聞部落格，其後端為無頭WordPress，前端為Vue 3。

使用Devkinsta設定無頭WordPress

我們將使用DevKinsta開發無頭WordPress，DevKinsta是一個流行的WordPress本地開發環境，用於設計、開發和部署WordPress站點，使您的本地機器舒適。

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

您可以從官方網站下載並安裝DevKinsta，並按照文件中的說明開始。

由於我們已經安裝了DevKinsta，我們將開啟它並按照下面的步驟設定我們的第一個無頭WordPress。

在DevKinsta儀表板上，使用Nginx、MySQL和任何可用的WordPress版本建立一個新的WordPress站點。此外，您還可以從儀表板匯入現有WordPress例項或建立自定義WordPress例項。

接下來，為新建立的WordPress例項提供一個名稱、管理員使用者名稱和密碼，然後單擊Create並複製詳細資訊，同時DevKinsta在本地計算機中建立一個新的WordPress例項。

接下來，單擊“Open Site”，在預設瀏覽器上開啟新建立的WordPress例項。

最後，您可以通過訪問 http://headless-wordpress-news-blog.local/wp-admin 連結並鍵入建立新例項時輸入的管理員登入憑據。

注意，我們已經在本地主機 http://news-blog.local使用URL  http://headless-wordpress-news-blog.local 設定了無頭WordPress，我們將在整個教程中使用它。

配置我們的無頭WordPress

接下來，在成功登入到WordPress儀表板之後，您可以繼續安裝您選擇的任何外掛和配置。

我們將在本教程中完全禁用該主題，通過安裝簡單的網站重定向外掛並進行設定，僅通過基於WordPress REST API的端點訪問內容。

轉到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外掛設定

此外，如果在預設情況下訪問 http://headless-wordpress-news-blog.local/wp-json 時未啟用JSON API，您可以通過在WordPress設定下開啟固定連結並選擇文章名Post Name或您選擇的任何其他選項來啟用該功能（但樸素Plain除外）：

WordPress固定連結

現在當你訪問你的http://headless-wordpress-news-blog.local/wp-json，它應該向您提供JSON資料，如下所示：

{
  "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
            }
          }
        }
      ],
...

設定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 news-blog

最後，使用您選擇的任何程式碼編輯器開啟Vue 3程式碼庫。我們將使用VSCode，下面讓我們繼續努力碼字。

使用WordPress API

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

顯示文章列表組成部分

下面的程式碼片段顯示了我們如何使用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">
              Latest Backend Dev. Articles
            </h2>
            <h3 class="article-subtitle">
              Latest Backend Dev. Articles curated daily by the community.
            </h3>
          </div>
        </div>
        <div class="row mb-1 mt-5">
          <post v-for="(post, i) in posts" :key="i" :post="post" />
        </div>
      </div>
    </div>
    <div class="col-md-12 col-sm-12-col-xs-12 text-center mb-5">
      <Button link="/posts" class="col p-3">More Articles</Button>
    </div>
  </section>
</template>

<script>
import { mapState } from 'vuex'
export default {
  computed: {
    ...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/' + post.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/' + category.slug"
        class="btn-tag"
      >
        {{ category.title }}
      </a>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'

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

下面是對後端內容的無WordPress API進行API呼叫的儲存：

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
    }
  },
 }

使用伺服器部署無頭WordPress

最後，使用託管服務部署您的無頭WordPress非常容易。

要將您的無頭WordPress部署到Kinsta，請單擊DevKinsta儀表盤上的Push to Staging按鈕，然後使用登入憑據登入到Kinsta。

最後，您可以將 Vue .js例項部署到您所選擇的任何雲託管提供商。請務必相應地更新您的無頭WordPress端點，以便在現場生產環境中測試您的應用程式。

小結

無頭WordPress及其帶來的好處將持續一段時間。隨著越來越多的開發者和網站所有者開始瞭解無頭方案的好處，它的受歡迎程度將繼續增長。

在本指南中，我們向您介紹了無頭WordPress的特點和優缺點，並向您展示瞭如何使用DevKinsta構建和部署第一個無頭WordPress。您現在正在順利實現無頭WordPress。