Headless WordPress 是甚麼？使用時有何注意？

發布時間：2023.11.24 | 最後更新：2024.03.23

留言

WordPress 成為不少人架設網站的選擇。據統計，43% 網站均以 WordPress 搭建。這除了因為 WordPress 簡單易用，讓不懂程式碼的人也能建立不同功能的網站之外，豐富的外掛和學習資源亦使 WordPress 廣受歡迎。

不過假如你是進階的開發者，一方面想享用 WordPress 的內容管理功能，另一方面想更隨心所欲地開發網站，便可以考慮採用 Headless WordPress。本網亦正採用 Headless WordPress。

Headless WordPress 是甚麼？
Headless WordPress 有甚麼好處？
Headless WordPress 有甚麼壞處？
轉移至 Headless WordPress 有何注意事項？
我有轉用 Headless WordPress 的需要嗎？

Headless WordPress 是甚麼？

WordPress 一類的內容管理系統（CMS）一直將管理人員看得到的「內容管理」和訪問看得到的「前端界面」整合成一體，而如果一個網站是採用 Headless WordPress 的話，即是說該網站採用 WordPress 來管理內容，但採用其他技術建立展示內容的前端界面。

為甚麼自行開發的前端界面也能展示 WordPress 的內容呢？原因是開發者利用了 WordPress 的 REST API 來與後台溝通。使用 WordPress 的 API 時擷取資料時，會回傳 JSON 檔案，而前端便會解析 JSON 檔案，將資料展示給訪客。

RESTFUL API 中文教學：一文看清 API、CRUD 及 Restful

以下是透過 API 擷取文章時的回傳的 JSON 檔案範例。透過前端技術，便可將這些資料輸出於網頁或應用之中。

[
  {
    "id": 14323,
    "date": "2023-11-17T16:43:36",
    "date_gmt": "2023-11-17T08:43:36",
    "guid": {
      "rendered": "https://ysnweb.net/?p=14323"
    },
    "modified": "2023-11-17T17:50:22",
    "modified_gmt": "2023-11-17T09:50:22",
    "slug": "norton-360-doutble-eleven-offer-2023",
    "status": "publish",
    "type": "post",
    "link": "https://ysnweb.net/post/norton-360-doutble-eleven-offer-2023/",
    "title": {
      "rendered": "Norton 360 限時雙十一優惠，首年訂閱只需 HKD 398"
    },
    "content": {
      "rendered": "\n<p>著名防毒軟件 Norton 360 在 11 月推出限定優惠，價錢最高的 Deluxe 進階版之首年訂閱優惠減至 HKD 398。</p>\n\n\n\n<h2 class=\"wp-block-heading\">首年訂閱省近半　需注意續訂細節</h2>\n\n\n\n<p>Norton 360 共有四個訂閱計劃，分別為「Norton 防毒加強版」、「Norton 360 標準版」、「Norton 360 進階版 3 台設備」以及「Norton 360 進階版」。在即日起至 11 月 22 日，Norton 360 進階版提供雙 11 優惠，首年訂閱優惠由 HKD 468 減至 HKD 398。</p>\n\n\n\n<p>要注意的是，假如用戶續期訂閱，翌年就會收取原價 HKD 919。假如用戶知道自己不打算繼續使用，就要在限期前取消授權，請必務留意 Norton 360 的條款及細則。</p>\n\n\n\n<p>至於其餘三個訂閱計劃亦有首年訂閱優惠，唯該優惠乃恆常性質，並非雙 11 限定。其中，只提供防毒功能的「Norton 防毒加強版」的首年訂閱優惠已由年初的 HKD 88 加價至 HKD 118。與「Norton 防毒加強版」相比，其餘三個 Norton 360 訂閱計劃包括了<a href=\"https://ysnweb.net/post/norton-360-backup-tutorial/\" target=\"_blank\" rel=\"noreferrer noopener\">雲端備份</a>、VPN 甚至暗網偵測功能，有更全面的保障。</p>\n\n\n\n<blockquote class=\"wp-block-quote\">\n<p><strong>Norton 360</strong></p>\n\n\n\n<p>前往：<a href=\"https://go.ysnweb.net/norton\" target=\"_blank\" rel=\"noreferrer noopener\">官方網站</a></p>\n</blockquote>\n",
      "protected": false
    },
    "excerpt": {
      "rendered": "<p>著名防毒軟件 Norton 360 在 11 月推出限定優惠，價錢最高的 Deluxe 進階版之首年訂閱優惠減至 HKD 398。</p>\n",
      "protected": false
    },
    "author": 2,
    "featured_media": 14326,
    "comment_status": "closed",
    "ping_status": "closed",
    "sticky": false,
    "template": "",
    "format": "standard",
    "categories": [
      86,
      1284
    ],
    "tags": [
      121,
      1333
    ],
  }
]

Headless WordPress 有甚麼好處？

1. 更大自由度

WordPress 採用 PHP 程式語言開發，如在不使用外掛的情況下自行開發界面，便需要按照 WordPress 主題的檔案結構以 PHP 開發。Headless WordPress 讓開發者以自己最適合和舒服的程式語言或框架開發前端，建立獨一無二的介面。這亦是本網採用 Headless WordPress 的最大原因。

結合 ACF 等外掛，開發者更可輕易地建立自訂的文章類型（Post type）和分類法（Taxanomy），為 Headless WordPress 網站帶來更豐富的內容。

2. 更多發布渠道

以往，電腦網頁是獲取資訊的主要渠道，但隨著科技進步，獲取資訊的渠道更多，如手機應用程式（Apps）、聊天機械人（Chatbot）等。藉 Headless WordPress，開發者可在不同渠道透過 API 擷取資訊並回傳至用戶。

3. 更安全

WordPress 作為由 PHP 開發的網絡應用經常遭到黑客攻擊，例如用戶會使用一些外掛提升前端的功能，而該些外掛隨時含有漏洞給人入侵。2023 年，獲眾多使用的 Elementor Pro 便有漏洞遭人利用以入侵 WordPress 系統。

隨著把 WordPress 後端與前端分開，黑客更難找到入侵 WordPress 後端和數據庫的攻擊點。

4. 提升效能

如前端開發得宜，網頁的載入速度可以更快。然而，即使沒有採用 Headless WordPress，一般網站的載入速度亦已足夠地快。

Headless WordPress 有甚麼壞處？

1. 失去「可所見即所得」預覽

將前端與後端分離亦意味著用戶在 WordPress 撰寫文章時，無法即時預覽效果（WYSIWYG），失去 WordPress 其中一項最大優勢。此外，用戶亦不能享受 WordPress 豐富的佈景主題或頁面編輯器功能。

2. 更複雜的維護

用戶需同時維護 WordPress 以及前端應用程式，可能需要更多精力。此外，用戶亦需注意 WordPress 與前端應用程式的磨合。當 Headless WordPress 出現問題，用戶需要更深入地審視。

用戶可能會將ＷordPress 與前端應用程式寄存於不同平台，這亦可能會使環境變得複雜。例如，用戶需為前端網址修改 DNS，以指向前端應用的位置。此外，將前端應用部署於其他的 PaaS 亦會涉及額外開支。

3. 失去外掛支援

WordPress 另一個強大地方是有豐富的外掛支援，但採用 Headless WordPress 代表一些外掛會失去作用。

轉移至 Headless WordPress 有何注意事項？

在本網轉移至 Headless WordPress 時，以下數項成為開發前端時的最大考量與挑戰。

1. 效能與快取

本網的 Headless WordPress 採用 Rails，因此載入速度是最大考量。在採用傳統 WordPress 時，只需簡單使用外掛如 LiteSpeed 便可提升效能，但使用 Headless WordPress 時，就需要自行設定 API 呼叫和網頁 header 的快取。

2. SEO

傳統 WordPress 部署只需透過 SEO 外掛如 AIOSEO 便可提供方便的設置，如 Google Search Console 認證、XML Sitemap、Open Graph 標籤等，但採用 Headless WordPress 即表示用戶需自行加入相關 HTML 碼。

網站本身採用 AIOSEO，但開發 Headless WordPress 期間發現，AIOSEO 需要付費才提供 REST API，因此需轉用 Yoast。免費的 Yoast 亦能銜接 WordPress API，發送請求時可直接回傳全部或個別 SEO 相關的 HTML Header meta 標籤。

XML Sitemap 亦是一個問題。因為前端難以擷取後端所有網頁來生產 XML Sitemap，而 Google Search Console 亦無法接受跨域名的 XML Sitemap。解決方法是透過 robots.txt 加入後端的 XML Sitemap 網址，但 Google Search Console 將不會顯示該 Sitemap 的擷取與索引數據，而這亦曝露了後端網址的域名，減低安全性。

使用 Google Search Console，讓網站在 Google 出現！