00 簡介

tip

這系列將結合 WordPress（後端）與 Next.js（前端）打造一個全端網頁。

這裡使用的 Next.js 為 pages router 模式

為什麼使用 "Wordpress"

• 在我負責的公司網頁案件中，主要集中於為商家和企業打造形象網站
• 這類網站的主要任務是敘述品牌的故事和塑造其數位形象
• 客戶無需複雜功能或會員系統的網站
• 客戶需要自由編輯網頁內容，需要有一個後台提供文案內容，並由前台透過 api 的方式串接文案內容

基於上述幾點，WordPress 提供了一個理想的解決方案。它擁有強大的社群支持，開發者可以自由上傳插件到它的外掛庫，也因為其後台操作界面的簡便性，使得即便是技術背景較弱的用戶也能輕鬆管理其網站，降低與客戶溝通的成本，同時也降低我們額外開發網頁後台的成本。

Wordpress Headless CMS

我們這裡所談的 wordpress 跟傳統所謂的套板網頁差距甚大，在 Headless 架構中，WordPress 僅作為內容管理系統，也就是數據的存儲和管理中心。這樣，前端展示層就可以完全自由地使用最新的 Web 技術來建造，例如 React（Next）, Vue（Nuxt）。

核心外掛

建構一個自由度高的 Wordpress cms 需要以下外掛：

• WP GraphQL：提供 WordPress 網站一個 GraphQL API 接口，用於高效地載入和管理數據。
• ACF：增加和管理自訂字段的功能，支援多種數據類型，例如列表、物件、日期選擇器、檔案和圖片上傳、文字欄位等等。
• WPGraphQL for Advanced Custom Fields：讓進階自定義字段 (ACF) 整合至 WPGraphQL 的 Schema 中
• Classic Editor (傳統編輯器)：為 WordPress 網站啟用之前的傳統編輯器（未安裝傳統編輯器）
  
  （安裝傳統編輯器）

note

強烈建議安裝傳統編輯器，以便後續使用 ACF 來新增修改欄位

建議外掛

【功能型】

• Yoast SEO：WordPress 上的全功能 SEO 解決方案，提供頁面 SEO 內容，例如 og 標籤的內容。
• All-in-One WP Migration：備份與還原
• Really Simple SSL：一個輕量化的 SSL 外掛，讓網站從 http 變成 https。

【WPGraphQL schema】

• Add WPGraphQL SEO：若安裝Yoast SEO 則需安裝 Add WPGraphQL SEO WPGraphQL 才能查詢到 Yoast SEO 的資料。
  為 WPGraphQL 插件添加 Yoast SEO 的 schema。
• WPGraphQL Meta Query：為 WPGraphQL 插件添加 Meta 查詢支持，需要 WPGraphQL 版本 0.0.23 或以上。
• WPGraphQL Offset Pagination：為 WPGraphQL 插件添加換頁、頁數、分頁功能。
• WPGraphQL Tax Query：為 WPGraphQL 插件添加 Tax_Query 支持，才能夠使用 WPGraphQL 來查詢符合特定標籤或分類的欄位資料，要求 WPGraphQL 版本 0.4.0 或更新。