先撒花庆祝一波！ 终于我也是靠 AI 编程赚到钱的人了，这次的经历让我彻底感受到 AI 在开发中的高效，也分享给各位做 WordPress 开发的朋友，亲测好用！

事情是这样的，合作很久的客户最近让我帮他们做个网站，因为这次网站只是做个简单的博客，所以客户比我还洋气，直接在 Readdy 平台上通过聊天描述需求 + 参考网站截图，就把网站样式和前端页面搞定了，还直接生成了可预览的网页。

前端已经做好，我本以为套下 WordPress 模板顶多 2-3 天就能交工，当场就答应了下来。

结果上手才发现踩了坑，Readdy 生成的是纯 JS 前端代码，不是常规的 DIV+CSS 结构，很难直接套用在 WordPress 上。

这下工作量直接翻倍，因为已经答应了客户，也不好再抬价，突然我想到之前分享过使用 Claude Code 开发 WordPress 插件，既然能做插件，那把前端转成 WordPress 主题应该也没问题。

干脆试试让 Claude Code 基于这个纯 JS 前端，直接为我生成适配的 WordPress 主题。

说干就干，这次我直接在 debian12 服务器上操作，全程让 AI 主导开发。

1. 安装 Docker 和 WordPress

首先我给 Claude Code 下达指令，让它用 docker-compose 帮我安装 WordPress，明确了网站根目录在/data/orangebaysports/wwwroot，用局域网 IP 访问、端口设为 30080，还要求自动配置好管理员账号和密码。

没想到 Claude Code 效率超高，很快就完成了全部配置，还清晰给出了访问地址、管理后台入口，以及管理员账号信息，甚至把网站根目录、MySQL 数据目录、docker-compose 配置文件的用途都列得明明白白，连启动、停止、查看日志的常用命令都一并奉上，还贴心提醒我登录后尽快修改管理员密码，全程不用我手动敲一行命令。

2. 安装 WordPress 官方开发技能包

为了让 Claude Code 生成的代码更贴合 WordPress 开发规范、符合行业最佳实践，我让它安装了 WordPress 官方推出的 agent-skills 技能包，直接把 GitHub 仓库地址：https://github.com/wordPress/agent-skills 发给 Claude Code 就行。

Claude Code 接收到指令后，先自动了解项目结构和仓库内容，发现服务器缺少 Node.js，还会自主执行安装命令，全程只需要我确认一次是否继续操作。

安装完成后，它还把 13 个技能包的名称和对应的用途逐一罗列并翻译成中文，从区块开发、插件架构，到 REST API、性能优化，覆盖了 WordPress 开发的全场景，有了这些技能包，AI 的开发专业性直接拉满。

3. 直接将前端转成 WordPress 主题

这一步是核心，我先把 Readdy 生成的前端项目文件下载到服务器指定目录，然后给 Claude Code 下达了精准且详细的转换指令，把所有需求一次性说清：

将 /data/orangebaysports/project-7264414 目录下 Readdy 生成的项目转换成 WordPress 主题，主题文件放到 /data/orangebaysports/wwwroot/wp-content/themes/orangebaysports；

导航栏顶端频道分两类，用两个独立菜单实现，样式区分开，首页第一屏右侧 “热门品牌” 也用菜单实现；

创建名为 “Brand” 的自定义分类法，为 category、tag、brand 都添加 “中文网站名称” 和 “英文网站名称” 的后台自定义字段；

支持在后台设置 / 更换首页顶端幻灯片，保留所有页面右上角的中英语言切换按钮（暂不实现功能）；

将 logo、icon、JS、CSS 等外部引用资源下载到主题文件夹，示例文章图片无需下载，主题开发完成后自动激活。

指令下达后，Claude Code 先进入规划模式，自动探索 Readdy 前端项目和已搭建的 WordPress 环境，梳理出完整的开发实现方案，确认后就开始编写代码，全程无需我干预。

很快，Claude Code 就完成了主题开发，还清晰列出了生成的主题文件结构、模板部件、CSS 和 JS 资源，以及对应的 WordPress 配置结果，细节拉满：

完整主题文件结构：包含 style.css、functions.php、header.php、footer.php 等核心文件，还有首页、文章详情页、归档页、搜索页、404 页等专属模板，覆盖 WordPress 主题所有基础场景；看了下生成的 index.php 代码，完全符合 WordPress 开发规范：

实用模板部件：单独拆分出英雄网格、移动端轮播、文章卡片、文章列表、热门品牌侧边栏等模板部件，方便后续修改维护；

本地化资源：把 Readdy 前端的 Tailwind 样式转换成 theme.css，开发了导航滚动、汉堡菜单、轮播切换等专属 JS，还将 RemixIcon 字体全部下载到本地，摆脱外部链接依赖；

一键配置生效：主题开发完成后自动激活，按需求创建了 3 个专属菜单、10 个分类、10 个品牌自定义分类，甚至还生成了 11 篇示例文章，直接就能预览效果。

4. 最终完美复现前端设计

打开搭建好的 WordPress 演示站点，效果直接超出预期，完美复现了 Readdy 生成的前端设计，导航栏的两类频道、首页的幻灯片、图片 + 文字的信息流文章展示、右侧的热门品牌板块，和客户最初想要的效果一模一样。

文章详情页的面包屑、标签、富文本样式，分类归档页、搜索页、404 页的展示效果全部正常，后台还能灵活设置分类、品牌的中英文名称，更换首页幻灯片，完全满足客户的使用需求，原本以为要折腾好几天的活儿，靠 Claude Code 全程 AI 开发，没多久就搞定了，高效又省心。

简单总结一下

这次赚钱的经历让我真切感受到，AI 编程已经不是 “花架子”，而是能实实在在提高开发效率、帮我们赚钱的工具。

尤其是做 WordPress 开发，遇到这种非标准的前端代码，不用再手动一点点改写，只要给 Claude Code 下达精准、详细的指令，搭配官方开发技能包，它就能按照 WordPress 规范完成开发，省时又省力。

如果还不知道如何开始的同学，可以看一下这几篇文章：

1. AI 开发手把手教程：10 分钟搞定｜用 Claude Code + WordPress Studio 做插件

2. WordPress 官方技能包：真正的降维打击！WordPress 官方开源 13 个 Agent Skill，AI 写主题插件时代开启！

3. 如果怕 AI 太耗 Token：来试试阿里百炼 Coding Plan，首月仅 7.9 元，兼容 AI 编程工具，且集成四大模型，选择 MiniMax 2.5 模型，在 Claude Code 中使用和 Claude 自己的模型已经很接近。