在當今的網站開發中,解耦前端和後端系統已獲得了巨大的發展,無頭網站也應運而生。
傳統上,內容管理系統(CMS)總是耦合在一起,但這帶來了許多限制,如靈活性和可擴充套件性受限。然而,現代的無頭內容管理系統使開發人員能夠通過無頭內容管理系統將使用任何框架構建的前端與後端分離開來。
什麼是無頭內容管理系統?
無頭內容管理系統是一種專門的內容管理系統,只能管理網站後臺。與傳統的內容管理系統不同,它並不決定內容在前端的顯示方式。相反,它為開發人員提供了一個應用程式程式設計介面(API),以便向任何裝置或平臺檢索和提供內容。
如今,無頭 CMS 平臺層出不窮。然而,從您已經熟悉的 WordPress 過渡到無頭內容管理系統似乎沒有必要。幸運的是,有一種替代方案–無頭 WordPress。
無頭 WordPress
傳統形式的 WordPress 本身並不是無頭 CMS。WordPress 是一種流行且功能強大的內容管理系統,以內容建立和管理的易用性和靈活性而著稱。不過,它傳統上是將內容管理和展示方式結合在一個系統中。
如今,開發人員利用 WordPress 的 REST API 建立了 WordPress 的無頭實現。在這種情況下,WordPress 的功能仍然是內容管理系統,您可以在其中建立、管理和儲存內容。不過,WordPress 的前端或網站並不是直接通過 WordPress 模板和主題來呈現的,而是與後臺分離的。
這樣,開發人員就可以使用不同的技術和框架構建應用程式,同時還能利用熟悉的 WordPress 內容管理功能。儘管這不是預設配置,但這是一種讓WordPress的功能更加無頭化的方法。
本文將探討從無頭 WordPress CMS 獲取資料到前端框架的兩種方法,重點介紹兩種主要方法: WPGraphQL 和 REST API。
無頭 WordPress 的工作架構。
瞭解無頭 WordPress 的 REST API
REST API是WordPress開發中的一個基礎支柱,它有助於以JSON格式檢索資料。從WordPress 4.7開始,它就內建於WordPress中,無需任何外掛即可執行。
它提供對網站內容的資料訪問,並實施相同的身份驗證限制–網站上的公開內容通常可通過 REST API 公開訪問,而私人內容、受密碼保護的內容、內部使用者、自定義帖子型別和後設資料只有通過身份驗證或在您特別設定的情況下才能訪問。
要獲取 JSON 格式的 WordPress 資料,請在 WordPress 網站 URL 上新增 /wp-json
:
http://yoursite.com/wp-json
如果您訪問 http://yoursite.com/wp-json
時預設未啟用 JSON API,您可以通過開啟 WordPress 設定下的固定連結並選擇 “文章名稱” 或除樸素之外的任何其他名稱來啟用它:
如何配置無頭 WordPress REST API。
這適用於本地和公共 WordPress 網站,為文章、頁面、評論、媒體等提供端點。
http://yoursite.com/wp-json/wp/v2/posts http://yoursite.com/wp-json/wp/v2/comments http://yoursite.com/wp-json/wp/v2/media
使用 REST API 可以做更多事情。閱讀我們的完整指南,瞭解更多資訊。
探索無頭 WordPress 的 WPGraphQL
2012 年,Facebook 推出了 GraphQL,這是一種通過 API 進行資料檢索的革命性方法。它的宣告性和選擇性資料獲取為傳統的 REST API 提供了一個強大的替代方案。
2015 年,Jason Bahl 意識到人們需要一種能將 GraphQL 的靈活性與 WordPress 的內容功能相結合的解決方案,於是釋出了 WPGraphQL,為 WordPress 開發人員帶來了遊戲規則的改變。
WPGraphQL 是一款基於 GraphQL 的外掛,它提供了一種更高效、更有針對性的資料查詢方法。它只提供一個端點,可實現精確的資料檢索,並減少 REST API 中普遍存在的過度抓取問題。
如何使用 WPGraphQL
要使用 WPGraphQL,請按以下步驟操作:
1. 安裝 WPGraphQL 外掛:首先在 WordPress 網站上安裝 WPGraphQL 外掛。您可以通過 WordPress 面板或從官方 WordPress 外掛庫下載安裝。
WP 市場中的 WpGraphQL 外掛。
2. 瀏覽 GraphQL Playground:安裝後,WPGraphQL 會提供一個內建 GraphQL Playground。要訪問它,請導航至 WordPress 面板上的 GraphQL 選項卡:
探索 WordPress 中的 GraphQL IDE。
您可以在 playground 中探索模式、執行查詢和互動式測試突變。
3. 建立查詢:利用 GraphQL 的強大功能,根據具體資料要求建立查詢。利用自文件模式瞭解可用資料和關係。
使用 WPGraphQL 獲取 WordPress Posts 資料。
現在,您可以將 WPGraphQL 整合到您的前端應用程式中,無論它是用 React、Vue 還是其他框架構建的,只需使用一個 GraphQL 端點即可高效地獲取資料並動態更新您的使用者介面。
WPGraphQL 的主要功能
如下所示,WPGraphQL 具有一些關鍵功能,可提供簡化且有針對性的資料檢索體驗。
精確資料檢索的單一端點
WPGraphQL 提供了一個統一的端點(通常為 /graphql
),可讓您高效地檢索特定資料。這與 REST API 形成鮮明對比,後者需要多個端點才能收集相同的資訊。
就 REST API 而言,假設您想檢索特定帖子及其評論的詳細資訊。例如,您需要向不同的端點發出多個請求:
獲取一篇文章的資訊:
http://yoursite.com/wp-json/wp/v2/posts/123
獲取與文章相關的評論:
http://yoursite.com/wp-json/wp/v2/comments?post=123
另一方面,使用 WPGraphQL,您只需進行一次集中查詢即可獲得相同的結果:
{ post(id: "123") { title content comments { edges { node { content } } } } }
在本示例中,GraphQL 查詢被髮送到一個端點。該查詢指定我們需要有關 ID 為 “123” 的帖子的資訊,包括標題、內容和相關評論。WPGraphQL 會處理該查詢,並一次性返回包含我們所請求資料的響應。
高效檢索的目標查詢
使用 GraphQL,您可以根據自己的需要建立特定的查詢。這樣,您就可以只請求必要的資料,最大限度地減少過度檢索。
假設您想檢索所有文章的一些詳細資訊(標題、作者和日期)。REST API 無法做到這一點。要檢索這些詳細資訊,您需要使用這樣的端點:
http://yoursite.com/wp-json/wp/v2/posts
該端點可檢索所有帖子的整個資料集,包括內容、類別和相關資料。使用 WPGraphQL,您可以建立有針對性的查詢,只獲取所需的特定資料:
{ posts { title date author { name } } }
在本示例中,GraphQL 查詢旨在檢索帖子的詳細資訊。不過,我們只請求標題、日期和作者姓名。WPGraphQL 允許您只請求感興趣的欄位,從而獲得更高效、更輕量級的響應。
多根資源
在 WPGraphQL 中,您可以在單個請求中查詢多個根資源,從而使其變得靈活高效:
{ posts { edges { node { title content } } } pages { edges { node { title content } } } }
為無頭 WordPress 選擇理想的頭
在開始無頭 WordPress 設定之旅的時候,您面臨的關鍵決定之一就是選擇理想的頭,即為使用者介面提供動力並決定使用者體驗的前端技術。
這個決定非常重要,因為它直接影響到網路應用程式的效能、可擴充套件性和可維護性。有幾種前端框架和技術與無頭 WordPress 相容,每種框架和技術都有自己的優勢和注意事項。
例如,您可以選擇靜態網站生成器(SSG)並將其免費部署到靜態網站託管服務中,這樣您只需為 WordPress(後端)提供託管服務,而頭部(前端)則可享受免費託管服務。
同樣,您也可以使用更強大的方法,例如,使用 React 這樣的 JavaScript 庫為前端提供動力,而讓 WordPress 處理後端。
小結
WPGraphQL 和 REST API 都提供了從無頭 WordPress CMS 獲取資料並將其無縫整合到前端應用程式的強大方法。如何在兩者之間做出選擇,取決於專案的具體需求和您偏好的資料檢索方法。
如果您選擇 REST API,您就可以訪問 WordPress 中的內建解決方案,從而輕鬆檢索 JSON 格式的資料。另一方面,WPGraphQL 利用 GraphQL 的強大功能,提供了一種更現代、更高效的方法。
隨著無頭趨勢的不斷髮展,開發人員可以選擇最符合其工作流程和專案目標的工具,確保 WordPress 與他們所選擇的前端框架實現無縫、高效的整合。
評論留言