Headless WordPress 綜合指南：您需要知道的一切

已發表: 2022-04-07

WordPress 是地球上最流行的內容管理系統 (CMS)。 截至 2022 年 3 月，它以一種或另一種方式為 43.3% 的所有網站提供支持。 它的受歡迎程度似乎每天都在增長。

儘管非常流行、用戶友好且安全，但 WordPress 確實有一些缺點。 開發人員最大的擔憂是它對特定於平台的插件、主題和工具的限制。 如果你想走出這個領域，那是行不通的。

隨著每個月都有新的內容渠道進入市場，傳統的 WordPress 可以阻止您擴大內容範圍。 這就是無頭 WordPress 的用武之地。它具有多渠道方法、更高的性能和更好的靈活性。

在本指南中，我們將討論：

A. 什麼是無頭 WordPress？
B. 無頭 WordPress 如何工作？
C. 如何設置無頭 WordPress？
D. 無頭 WordPress 的最佳框架選項
E. 無頭 WordPress 的好處
F. Headless WordPress 的缺點
G. 無頭 WordPress 的 SEO 基礎知識
H. 什麼時候不應該使用 Headless WordPress？
一、Headless WordPress 的未來展望

興奮地了解無頭 WordPress？ 讓我們潛入水中！

A. 什麼是無頭 WordPress？

在一個網站中，有兩個界面，前端和後端。 前端由我們訪問網站時看到的顯示器或網頁組成。 後端是腳本和內容數據庫存儲在服務器上的位置。 您必須訪問後端才能創建、刪除和管理內容，以及其他網站功能。

在傳統的 WordPress CMS 中，前端和後端都是連接或耦合的。 大多數人喜歡使用傳統的內容管理系統，因為它相對更容易管理，更不用說成本競爭力了。

無頭 CMS 或無頭 WordPress 與其傳統對應物不同。 在這裡，前端和後端都是獨立的或解耦的。 無頭的名稱來自前端或Head獨立於後端或Body工作的事實。

B. 無頭 WordPress 如何工作？

現在您已經了解了無頭 WordPress 的含義，讓我們看看它是如何工作的。 當您從傳統版本遷移到無頭 WordPress 時，您可以繼續上傳、編輯和管理內容。 不同之處在於內容的顯示方式。

在無頭 WP 中，不是直接將內容髮送到前端，而是通過 REST API 進行路由。 換句話說，WordPress REST API 保留了內容管理功能，但無需使用主題和插件來顯示您的內容。

自然，無頭 WordPress 無法控制您的內容的顯示方式。 但它使您可以自由地在多個渠道上發布您的內容，而不受傳統系統的限制。 您必須使用特定於頻道的前端應用程序來查看您的內容的外觀。 這就是無頭 WordPress CMS 的工作方式。

C. 如何設置無頭 WordPress？

如果您已經擁有 WordPress CMS，則可以將其轉換為無頭 CMS。 您可以手動進行無頭 WordPress 開發（如果您喜歡這種事情）或使用插件。

讓我們看看如何。

1. 手動設置

由於 AWS 是最受歡迎的託管服務提供商之一，讓我們談談使用 AWS 設置無頭 WordPress。

  • 創建 AWS 賬戶

    首先，如果您還沒有 AWS 賬戶，您將需要一個 AWS 賬戶。 這是一個簡單的過程。 但是，請記住獲得適用於您的無頭 CMS 的合適計劃，最好是 Amazon S3 層。

  • 創建您網站的靜態副本

    在此步驟中，您需要安裝 WordPress 以將其用作網站的後端。 您可以稍後在需要時自定義前端。 理想情況下，您應該將後端託管到不同的主機提供商。

    但是，如果您不想為其他網絡託管服務提供商付費，則可以進行本地安裝。 這可以通過使用諸如 XAMPP 或 Flywheel 的 Local 等工具來完成。

    後端安裝到位後，以您想要的方式自定義您的網站。 準備好創建靜態副本。 您可以使用 WP2Static 插件來創建相同的。 如果需要，請隨意使用其他插件。

    如果您使用的是 WP2Static，請從儀表板中的 WP2Static 選項卡訪問網站設置。 它會直接提示您到“部署靜態網站”選項卡。

    選項卡打開後：

    • 將網站 URL 添加到目標 URL 框中
    • 從最頂部的下拉菜單中選擇 Amazon S3（您將在哪里托管您網站的優化版本？）

  • 自動部署靜態頁面

    選擇 Amazon S3 選項後，您將看到一個包含多個選項的新窗口。 將您的訪問密鑰 ID 和秘密訪問密鑰放在手邊，因為您將需要此信息來部署您的靜態網站。

    • 在合適的字段中輸入密鑰
    • 選擇創建 AWS 存儲桶的區域
    • 滾動到頁面底部
    • 單擊開始靜態站點導出按鈕

    這可能需要一段時間，具體取決於您網站的大小和互聯網速度。 部署完成後，您可以看到 WP 站點的實時靜態版本。

2. 使用插件進行設置

您擁有的第二個選項是使用插件。 插件肯定可以讓你的工作更輕鬆。 但是，根據您網站的大小和您想要包含的功能，您可能需要使用多個插件。 最好考慮與經驗豐富的 WordPress 開發機構合作，讓您輕鬆完成這項工作。

我們最喜歡的三個插件是：

  • WPGraphQL

    WPGraphQL是一個免費的開源 WordPress 插件。 它將您的 CMS 與您的表示層分開。 您可以使用它為任何 WordPress 站點提供可擴展的 GraphQL 架構和 API。

  • 浮士德

    您需要將FaustWP插件與 Faust.js 結合使用。 他們一起創建了一個分離的前端，通過 GraphQL 突變和 REST API 端點對 WordPress 進行身份驗證。 將其視為 Faust.js 驅動的前端應用程序和 WordPress 後端之間的連接鏈接。

  • WPGraphQL Yoast SEO 插件

    WPGraphQL Yoast SEO 插件為 WPGraphQL 啟用 Yoast SEO 支持。 您將獲得 WPGraphQL 插件的 SEO 支持。

雖然這些是我們經常使用並深受喜愛的插件，但仍有一些不錯的選擇。 他們兩個是：

  • WP蓋茨比

    WP Gatsby是一個開源的 WordPress 插件。 您可以使用它來優化您的 WordPress 網站，使其成為Gatsby的數據源。

  • 無頭模式

    無頭模式為嘗試訪問您網站的所有用戶設置重定向。 只有 REST API 和 WP GraphQL API 請求會通過。 您可以繼續使用標準的帖子編輯器。

D. 無頭 WordPress 的最佳框架選項

無頭 WordPress 前端的成功取決於選擇合適的框架。 這可能是無頭 WordPress 開發最關鍵的方面。 以下是您的無頭 WordPress 可以使用的一些框架。

1.反應JS

由 Facebook 提供的 React.js 是一個流行的框架。 您可以使用 React JS 創建具有視覺吸引力的交互式數字體驗。 想想漸進式互聯網程序 (PWA) 和單頁軟件 (SPA)。

2.浮士德JS

Faust.js 是一個無頭 WordPress 框架。 它具有靜態站點生成、服務器端渲染、TypeScript、數據獲取、帖子和頁面預覽等功能。

3.蓋茨比JS

我們個人最喜歡的 Gatsby.js 是一個基於 React 的開源框架，它提供了卓越的性能、可擴展性和安全性。 它是一個靜態網頁和網站生成器。

4.Vue JS

另一個多功能框架 Vue.js 在開發人員中很受歡迎，尤其是在無頭 WordPress 方面。 您可以使用 Vue.js 作為前端，使用 Headless WordPress 作為後端來構建快速、健壯且適應性強的 Web 應用程序或網站。

5.下一個JS

Next.js 是一個構建在 Node.js 之上的開源簡約框架。 它具有服務器端渲染和生成靜態網站等功能。

6. 角度 JS

由 Google 維護，Angular.js 是 React 的絕佳替代品。 它更適合創建單頁的 Web 應用程序。 它目前處於長期支持模式。

7. 基礎

Foundation 是目前最先進和響應最靈敏的前端框架之一。 它帶有模板和網格，可幫助您構建基於 HTML 和 CSS 的前端。

8. jQuery

jQuery 不是一個框架，而是一個快速、小型且功能豐富的 JavaScript 庫。 它是最受歡迎的 JS 庫之一。 但是，對於無頭 WP，您只需要 jQuery UI 庫。

E. 無頭 WordPress 的好處

無頭 WordPress CMS 確實提供了一些獨特的好處，尤其是對於中型到大型 WP 網站。 這是它提供的。

1. 更好的前端靈活性

前端靈活性可能是無頭 WordPress 系統最受讚譽的好處。 使用無頭 WP，您可以：

  • 玩不同的編程語言
  • 使用各種工具或應用程序
  • 在不更改內容的情況下自定義設計
  • 使用 React、Faust、Next 等前端框架。
  • 輕鬆擴展前端

2. 增強的安全性

如今，像 DDoS 這樣的網絡攻擊太常見了。 2021 年上半年發生了 540 萬次 DDoS 攻擊，與 2020 年上半年相比增長了 11%。降低此類攻擊的風險和損害非常具有挑戰性。

由於前端和後端分離，無頭 WordPress 不太容易受到 DDoS 攻擊。 缺乏活動的 Web 服務器和可訪問的數據庫意味著攻擊面要小得多。 因此，您的網站仍然不太可能受到這些網絡攻擊的破壞。

3. 更好的性能

動態頁面呈現是傳統 WordPress 的核心。 用技術術語來說，WordPress 依賴 PHP 來生成網頁。 此外，它必須從數據庫中獲取所有資源並將它們放在一個文件中。 這需要時間並減慢您的網站速度。

但是，REST API 呈現內容的速度比 PHP 進程快得多。 此外，沒有插件和主題會影響您的整個系統。 這就是為什麼無頭 WordPress 往往更流暢、更快、響應速度更快的原因。

4. 增加可擴展性

傳統的 WordPress 開發允許您為計算機和移動設備構建出色的網站。 就是這樣。 在 WordPress 領域之外添加功能或用戶體驗是不可能的。

您無法將內容擴展到其他渠道，例如物聯網設備、智能揚聲器、數字顯示器和智能電視等。 預計到 2030 年，活躍物聯網設備的數量將達到 254 億，多渠道發布不再是奢侈品，而是必需品。

這就是無頭 WordPress 讓一切變得更容易的原因。 它使您能夠無縫、快速地接入新的內容渠道。 這就是當今不斷增長的數字環境中的可擴展性 101。

5. 多樣化的技術技能

在傳統的 WordPress 中，您的技術技能仍然僅限於特定於平台的技術。 當然，它使您成為專家，但沒有自由探索可能提供的比看上去更多的新技術。

使用無頭 WP，您可以自由探索新技術。 您可以使用所需的技術或提供更好的功能和靈活性。 天空才是極限。

F. Headless WordPress 的缺點

儘管無頭 WordPress 對您來說是一個絕妙的發現，但它確實有一些缺點。 在嘗試之前，您應該考慮以下不足。

1.沒有所見即所得的編輯器

對於許多人來說，這可能是一個重大的轉折點，尤其是那些不那麼精通技術的人。 使用無頭 WordPress，您將失去實時預覽，即所見即所得的編輯器。 這導致對開發人員的依賴增加。 不僅僅是主要或次要問題，您還需要開發人員進行內容管理。 這會大大降低您的內容敏捷性。

2. 日益複雜的結構

是的，無頭 WordPress 非常靈活。

但是，靈活性帶來了複雜性。

每當您添加新的前端體驗時，您的結構複雜性也會增加。 從本質上講，您還有一個系統需要照顧——更新、維護以及介於兩者之間的所有內容。 換句話說，聘請具有專業知識的 WordPress 開發人員至關重要。

3. 越來越貴

靈活性也是有代價的。 您必須從頭開始構建前端體驗。 對於每一種新的數字體驗，您都必須在創建、集成、部署和維護上花費更多的金錢、時間和資源。 這可能會嚴重影響您的整體預算。

G. 無頭 WordPress 的 SEO 基礎會發生變化嗎？

搜索引擎優化並沒有真正改變那麼多。 但是您可能必須從頭開始打好基礎。 為了加強基礎，請務必考慮以下最佳實踐。

1. Schema.org 結構化數據

使用 Schema.org 結構化數據標記模式，因為它有助於提高搜索引擎的可見性。 它還增加了您的指導內容（例如指南和教程）顯示為特色片段的可能性。

2.元標籤

它們可能是您的 SEO 中最關鍵的部分。 使用元標記時，請保留：

  • 標題標籤少於 70 個字符
  • 160 個字符以下的元描述和相關
  • 標題和描述關鍵字優化

3. 搜索引擎優化審計

使用 Google Analytics 或 SemRush 等工具進行定期 SEO 審核可以大大幫助您保持 SEO 的重點。 WPGraphQL Yoast SEO Addon 之類的插件也可以幫助改善您的 SEO。

4.靜態站點生成器

Gatsby、Hugo 和 Pelican 等許多靜態站點生成器 (SSG) 都內置了 SEO。 只需單擊幾下，您就可以解決大多數技術 SEO 挑戰。

5. 使用 CDN

Cloudflare、StackPath 和 Sucuri 等內容交付網絡有助於優化頁面速度。 您可能已經知道，它是關鍵的 SEO 因素之一。

6.優化圖片

改善 SEO 的另一種方法是優化圖像和媒體。 你應該：

  • 對圖像和視頻使用延遲加載
  • 使用 SVG 或 WebP 格式的圖像
  • 為所有圖像添加相關的 Alt 標籤
  • 為圖像添加 Open Graph 元標記

7. HTTPS 無處不在

隨著用戶越來越關心他們的安全，為您的網站添加額外的安全層永遠不會受到傷害。 所以，到處使用 HTTPS。

根據您網站的大小、添加新鮮內容的頻率以及您的多渠道存在，您可能需要採取額外的 SEO 步驟。 此外，搜索引擎優化不是一勞永逸的事情。 隨著搜索引擎和在線趨勢的發展，您必須不斷更新它。 最好諮詢 SEO 機構來規劃您的長期 SEO。

H. 什麼時候不應該使用 Headless WordPress？

是的，無頭 WordPress 是一項出色的技術。 但它確實涉及很多工作。 所以，問題是，是否值得投入時間、精力和金錢？

簡短的回答是：

無頭 WordPress 並不適合所有人。

在開槍之前，請務必考慮以下因素。

1. 更高的技能組合

儘管您可以享受更大的靈活性和定制化，但除了 WordPress 開發之外，它還需要多種技能。 您使用的前端技術越多，您需要的技能就越多。 如果您要自己處理您的網站，那麼構建和維護無頭 CMS 可能會具有挑戰性。

對於初學者來說，教程只能讓你到目前為止。 此外，學習一門新的編程語言或前端框架需要時間。 這將延遲您的內容交付。

2. 非開發者面臨的挑戰

並非所有參與處理網站的人都像您的開發人員一樣精通技術。 由於缺少所見即所得編輯器和實時預覽的功能，作家、編輯和營銷人員等非技術團隊成員將難以更新無頭 WordPress 中的內容。

也就是說，在分裂的環境中工作也需要練習和適應的意願。 換句話說，新開發人員也可能會發現使用無頭 WordPress 具有挑戰性。

3.雙倍維護

擁有單獨的前端和後端意味著服務器數量增加一倍，維護工作量增加一倍。 它還會使您的頭痛增加兩倍。 如果您物有所值，那麼讓自己經歷所有這些考驗是值得的。 否則，只需堅持您當前的 WordPress CMS。

4. 缺乏實時預覽

如前所述，缺少實時預覽和所見即所得編輯器可能會讓人大失所望，尤其是對於非技術團隊成員而言。 此外，當您添加新的前端渠道時，您的無頭 CMS 一開始甚至將來都可能無法正常工作。 這意味著您將花費大量時間修復錯誤等。

5.昂貴

這是一個重要的考慮因素。 編寫自定義前端代碼不僅耗時而且成本高昂。 每次您利用新的數字體驗時，您都需要進行額外的長期維護。 您需要雇傭更多的開發人員，並在託管和安全等方面花費更多的錢。

一、Headless WordPress 的未來展望

總而言之，無頭 WordPress 將繼續存在。 與任何新技術一樣，用戶需要一些時間來理解和利用它。 但是，我們將看到它的受歡迎程度在未來只會上升。

這就是為什麼：

  • 如果有的話，隨著新插件和解決方案進入市場，分離前端和後端變得越來越容易。 隨著切換到無頭 WordPress 變得毫不費力，越來越多的人會考慮無頭。
  • 物聯網設備和其他數字渠道的日益普及將為無頭 WordPress 創造更多需求。 目前，它似乎是應對這一新興趨勢的最佳答案。
  • 這是一個實驗的好地方。 開發人員，尤其是那些喜歡定制的開發人員，可以使用他們選擇的庫和框架或編程語言。 這就是為什麼即使在未來，開發人員也可能會歡迎無頭 WordPress 開發的原因之一。
  • 最後，它提供了兩全其美。 您將獲得靈活性和出色的 WordPress 後端。 對許多人來說，儘管有一些明顯的缺點，但這是一個問題。

結論

也許您以前從未聽說過無頭 WordPress，或者您聽說過，並且您正在考慮使用無頭 WordPress。 無論哪種情況，您都需要了解這個新的內容管理系統是什麼、它是如何工作的、它的優點和缺點，以及您是否應該考慮對其進行投資。 為此，這份簡短的指南應該很有幫助。

如果您想從傳統 WordPress 遷移到無頭 WordPress 或需要更多信息，請隨時與我們聯繫。 我們的專家將從頭到尾為您提供幫助。