日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間：8:30-17:00
你可能遇到了下面的問(wèn)題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷解決方案
如何使用Vue創(chuàng)建無(wú)頭WordPress網(wǎng)站

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

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

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

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

什么是無(wú)頭WordPress

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

無(wú)頭WordPress是用來(lái)描述解耦WordPress的術(shù)語(yǔ)。后臺(tái)（管理）部分與WordPress CMS的前端部分是分開(kāi)的。您可以使用您選擇的任何前端框架作為獨(dú)立應(yīng)用程序開(kāi)發(fā)和管理前端。

無(wú)頭WordPress的利弊

接下來(lái)，我們將探討無(wú)頭WordPress的優(yōu)缺點(diǎn)，讓您更好地理解這個(gè)概念。

優(yōu)點(diǎn)

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

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

（3）增強(qiáng)的可擴(kuò)展性-擴(kuò)展WordPress有時(shí)可能會(huì)很復(fù)雜，因?yàn)槟鸁o(wú)法完全控制驅(qū)動(dòng)WordPress的所有組件和代碼，主要是在您不是開(kāi)發(fā)人員的情況下。但是通過(guò)WordPress的解耦，可以輕松地單獨(dú)縮放每個(gè)部分，并且您可以輕松地檢測(cè)出需要縮放的部分。

（4）更嚴(yán)密的安全-我們無(wú)法充分強(qiáng)調(diào)無(wú)頭WordPress的安全優(yōu)勢(shì)，因?yàn)榻怦頦ordPress在抵御黑客和DDoS攻擊方面具有很高的安全優(yōu)勢(shì)。無(wú)頭WordPress方法使得黑客很難訪問(wèn)您的敏感后端數(shù)據(jù)，因?yàn)樗c您的前端（面向用戶的網(wǎng)站）是分開(kāi)的。

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

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

缺點(diǎn)

我們將更深入地探討無(wú)頭的缺點(diǎn)，但其主要缺點(diǎn)是：

何時(shí)無(wú)頭WordPress可能不是最好的選擇

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

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

誰(shuí)應(yīng)該使用無(wú)頭WordPress

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

誰(shuí)應(yīng)該避免使用無(wú)頭WordPress

以下幾種情況下，使用無(wú)頭WordPress不是一個(gè)好的選擇：

如何搭建無(wú)頭WordPress（構(gòu)建應(yīng)用程序）

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

使用Devkinsta設(shè)置無(wú)頭WordPress

我們將使用DevKinsta開(kāi)發(fā)無(wú)頭WordPress，DevKinsta是一個(gè)流行的WordPress本地開(kāi)發(fā)環(huán)境，用于設(shè)計(jì)、開(kāi)發(fā)和部署WordPress站點(diǎn)，使您的本地機(jī)器舒適。

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

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

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

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

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

接下來(lái)，單擊“Open Site”，在默認(rèn)瀏覽器上打開(kāi)新創(chuàng)建的WordPress實(shí)例。

最后，您可以通過(guò)訪問(wèn) http://headless-wordpress-news-blog.local/wp-admin 鏈接并鍵入創(chuàng)建新實(shí)例時(shí)輸入的管理員登錄憑據(jù)。

注意，我們已經(jīng)在本地主機(jī) http://news-blog.local使用URL  http://headless-wordpress-news-blog.local 設(shè)置了無(wú)頭WordPress，我們將在整個(gè)教程中使用它。

配置我們的無(wú)頭WordPress

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

我們將在本教程中完全禁用該主題，通過(guò)安裝簡(jiǎn)單的網(wǎng)站重定向插件并進(jìn)行設(shè)置，僅通過(guò)基于WordPress REST API的端點(diǎn)訪問(wèn)內(nèi)容。

轉(zhuǎn)到Plugins > 安裝插件并搜索Simple Website Redirect，安裝并啟用：

WordPress插件安裝

接下來(lái)，單擊插件Settings并輸入基于前端的URL (e.g. http://news-blog.local),，單擊Advanced setting options并將以下路徑 — /wp-admin, /wp-login.php和/wp-json 添加到Exclude Paths。

最后，通過(guò)在Redirect Status下拉列表中選擇Enabled 來(lái)啟用插件：

Simple Website Redirect插件設(shè)置

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

WordPress固定鏈接

現(xiàn)在當(dāng)你訪問(wèn)你的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開(kāi)發(fā)工具創(chuàng)建Vue 3應(yīng)用程序，以連接無(wú)頭WordPress。您可以閱讀有關(guān)Vue 3和Vite開(kāi)發(fā)工具的更多信息。

在本文中，我們將構(gòu)建一個(gè)新聞博客。該項(xiàng)目的所有后端內(nèi)容管理都將使用Devkinsta由我們的無(wú)頭WordPress開(kāi)發(fā)和托管。

鍵入以下簡(jiǎn)單命令：

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

如果您的用戶名中存在空格問(wèn)題，請(qǐng)嘗試使用：

npx create-vite-app news-blog

最后，使用您選擇的任何代碼編輯器打開(kāi)Vue 3代碼庫(kù)。我們將使用VSCode，下面讓我們繼續(xù)努力碼字。

使用WordPress API

我們已經(jīng)著手開(kāi)發(fā)Vue應(yīng)用程序的其余部分，以節(jié)省您的閱讀時(shí)間，但您可以繼續(xù)從我的GitHub克隆存儲(chǔ)庫(kù)。

顯示文章列表組成部分

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

顯示單一文章組成部分

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

下面是對(duì)后端內(nèi)容的無(wú)WordPress API進(jìn)行API調(diào)用的存儲(chǔ)：

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ù)器部署無(wú)頭WordPress

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

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

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

小結(jié)

無(wú)頭WordPress及其帶來(lái)的好處將持續(xù)一段時(shí)間。隨著越來(lái)越多的開(kāi)發(fā)者和網(wǎng)站所有者開(kāi)始了解無(wú)頭方案的好處，它的受歡迎程度將繼續(xù)增長(zhǎng)。

在本指南中，我們向您介紹了無(wú)頭WordPress的特點(diǎn)和優(yōu)缺點(diǎn)，并向您展示了如何使用DevKinsta構(gòu)建和部署第一個(gè)無(wú)頭WordPress。您現(xiàn)在正在順利實(shí)現(xiàn)無(wú)頭WordPress。


名稱欄目：如何使用Vue創(chuàng)建無(wú)頭WordPress網(wǎng)站
本文路徑：http://www.dlmjj.cn/article/dhopjcg.html