人工智慧、改進的開發工具和現代化的託管環境，正讓無頭 WordPress 再次受到設計師和開發者的關注。這種演變正在重塑分散式數字體驗的設計、構建和部署方式。
在本教程中，我們將探索如何使用 Loveble（一款人工智慧驅動的前端構建器）來建立一個由無頭 WordPress 後端驅動的現代化網站。
我們今天所看到的，預示著 WordPress 的未來發展方向，無論採用無頭還是傳統方式：一種更加開放、協作且人工智慧輔助的數字體驗建立方法，將內容管理與創意設計自由完美融合。
瞭解無頭WordPress
搭建無頭 WordPress 環境比想象中要簡單。您可以將其理解為將 WordPress 分成兩部分：
- 後端 – WordPress 繼續像往常一樣管理您的內容、媒體和資料。
- 前端 – 一個獨立的應用程式負責處理所有內容的外觀和行為。
透過將兩者分離，您既可以保留 WordPress 可靠的內容管理功能，又能自由地使用 React 或 Vue 等現代前端框架進行設計和構建。這相當於將 WordPress 的優勢發揮到極致，並超越傳統架構的侷限。
換句話說：WordPress 負責結構（您的內容），而前端負責樣式（內容的呈現方式）。
為什麼選擇Lovable？
無頭 WordPress 真的有必要嗎？這取決於您的目標。對於許多專案而言，標準的 WordPress 架構仍然是最簡單高效的選擇。但是，如果您需要更高的靈活性、更快的迭代速度，或者想要構建超越傳統主題和外掛的現代 Web 應用，那麼無頭 WordPress 的優勢就顯現出來了。
在這個專案中，我們使用了 Lovable，這是一個由人工智慧驅動的開發平臺，可以幫助您生成、編輯和管理前端程式碼。它使用 React、Tailwind CSS 和 Vite 等現代工具進行構建，並利用人工智慧提示來處理佈局、樣式和元件邏輯。
換句話說，Lovable 本身並不是前端，而是建立和維護前端的環境。
以下幾點使其成為我們實驗的理想之選：
- 版本控制的靈活性：可輕鬆與 GitHub、GitLab 或 Bitbucket 進行雙向同步。
- 跨平臺設計：可從單個 WordPress 後端構建適用於 Web、移動裝置或自助服務終端顯示屏的內容。
- 即時迭代：使用 AI 提示，可在幾秒鐘內更新佈局、樣式或元件。
- 解耦式安全性：前端無需直接訪問資料庫。
- 支援靜態構建：可輕鬆部署為靜態 HTML、CSS 和 JavaScript，從而獲得更佳的效能和可靠性。
當然，無頭架構並非完美無缺。維護多層堆疊可能會使除錯更加複雜，並且在前端渲染內容的外掛可能需要自定義 API 橋接。不過，對於靜態網站或內容驅動型網站而言，將 WordPress 與 Lovable 結合使用，可以快速、現代地探索無頭架構的強大功能。
入門指南
在構建專案之前，讓我們先設定技術棧的兩個主要部分：前端使用 Lovable，後端使用 WordPress。
步驟 1：建立Lovable專案
訪問 loveable.dev 並建立一個免費帳戶。進入控制面板後，輸入簡短提示即可開始一個新專案。
Lovable 的聊天介面
聊天介面讓您感覺就像在和隊友聊天一樣。您可以像在真實對話中一樣自然地輸入文字。例如，您可以先問一個簡單的問題：
How do we start building a frontend with WordPress on the backend? #譯文： 我們如何開始使用 WordPress 作為後端來構建前端？
Lovable 會提供清晰的指導，引導您瞭解各種選擇：
Building a React frontend with WordPress as a headless CMS is a solid approach. You can use the built-in WordPress REST API or install WPGraphQL for more complex data queries. #譯文 使用 WordPress 作為無頭 CMS 構建 React 前端是一個可靠的方法。您可以使用 WordPress 內建的 REST API，也可以安裝 WPGraphQL 來進行更復雜的資料查詢。
第一次交流為整個流程定下了基調。它快速概覽了各種可能性，並幫助您瞭解 WordPress 將如何與您的前端整合。
之後，您可以提示 AI 儘量簡化操作，從而完善您的想法：
Let's keep it simple. We just want to build a demo blog site and have a page to serve as a dynamic style guide. #譯文： 簡單點說，我們只想搭建一個演示部落格網站，並建立一個頁面作為動態樣式指南。
Lovable 會立即進行調整，建立一個簡潔的演示網站，並設定一個樣式指南頁面，供您日後進行全域性設計更新時使用。
接下來，溝通將自然而然地展開。您和 Lovable 會反覆溝通，完善細節，明確下一步所需的事項。在某個階段，Lovable 可能會向您詢問一些必要的設定資訊，例如：
1. Do you have a WordPress site URL? (e.g., https://yoursite.com) 2. Is the WordPress REST API publicly accessible? 3. What WordPress content should map to your blog? (posts, pages, or custom post types?) 4. Are there custom fields you’d like to fetch? (e.g., read time or featured flag) #譯文 1. 您有 WordPress 網站 URL 嗎？（例如：https://yoursite.com） 2. WordPress REST API 是否公開可訪問？ 3. 哪些 WordPress 內容應該對映到您的部落格？（文章、頁面還是自定義文章型別？） 4. 您是否希望獲取某些自定義欄位？（例如：閱讀時間或特色標記）
提供這些資訊後，Lovable 即可自動生成整合邏輯，將您的前端與 WordPress 後端連線起來。
步驟 2：設定WordPress
在 Lovable 能夠匯入實際內容之前，您需要一個可正常執行的 WordPress 網站作為後端。您的所有文章、頁面和媒體檔案都將儲存在這裡。
為了順利完成設定，請使用可靠的 WordPress 主機。比如您建立新的 WordPress 網站的臨時子域名，例如：
https://your-site.domain.com/
網站建立完成後，請檢查 REST API 是否公開可用。開啟一個新的瀏覽器標籤頁並訪問：
https://your-site.domain.com/wp-json/wp/v2/posts
如果看到顯示帖子資料的 JSON 資料流，說明後端已準備就緒。
步驟 3：將WordPress連線到Lovable
WordPress 網站上線且 REST API 執行正常後，就可以將後端連線到 Lovable 專案了。此時，內容和設計終於可以完美融合。
在 Lovable 的聊天視窗中，您可以直接提問：
Ok, how do we connect your frontend to our WordPress CMS? #譯文 好的，我們如何將您的前端連線到我們的 WordPress CMS？
Lovable 會回覆您一個清晰的方案，解釋所需的一切：
You’ll connect to your WordPress backend using its REST API. What you’ll need: 1. WordPress REST API (built-in, available at yoursite.com/wp-json/wp/v2/posts) 2. A CORS plugin if your frontend is on a different domain 3. (Optional) ACF or custom fields for extra data #譯文 您將使用 WordPress 的 REST API 連線到後端。 您需要準備： 1. WordPress REST API（內建，位於 yoursite.com/wp-json/wp/v2/posts） 2. 如果您的前端位於不同的域名，則需要安裝 CORS 外掛 3. （可選）用於新增額外資料的 ACF 或自定義欄位
此外，它還會概述雙方的操作：
- 在 WordPress 端：確保已啟用 REST API（通常預設啟用）。
- 前端方面：將所有靜態部落格資料替換為對 WordPress 的 API 呼叫，建立一個服務來獲取資料，並處理載入狀態。
你會看到 Lovable 對此進行了清晰的概述，有時甚至會提供類似這樣的示例：
const { data: posts } = useQuery({
queryKey: ['posts'],
queryFn: async () => {
const response = await fetch('https://your-site.domain.com/wp-json/wp/v2/posts');
return response.json();
}
});
接下來，Lovable 會根據您的命令，使用您提供的 WordPress URL 並設定一個前端網站來顯示您的 WordPress 文章。
這是一個無頭 WordPress 部落格的示例。
就是這麼快。整合已上線，連線已驗證，您的無頭網站現在擁有從 WordPress 到 Lovable 的完整內容流。
樣式和設計系統
WordPress 連線上線後，您就可以開始完善網站的外觀和風格了。目前，您看到的所有內容都由 Tailwind CSS 和瀏覽器的預設設定進行樣式設定。這為您提供了一個簡潔的基礎，現在是時候讓它真正屬於您了。
您可以直接問 Lovable：
Is all styling currently provided by TailwindCSS and the User Agent? #譯文 目前所有樣式都由 TailwindCSS 和使用者代理提供嗎？
Lovable 解釋道：
Yes. All styling is currently provided by TailwindCSS (via index.css and tailwind.config.ts) and the User Agent's default styles. The App.css file exists but isn’t imported anywhere. #譯文 是的。目前所有樣式均由 TailwindCSS（透過 index.css 和 tailwind.config.ts）以及使用者代理的預設樣式提供。App.css 檔案存在，但未被匯入。
瞭解了這一點後，您可以開始自定義網站的結構和導航。例如，您可以這樣設定：
Connect to all pages, posts, and media, and set up a header navigation as follows: Home Style Guide Blog Trip To Santa Fe Hello World Make the Home page the root of the site. #譯文 連線到所有頁面、文章和媒體，並按如下方式設定頁首導航： 首頁 樣式指南 部落格 Trip To Santa Fe Hello World 將首頁設為網站的根頁面。
Lovable 會重新組織您的路由，並將 WordPress 文章動態連結到“部落格”下拉選單中。現在，導航可以跨頁面正常工作：首頁、部落格以及您的動態樣式指南，後者將成為您進行全域性設計更改的中心。
調整網站使用者介面。
使用動態樣式指南
您可以在此頁面定義和控制整個網站的全域性樣式。您在此處所做的任何更改都會立即更新所有頁面。
您可以先設定基本調色盤和字型：
Set page background color to #7B3F00. Set all text color to #eee. Heading 1 = 2rem Heading 2 = 1.5rem Heading 3 = 1.25rem Heading 4 = 0.84375rem All other text = 1rem
Lovable 快速應用了新的設計系統，為您的網站帶來溫暖的棕色背景、柔和的灰色文字和一致的字型層次結構。
動態樣式指南頁面。
您可以在這裡繼續完善您的設計方案。例如：
Double the size of all headings. Add 10% left and right margin to the page. Create a 2x2 image gallery with 20px spacing, rounded corners (20px radius), and a 2px solid white border. #譯文 將所有標題的字號加倍。頁面左右邊距各增加 10%。建立一個 2x2 的圖片庫，圖片間距為 20 畫素，圓角半徑為 20 畫素，並新增 2 畫素的白色實線邊框。
Lovable 會即時調整佈局，您可以立即看到圖片庫表單。
向無頭 WordPress 專案新增圖片。
全域性字型和間距調整
您可以透過在全站範圍內應用一致的字型和間距規則，進一步最佳化您的設計：
Align the page title to the left. Use the Cowboy (Rye) font for all headings and Roboto for all other text. Double the line height for all paragraphs and quote elements. Add 5% top/bottom and 10% left/right margins to the quote block. #譯文 將頁面標題左對齊。 所有標題使用 Cowboy (Rye) 字型，所有其他文字使用 Roboto 字型。 將所有段落和引用元素的行高加倍。 為引用塊新增 5% 的上/下邊距和 10% 的左/右邊距。
Lovable 會自動更新您的字型、行高和邊距。
以視覺化的方式自定義頁面佈局。
如果某些內容看起來不正常，例如標題沒有真正左對齊，您可以讓 Lovable 檢查：
The page title isn’t aligned left. Why? #譯文：頁面標題沒有左對齊。為什麼？
它會解釋：
The container has mx-auto, which centers it. I’ll remove that for true left alignment. #譯文 容器設定了 mx-auto，使其居中。我會移除該屬性以實現真正的左對齊。
定義全域性按鈕樣式
接下來，您可以為按鈕設定視覺一致性。在動態樣式指南中，指示 Lovable 建立三種不同尺寸的按鈕，並設定清晰的懸停狀態：
1. Buttons should be rectangular. 2. Use a black background with white text, and invert on hover. 3. The medium button is 125% the width of the small one; the large is 150%. 4. Add 20px border radius. #譯文 1. 按鈕應為矩形。 2. 使用黑色背景和白色文字，懸停時反轉顏色。 3. 中號按鈕的寬度是小號按鈕的 125%；大號按鈕的寬度是小號按鈕的 150%。 4. 新增 20px 的圓角邊框。
如果您沒有立即看到按鈕，Lovable 可以新增一個展示區域供您預覽。按鈕顯示後，它會應用您的自定義樣式。
以下是生成的 CSS 示例，您也可以在 WordPress 中使用：
.wp-button {
background: #000;
color: #fff;
border-radius: 20px;
padding: 0.5rem 0.9375rem;
transition: all 0.3s ease;
}
.wp-button:hover {
background: #fff;
color: #000;
}
.wp-button-sm { width: 100%; }
.wp-button-md { width: 125%; }
.wp-button-lg { width: 150%; }
Lovable 還解釋瞭如何將這些樣式應用到您的 WordPress 主題中：只需將變數複製到主題的 CSS 中，然後在區塊編輯器或模板中應用 .wp-button 類即可。
在網頁上新增自定義按鈕並設定樣式。
部署
連線並設定好無頭網站樣式後，最後一步就是部署，也就是將其釋出到網路上。
Lovable 的程式碼庫具有可移植性，這意味著您可以將前端程式碼推送到任何基於 Git 的平臺並從那裡進行部署。在本指南中，我們將使用 Sevalla，它將強大的雲託管功能與對開發者友好的自動化功能相結合。
Sevalla 提供免費的靜態網站託管服務，支援全球邊緣交付，並在 Git 推送時自動部署。程式碼同步到 GitHub、GitLab 或 Bitbucket 後，只需點選幾下即可將您的程式碼庫連線到 Sevalla。
以下是上線步驟：
- 在 Sevalla 控制面板中，轉到“Static Sites”，然後點選“Add site”。
- 選擇您的 Git 提供商和程式碼倉庫。
- 確認您的預設分支並啟用提交時自動部署。
- Sevalla 會自動檢測您的框架（本例中為 React + Vite）。
- 點選“Create site”，構建過程將立即開始。
幾分鐘內，您的網站即可上線，並擁有一個免費的臨時域名。
實用技巧和其他注意事項
在使用 Lovable 進行無頭構建時，以下幾點尤為突出，它們使整個過程更加流暢易懂。
- 免費和付費方案：Lovable 提供免費和付費方案。免費方案為您提供了充足的實驗空間，而付費方案則提供更長的響應時間和更快的處理速度。
- 無需頻繁重新整理：在大多數情況下，當您在 WordPress 中更改或釋出內容時，Lovable 的介面會自動更新。即時同步快速可靠。
- 直接檔案編輯：與 GitHub 類似，Lovable 允許您直接在平臺內編輯檔案。這便於快速調整或除錯小問題，無需切換到外部編輯器。
- REST API 與 WPGraphQL：對於大多數簡單的專案，WordPress 內建的 REST API 就足夠了。但是，如果您需要更復雜的查詢或關係，WPGraphQL 外掛提供了一個更強大、更結構化的選擇。
- 常見設定問題：如果您遇到連線問題，通常與 CORS（跨域資源共享）或 REST API 訪問許可權有關。Lovable 的 AI 代理可以幫助您快速解決這些問題。
- 快取注意事項：由於您的前端是靜態的，因此在開發過程中，更改可能不會立即生效。進行重大更新時，請清除快取或重新構建。
小結
無頭 WordPress 開闢了一個設計和開發幾乎不受限制的全新空間。透過將 WordPress 作為可靠的內容後端與 Lovable 的 AI 驅動的前端建立功能相結合，您可以比以往任何時候都更快地從概念過渡到線上部署。
隨著人工智慧不斷重塑工作流程，無頭 WordPress 應運而生，成為一種靈活且面向未來的解決方案，能夠滿足創作者對速度、控制和自由度三者兼顧的需求。
評論留言