文 | 跨屏互联
接了客户一个博客站。客户自己用 Readdy 把页面样式和前端都做好了，丢给我说"套个 WordPress 就行，两三天的事"。
我当时也觉得简单。结果打开一看——Readdy 生成的是纯 JS 前端，不是常规的 DIV+CSS，直接往 WordPress 模板里塞根本塞不进去。工作量瞬间翻倍。答应了客户又不好抬价。
想到之前用 Claude Code 写过插件，干脆让它把整个前端转成 WordPress 主题。整个过程分几步，每一步都超出预期。
第一步：让 AI 搭环境
我给 Claude Code 下了一条指令：用 docker-compose 装 WordPress，站放在指定目录，局域网 IP 访问，端口 30080，自动配好管理员账号。
几分钟后环境全好了。它不光配完了，还把访问地址、后台入口、管理员账号、目录结构、MySQL 数据目录、docker-compose 配置文件用途一一列出来。连启动、停止、查看日志的常用命令都附上了，提醒我尽快改密码。全程我没敲一行命令。
第二步：装上 WordPress 官方技能包
Claude Code 有官方的 WordPress Agent Skills——一个专门的技能包，包含了 WordPress 开发的 13 个技能模块，覆盖区块开发、插件架构、REST API、性能优化等全场景。装了这个之后 AI 生成的代码质量直接拉满——不再瞎编函数名、不再漏掉标准钩子。
安装很简单，把 GitHub 仓库地址发给 Claude Code，它自己读项目结构、自己处理依赖、自己装。中间发现服务器缺 Node.js，自己装好继续跑。全程只要我确认一次。
第三步：把前端转成 WordPress 主题
这是核心。我把 Readdy 生成的前端文件放到服务器上，给了 Claude Code 一条很详细的指令——导航栏两个菜单分开、创建自定义分类法、支持后台设置幻灯片、中英文名称自定义字段、外部资源下载到本地目录、开发完自动激活主题。一次性说清楚。
Claude Code 先进规划模式，自动探索了前端项目和 WordPress 环境，梳理出完整方案。确认后开始写代码。很快生成了一整套主题文件：style.css、functions.php、header.php、footer.php、首页模板、文章详情页、分类归档页、搜索页、404 页，全部覆盖。还单独拆出了英雄区、轮播、文章卡片、热门品牌侧边栏等模板部件。把前端的 Tailwind 样式转成了 theme.css，JS 交互全部保留，RemixIcon 字体下载到了本地不依赖外部链接。
第四步：直接预览
主题开发完自动激活。导航栏两类频道、首页幻灯片、图文信息流、右侧热门品牌板块——跟客户最初想要的一模一样。后台还能灵活设置分类和品牌名称、更换首页幻灯片。
这次经历让我确认了一件事
AI 编程早就不是"花架子"了。这次如果手动干——把纯 JS 前端转成 WordPress 模板、逐行改写、测试——至少好几天。Claude Code 全程跑下来，我在旁边审核就行。
但有个前提：指令要精准。你不能跟它说"帮我把前端转成主题"然后等着。你需要告诉它目录在哪、菜单怎么拆、自定义分类法叫什么、哪些资源要本地化、开发完要不要自动激活。指令越清楚，结果越接近你要的。
还有一个被低估的细节：装 WordPress 官方技能包。没装之前 AI 生成的代码可能是通用思维，装之后是按 WordPress 钩子和规范在写。同样一句话，不同的人去说结果差很远——给 AI 下指令也是一个道理。
我们 跨屏互联 做 WP 独立站开发十多年，AI 已经是日常开发流程的一部分——环境搭建、前端转主题、重复性代码生成都交给 AI，人工精力集中在架构判断、安全审查和体验打磨上。工具升级不是为了做更少的事，是为了让有判断力的人做更值钱的事。
---END---
欢迎关注【跨屏互联】，了解更多建站、SEO、GEO等互联网知识。
申明：若有来源错误或者侵犯您的合法权益，您可以通过邮箱与我们取得联系，我们将及时进行处理，邮箱地址：info@kuaping.com
