Lovable 轉 WordPress：專案逐步轉換指南

開始之前本文講什麼

一個 Lovable 轉 WordPress 的範例，轉換前後都可檢視

下面的內容都來自我們實際完成的一次轉換。原版是一個 Lovable App：bruce-banner.lovable.app，一個攝影作品集。轉換結果是在 WordPress 上執行的 bruce.html2wp.dev。你可以在 /wp-admin 進入後台，使用者名稱 demo，密碼 demo。

這次轉換在佈景主題 bruce-banner 上產生了 5 個頁面和 5 篇文章。這在免費版範圍內：免費版每次轉換最多 5 個頁面，無需金鑰。繼續閱讀之前，先把兩個網站並排開啟。本文講的就是兩者之間的差異，你可以自己衡量。

另外兩次 Lovable 轉換也同樣可以檢視。第一個，spark-remix-kindred.lovable.app 變成了 terra.html2wp.dev，一家以 WooCommerce 架設的針織品商店。第二個，bloom-echo-remix.lovable.app 變成了 soria.html2wp.dev，一位婚禮攝影師的網站。三個網站的 WordPress 後台登入都是 demo / demo。

從 Lovable 轉成 WordPress 的 Bruce Banner 作品集：左邊是 Lovable 原版，右邊是 WordPress — Bruce Banner 轉換的並排對比。開啟圖片可以檢視大圖。導覽和編輯效果，請在上面的線上網站中檢視。

這裡的「1:1」究竟指什麼

Lovable App 在瀏覽器中產生的程式碼，就是放進佈景主題的程式碼。沒有人把你的區塊重做成頁面編輯器的小工具，所以你不會得到一個逐頁近似的設計。下面的每一步都由此而來。

Lovable 轉 WordPress 對電腦的要求

建置、瀏覽器相關的工作和所有檢查都在你的電腦上執行。只有建置產出會發送到產生佈景主題的服務。所以，這不是一個上傳 ZIP 就完事的網頁服務，它有一些你應該提前了解的要求：

Node 20 或更高版本，用於建置和本機指令碼。
Python 3，並安裝 Playwright 和 Pillow 套件。Playwright 驅動真實瀏覽器，React App 正是這樣變成 HTML 的。
Docker，並帶有 docker compose 指令。它在你的電腦上啟動一個臨時 WordPress，轉換器先在那裡檢查佈景主題，然後才交給你。
php-cli，因為每個 PHP 檔案在放進 ZIP 之前都要經過語法檢查。
jq、curl、bash 和 tar。目標 WordPress 必須是 6.6 或更高版本。

外掛會在第一步檢查所有這些，並列出兩張清單。第一張是它可以在你自己的資料夾裡自行安裝的東西。第二張是需要你決定的事：Docker、更新版本的 Node，以及啟動 Docker。第二類東西它絕不會背著你安裝。

最讓人意外的是 Docker

其他轉換器不需要它，因為它們跳過了這一步。這裡的轉換器會把產生的佈景主題安裝到一個真實的 WordPress 中並進行測試。瀏覽器和容器正是為此而用。如果你想要一個在瀏覽器裡五分鐘搞定的工具，這個不是。

安裝外掛

外掛我們發布了兩份，每個 AI 代理一份。Claude Code 和 Codex 版本的指令碼和版本號都相同。選你在用的那個。

Claude Code

claude

/plugin marketplace add iOSDevSK/html2wp-cc-plugin
/plugin install html2wp@html2wp

然後，在終端機中執行一次：

終端機

python3 -m playwright install chromium

Codex

終端機

codex plugin marketplace add iOSDevSK/html2wp-codex-plugin
codex plugin add html2wp@html2wp

免費版不需要其他任何設定：無需金鑰、無需註冊、不需要信用卡。如果你不想用終端機，也可以在 html2wp 桌面應用程式中執行同樣的轉換（這是一篇帶截圖的指南）。

轉換從 Lovable 到佈景主題

如何把 Lovable 專案放到你的磁碟上

線上網址不是受支援的輸入，這是有意為之。已發布頁面的副本只保留渲染結果。它丟失了原始碼所掌握的資訊：有哪些路由、元件是什麼、建置會產出什麼。

所以，輸入是一個資料夾。Lovable 會把你的專案同步到 GitHub 儲存庫。連線儲存庫，複製下來，專案就在本機了。不管 Lovable 的介面這個月變成什麼樣，你要的都是這個儲存庫：它就是 Lovable 用來建置網站的那些檔案。

終端機

git clone https://github.com/<you>/<your-lovable-project>.git
cd <your-lovable-project>

你不需要先執行 npm install 或建置。轉換會自己完成。

說「convert this project」

在那個資料夾中開啟 AI 代理，輸入：

claude，在專案資料夾中

/html2wp:html2wp

convert this project

Codex 沒有斜線指令。你只需告訴它 convert this project into a verified WordPress block theme（把這個專案轉換成經過驗證的 WordPress 區塊佈景主題），它就會自己找到 skill。無論用 Claude Code 還是 Codex，這一句話就是全部指令。你不用寫設定檔，也不用選擇建置指令。

Flash 大約需要 30 分鐘，Full 大約一小時，具體取決於頁面數量和電腦速度。它大部分時間無需值守，每完成一步都會報告進度，所以不會一聲不吭。

Lovable 轉成 WordPress 時，React 會怎樣處理

這就是 Lovable 專案多出來的那一步。

舊的 Lovable App（React 和 Vite）只有一個 index.html。它的 body 裡只有一個供 React App 掛載的空元素和一個 script 標籤，所以沒有什麼可轉換的。轉換器先建置專案。然後，一個真實瀏覽器逐一造訪每個路由，同時由記錄器觀察。結果是每個路由一份靜態 HTML，正是後續流程所需要的。以 TanStack Start 建立的新專案已經在伺服器上渲染頁面，轉換器仍會建置它，並用同樣的方式造訪每個路由。

記錄器會擷取什麼

只有在 JavaScript 執行後才存在的狀態。展開的摺疊面板、下拉選單的內容、指令碼修改的 class。記錄器把它們作為資料存在元素上，由一個小型通用執行環境回放。沒有人憑記憶手寫它們。
精確到像素的捲動閾值。在 scrollY > 40 時變化的頁首，用的是某人隨手定的數字。記錄器會找到它，並精確算出它的位置。四捨五入的猜測會讓頁首在錯誤的時刻變化，而且永遠如此。
「只能展開一個」的關係。你先展開 A，再展開 B。A 關上了嗎？單獨記錄每個元素無法判斷，所以記錄器會單獨測試。
捲動進入動畫會保留下來。記錄器擷取它們，佈景主題會按原版一模一樣地回放。沒有 JavaScript 時內容依然可見，元素只在執行環境運作期間隱藏；設定了 prefers-reduced-motion 時，佈景主題會跳過動畫。我們在動畫結束、頁面靜止後測量 1:1 相符程度。

它不會假裝做到的事

無法記錄的行為會列入清單。每個頁面都有自己的清單。請閱讀它。

這一步有自己的檢查，因為之後的任何檢查都看不到它。轉換器會對每個路由的即時頁面截圖，並在 1440、820 和 390 像素寬度下與它的靜態擷取進行比較。如果不一致，這一步就失敗。之後的每一步都是從擷取結果到 WordPress 進行測量，所以在這裡產生的缺陷會躲過後面所有檢查。

不能跳過的檢查

自動檢查結束時，轉換還沒有完成。轉換器會把每個頁面和它的原版並排放進一張圖裡，你要從上到下逐一看完每一張。

有一次轉換中，頁面靠下的位置缺了一整個區塊，而像素比對只顯示 0.4% 的差異。缺了那個區塊，頁面照樣通過檢查。自動檢查天生看不到三類缺陷。第一類是看起來完美、卻什麼都不做的控制項。第二類是從範本來源的那一個頁面寫死進來的值。第三類是只有在捲動、點選或提交表單後才會出現的問題。

除了看起來對不對，還要檢查內容能不能編輯。一個頁面可以做到像素級一致，但網站所有者可能仍然無法編輯它的常見問題或功能網格。我們實際遇到過：一個有五個問題的摺疊面板看起來完全一樣，但沒有任何編輯器能編輯它。只看外觀的檢查放過了它。所以，對每個頁面都要問：能不能在 wp-admin 中編輯每一組重複內容和每一段文字？

安裝佈景主題

你的專案資料夾裡會多出一個佈景主題 ZIP，旁邊是 CONVERSION-REPORT.md。除此之外沒有別的。包含建置結果的工作資料夾位於專案之外的快取資料夾中，所以你的儲存庫保持乾淨。報告是個例外，因為它的讀者是你。它列出轉換涵蓋了什麼、檢查發現了什麼、每一條警告（包括可接受的），以及還有哪些未解決。

在 WordPress 中進入外觀 → 佈景主題 → 安裝佈景主題 → 上傳佈景主題，選擇 ZIP 並啟用。佈景主題是獨立的。頁面、部落格、表單、選單、SEO 和重新導向都是它自己的程式碼。它不需要外掛就能執行，也從不連線我們的任何伺服器。

之後與佈景主題長期相處

轉成 WordPress 後如何編輯網站：三種方式

部落格文章會成為普通的 WordPress 文章，所以你可以直接在區塊編輯器裡寫。頁面文字仍保留在 HTML 中。想不寫程式碼就編輯頁面，有兩個值得了解的選擇，其中一個是頁面編輯器。

方式	你得到什麼	你付出什麼
只用佈景主題	你的程式碼，原封不動。沒有外掛，沒有依賴，沒有需要續訂的東西。文章在區塊編輯器裡寫。	沒有外掛時，頁面文字要在 HTML 裡修改。如果客戶想自己改，可以用 Visual Edit（Lite 免費）。
Visual Edit，我們的外掛	你直接在頁面上點選標題，輸入新內容，然後儲存。文字、圖片、連結、表單和選單都在原處編輯，程式碼保持不變。Lite 免費，無需金鑰。	WordPress 上多裝了一個外掛。Lite 保留 10 步歷史紀錄，沒有 AI 聊天。Pro 每年 €59。
Elementor 或其他頁面編輯器	任何會用 Elementor 的人都能自己重新排列頁面，而會用它的人很多。對於會自己改版面的客戶來說，這種熟悉感是有價值的。	程式碼被重建為編輯器小工具，因此不再是你的程式碼。之後，網站離開 Elementor 就無法顯示，你還要繼承它的結構、CSS 和更新。

如果你轉換的目的是保住設計，那麼頁面編輯器恰恰會毀掉它。手工把設計搬進編輯器，正是網站從此不再像原設計的那一步，這也是這個轉換器存在的原因。但如果設計只是一個起點，客戶下個季度反正要重做一半，那就放心給他們 Elementor。

如果選擇 Visual Edit：Lite 還是 Pro

	Lite（免費）	Pro
點選即編輯內容	✓	✓
表單、選單、SEO 欄位	✓	✓
透過 AI 聊天編輯	–	✓，使用你自己的 API 金鑰
佈景主題匯出	–	✓
Turnstile 表單保護	–	✓
AI 圖片編輯和圖片產生動畫	–	✓
編輯歷史	10 步	300 步

Pro 中的 AI 聊天使用你自己的 API 金鑰。我們不向你出售 token，使用費用由你直接與服務商結算。

Lovable 還是 WordPress？不必二選一

人們通常把它當成二選一。對於內容型網站，其實不必如此。在 Lovable 中，你能快速做出設計。在 WordPress 中，網站可以執行很多年，並由別人來編輯。轉換保留了前者的成果，並把網站搬到後者。佈景主題可以在任何 WordPress 主機上執行，所以網站不必留在你建置它的地方。

搬過去的是網站：頁面、部落格、表單、選單、SEO 和重新導向。搬不過去的是背後的 App：登入、資料庫和對你自己 API 的呼叫。如果你的 Lovable 專案主要是這些，就留在 Lovable。商店介於兩者之間。有 Pro 授權時，商品目錄會變成 WooCommerce，Terra Studios 就是這樣。

Terra Studios：從 Lovable 轉成 WordPress 的 Lovable 商店，在 WooCommerce 上運作 — Terra Studios：一家 Lovable 商店，轉換後在 WooCommerce 上運作。

Lovable 轉 WordPress 的價格和拒絕的情況

免費版向所有人開放，無需金鑰，無需註冊：3 次轉換，每次 5 個頁面，另有共 5 次重新執行。兩項次數都按 IP 位址計算，所以共用一個 IP 的辦公室只有一份額度。免費版用於試用工具、個人網站和非商業用途。

Pro 授權取消頁數限制，轉換和重新執行都不限次數。它還增加了把商店轉換為 WooCommerce 的步驟。免費版完全沒有這一步：對於帶商店的網站，App 會直接拒絕免費轉換，而不是只做一半。Pro 每月 €49 或每年 €490，價格見價格頁面。測試期間首次付款便宜 30%，金鑰透過電子郵件傳送。

有兩種拒絕情況值得提前了解。如果一個 React 專案的路由只按記錄存在（/product/:id，卻沒有可渲染的資料），那它是 Web App，而不是可轉換的網站。轉換器會明確拒絕，而不是隨便交付範本的某一個實例。另外，這是測試版：檢查能發現大部分差異，但不是全部。因此，逐頁檢查是流程的一部分，而不是可有可無的潤色。

整個流程的逐步指南見 html2wp App 文件。三次可以檢視轉換前後的 Lovable 轉換，見本文開頭的範例。