古法编程

将 React/HTML 源代码高保真转换为 WordPress 主题

解决前端迁移中的“走样”痛点：通过一套严苛的审计与转换流程，让 AI 将现代前端代码库（如 React/Next.js）转换为 100% 还原视觉效果且具备 CMS 动态能力的 WordPress 主题。

为什么需要这个技能

在将静态页面或 React 项目迁移到 WordPress 时，开发者经常面临两个极端：要么为了追求快速转换而破坏了原有的 CSS 布局和 DOM 结构，导致页面“走样”；要么在集成 CMS 动态功能时，因为缺乏标准地映射关系而导致 SEO 丢失或编辑体验糟糕。

本技能将 AI 角色定义为“高级 WordPress 架构师”与“QA 工程师”，强制执行一套从 UI 审计到字段映射的四个阶段法，确保在引入 the_title()、ACF 等动态函数的同时，绝对不触动原有的 Tailwind 类名、间距和 HTML 层级。

适用场景

  • 需要将 React (Vite/Next.js) 或 HTML 静态原型转化为正式的 WordPress 商业主题。
  • 对 UI 还原度要求极高，必须实现 100% 像素级匹配（Pixel-perfect）。
  • 需要在迁移过程中严格保留原有的技术 SEO 结构（如 Schema 标记、H 标签层级）。
  • 审计现有 WordPress 转换项目，寻找结构性缺陷或 SEO 丢失点。

核心工作流

  1. 法医式 UI 审计 (Forensic Audit)：AI 首先建立对比表，逐一比对源端组件与 WP 模板的差异。此阶段严禁修改代码，仅做检测。
  2. 战略字段映射：将静态内容映射为动态函数。例如将静态文本替换为 get_field()，将静态路径替换为 get_template_directory_uri()。
  3. 核心钩子实现：确保 wp_head() 和 wp_footer() 正确放置，并使用 register_nav_menus() 实现不破坏原 HTML 结构的动态导航。
  4. 迭代修复与验证：将任务分为 SAFE（安全）、RISKY（风险）、BLOCKED（阻塞）三类，逐项修复并验证：✅ 无 UI 变更 → ✅ 无 DOM 变更 → ✅ 无类名变更。

代码示例

1. 导航菜单的精准转换

避免使用默认的 wp_nav_menu 产生冗余包裹层，通过自定义 Walker 保持 Tailwind 结构：

// 错误做法：使用默认设置会产生额外的 <div> 包装，破坏布局
wp_nav_menu(['theme_location' => 'primary']);

// 正确做法：强制指定容器与包裹类名，保持原有 CSS 结构
wp_nav_menu([
    'theme_location' => 'primary',
    'container' => false,
    'items_wrap' => '<ul class="flex space-x-8">%3$s</ul>',
    'walker' => new Custom_Tailwind_Walker()
]);

2. 静态资源路径处理

将硬编码路径转换为 WordPress 主题路径：

// 源代码: <img src="/images/logo.png" />
// 转换后:
<img src="<?php echo get_template_directory_uri(); ?>/assets/images/logo.png" alt="Logo" />

下载和安装

下载 codebase-to-wordpress-converter 中文版 Skill ZIP

解压后将目录放入你的 AI 工具 skills 文件夹，重启工具后即可使用。具体路径参考内附的 USAGE.zh.md。

你可能还需要

暂无推荐