Lovable 转 WordPress：项目分步转换指南

开始之前本文讲什么

一个 Lovable 转 WordPress 的示例，转换前后都可查看

下面的内容都来自我们实际完成的一次转换。原版是一个 Lovable 应用：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 应用在浏览器中生成的代码，就是放进主题的代码。没有人把你的区块重做成页面构建器的小部件，所以你不会得到一个逐页近似的设计。下面的每一步都由此而来。

把 Lovable 转换为 WordPress 对电脑的要求

构建、浏览器相关的工作和所有检查都在你的电脑上运行。只有构建产出会发送到生成主题的服务。所以，这不是一个上传 ZIP 就完事的网页服务，它有一些你应该提前了解的要求：

Node 20 或更高版本，用于构建和本地脚本。
Python 3，并安装 Playwright 和 Pillow 包。Playwright 驱动真实浏览器，React 应用正是这样变成 HTML 的。
Docker，并带有 docker compose 命令。它在你的电脑上启动一个临时 WordPress，转换器先在那里检查主题，然后才交给你。
php-cli，因为每个 PHP 文件在放进 ZIP 之前都要经过语法检查。
jq、curl、bash 和 tar。目标 WordPress 必须是 6.6 或更高版本。

插件会在第一步检查所有这些，并列出两张清单。第一张是它可以在你自己的文件夹里自行安装的东西。第二张是需要你决定的事：Docker、更新版本的 Node，以及启动 Docker。第二类东西它绝不会背着你安装。

最让人意外的是 Docker

其他转换器不需要它，因为它们跳过了这一步。这里的转换器会把生成的主题安装到一个真实的 WordPress 中并进行测试。浏览器和容器正是为此而用。如果你想要一个在浏览器里五分钟搞定的工具，这个不是。

安装插件

插件我们发布了两份，每个智能体一份。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”

在那个文件夹中打开智能体，输入：

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 应用（React 和 Vite）只有一个 index.html。它的 body 里只有一个供 React 应用挂载的空元素和一个 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 和重定向都是它自己的代码。它不需要插件就能运行，也从不连接我们的任何服务器。

之后与主题长期相处

从 Lovable 转换为 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 和重定向。搬不过去的是背后的应用：登录、数据库和对你自己 API 的调用。如果你的 Lovable 项目主要是这些，就留在 Lovable。商店介于两者之间。有 Pro 许可证时，商品目录会变成 WooCommerce，Terra Studios 就是这样。

Terra Studios：转换为 WordPress 后的 Lovable 商店，运行在 WooCommerce 上 — Terra Studios：一家 Lovable 商店，转换后运行在 WooCommerce 上。

Lovable 转 WordPress 的价格和拒绝的情况

免费版向所有人开放，无需密钥，无需注册：3 次转换，每次 5 个页面，另有共 5 次重新运行。两项次数都按 IP 地址计算，所以共用一个地址的办公室只有一份额度。免费版用于试用工具、个人网站和非商业用途。

Pro 许可证取消页数限制，转换和重新运行都不限次数。它还增加了把商店转换为 WooCommerce 的步骤。免费版完全没有这一步：对于带商店的网站，应用会直接拒绝免费转换，而不是只做一半。Pro 每月 €49 或每年 €490，价格见价格页面。测试期间首次付款便宜 30%，密钥通过邮件发送。

有两种拒绝情况值得提前了解。如果一个 React 项目的路由只按记录存在（/product/:id，却没有可渲染的数据），那它是 Web 应用，而不是可转换的网站。转换器会明确拒绝，而不是随便交付模板的某一个实例。另外，这是测试版：检查能发现大部分差异，但不是全部。因此，逐页检查是流程的一部分，而不是可有可无的润色。

整个流程的分步指南见 html2wp 应用文档。三次可以查看转换前后的 Lovable 转换，见本文开头的示例。