好看的历史书籍推荐,女强穿越玄幻完结小说,琅琊榜海宴小说

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案

如何使用Vue創(chuàng)建無頭WordPress網(wǎng)站

wordpress一直是開發(fā)者和非開發(fā)者快速構(gòu)建和創(chuàng)建驚人網(wǎng)站的內(nèi)容管理系統(tǒng)。

使用內(nèi)容管理后端與前端分離的微服務體系結(jié)構(gòu)，可以最大限度地控制兩個“端”。這種分離問題正是無頭內(nèi)容管理系統(tǒng)（包括無頭WordPress解決方案）試圖解決的問題。

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

本指南將詳細探討無頭WordPress，以及它的全部內(nèi)容、何時以及為什么應該考慮使用它。最后，我們將探索創(chuàng)建無頭WordPress環(huán)境，使用Vue.js構(gòu)建前端，并部署無頭WordPress。

什么是無頭WordPress

WordPress是一個整體式應用程序，后端和前端部分緊密地纏繞在一起。后端是進行管理的地方，在這里您可以創(chuàng)建、編輯、添加和刪除內(nèi)容，包括更改外觀配置。相反，前端負責向用戶顯示內(nèi)容。

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

無頭WordPress的利弊

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

優(yōu)點

（1）超高速性能-在這個應用程序運行速度極快的時代，您的網(wǎng)站加載時間不應超過幾秒鐘，以免失去訪問者。由于前端與WordPress分離，并且可以使用現(xiàn)代前端工具開發(fā)高性能和可擴展性，因此采用無頭WordPress方法對網(wǎng)站的整體用戶體驗非常有益。

（2）粒度控制-選擇無頭架構(gòu)可以讓您更好地控制設計布局、內(nèi)容展示以及用戶與應用程序前端的交互方式。它還允許從中心位置保護和訪問后端內(nèi)容。

（3）增強的可擴展性-擴展WordPress有時可能會很復雜，因為您無法完全控制驅(qū)動WordPress的所有組件和代碼，主要是在您不是開發(fā)人員的情況下。但是通過WordPress的解耦，可以輕松地單獨縮放每個部分，并且您可以輕松地檢測出需要縮放的部分。

（4）更嚴密的安全-我們無法充分強調(diào)無頭WordPress的安全優(yōu)勢，因為解耦WordPress在抵御黑客和DDoS攻擊方面具有很高的安全優(yōu)勢。無頭WordPress方法使得黑客很難訪問您的敏感后端數(shù)據(jù)，因為它與您的前端（面向用戶的網(wǎng)站）是分開的。

（5）輕量化設計-您將可以更好地控制前端設計的結(jié)構(gòu)和布局。此外，您還可以在前端進行更自由的定制設計；由于RESTAPI調(diào)用，您將能夠利用現(xiàn)代web工具并在前端部署它們。

（6）多渠道內(nèi)容發(fā)布-由于無頭WordPress使用基于API的系統(tǒng)將您的內(nèi)容傳送到前端，因此您可以在任何位置和任何平臺上顯示您的內(nèi)容，包括桌面、網(wǎng)站、移動應用程序和觸摸屏信息亭。還可以充分利用增強現(xiàn)實、虛擬現(xiàn)實和物聯(lián)網(wǎng)設備來顯示和呈現(xiàn)來自基于API的系統(tǒng)的內(nèi)容。

缺點

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

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

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

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

誰應該使用無頭WordPress

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

誰應該避免使用無頭WordPress

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

如何搭建無頭WordPress（構(gòu)建應用程序）

本節(jié)將探討如何構(gòu)建和開發(fā)一個新聞博客，其后端為無頭WordPress，前端為Vue 3。

使用Devkinsta設置無頭WordPress

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

DevKinsta是永遠免費的，它為您開發(fā)和構(gòu)建WordPress提供了巨大的好處和舒適。

您可以從官方網(wǎng)站下載并安裝DevKinsta，并按照文檔中的說明開始。

由于我們已經(jīng)安裝了DevKinsta，我們將打開它并按照下面的步驟設置我們的第一個無頭WordPress。

在DevKinsta儀表板上，使用Nginx、MySQL和任何可用的WordPress版本創(chuàng)建一個新的WordPress站點。此外，您還可以從儀表板導入現(xiàn)有WordPress實例或創(chuàng)建自定義WordPress實例。

接下來，為新創(chuàng)建的WordPress實例提供一個名稱、管理員用戶名和密碼，然后單擊Create并復制詳細信息，同時DevKinsta在本地計算機中創(chuàng)建一個新的WordPress實例。

接下來，單擊“Open Site”，在默認瀏覽器上打開新創(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 設置了無頭WordPress，我們將在整個教程中使用它。

配置我們的無頭WordPress

接下來，在成功登錄到WordPress儀表板之后，您可以繼續(xù)安裝您選擇的任何插件和配置。

我們將在本教程中完全禁用該主題，通過安裝簡單的網(wǎng)站重定向插件并進行設置，僅通過基于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插件設置

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

WordPress固定鏈接

現(xiàn)在當你訪問你的http://headless-wordpress-news-blog.local/wp-json，它應該向您提供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
            }
          }
        }
      ],
...

設置Vue.js（前端）

我們將使用Vite web開發(fā)工具創(chuàng)建Vue 3應用程序，以連接無頭WordPress。您可以閱讀有關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應用程序的其余部分，以節(jié)省您的閱讀時間，但您可以繼續(xù)從我的GitHub克隆存儲庫。

顯示文章列表組成部分

下面的代碼片段顯示了我們?nèi)绾问褂肰ue實例實現(xiàn)WordPress REST API，以顯示來自無頭WordPress的所有文章：

顯示單一文章組成部分

代碼片段顯示了我們?nèi)绾问褂肳ordPress REST API和無頭WordPress檢索一篇文章，并將其顯示在我們的Vue實例中：

下面是對后端內(nèi)容的無WordPress API進行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
    }
  },
 }

使用服務器部署無頭WordPress

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

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

最后，您可以將 Vue .js實例部署到您所選擇的任何云托管提供商。請務必相應地更新您的無頭WordPress端點，以便在現(xiàn)場生產(chǎn)環(huán)境中測試您的應用程序。

小結(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://fisionsoft.com.cn/article/dhopjcg.html