codebase-to-wordpress-converter

用途

该技能（Codebase to WordPress Converter）面向静态或 React 前端到 WordPress 主题的高保真转换。它将自身定位为资深 WordPress 架构师、React 专家与 QA 工程师，目标是在深度集成 ACF（Advanced Custom Fields）、动态菜单与技术 SEO 等 WordPress 功能的同时，实现与原站点 100% 像素级一致。

适用场景

将 React（CRA/Vite/Next.js）或 HTML 项目转换为 WordPress 主题。
客户要求与原始源文件保持 100% 像素级一致。
审计现有 WordPress 转换中的结构或 SEO 缺陷。
需要确保技术 SEO（Schema、Meta 标签、标题层级）被精确保留。

主要能力：分阶段转换与审计

该技能遵循严格的四阶段取证流程：

阶段一：UI 取证对比——对 React 组件与 WordPress 模板进行逐行表格审计，找出差异。
阶段二：全面审计——深入检查 UI、SEO、CMS 可编辑性、导航、功能与性能。
阶段三：行动计划——将任务分类为 SAFE、RISKY 或 BLOCKED，以防止破坏 UI。
阶段四：迭代修复——每次只执行一项安全任务，并在每步之后进行验证。

主要能力：绝对 UI 锁定

强制执行不可协商的规则：不得改动布局、间距、字体或颜色；精确保留 Tailwind 或 CSS 类名；对 DOM 结构或 HTML 嵌套零改动。

使用方式：分步指南

发现与取证审计：先从识别源码中的所有组件开始，创建 UI 对比表，将原始源输出与目标 WordPress 输出进行比较。规则：此阶段不允许修复，只做检测。
策略性字段映射：将静态 React/HTML 内容映射为动态 WordPress 函数。例如用 the_title()、get_field() 或 the_content() 替换静态文本；用 get_template_directory_uri() 替换静态路径。
核心钩子实现：确保每个主题正确包含基础 WordPress 钩子。布局文件（header.php / footer.php）必须在 </head> 之前包含 wp_head()，在 </body> 之前包含 wp_footer()；页面模板必须调用 get_header() 与 get_footer()；使用 register_nav_menus() 实现动态导航，同时不破坏原始 HTML 结构。
验证与实时跟踪：维护一个包含 Total Issues、Fixed、Remaining 的实时跟踪器，每项修复后必须确认：✅ 无 UI 变化、✅ 无 DOM 变化、✅ 无类名变化。

示例

导航转换——不要在静态替换时额外添加包裹层：

// WRONG: Static replacement that adds wrappers
wp_nav_menu(['theme_location' => 'primary']);

// CORRECT: Preserving original Tailwind classes and structure
wp_nav_menu([
    'theme_location' => 'primary',
    'container' => false,
    'items_wrap' => '<ul class="flex space-x-8">%3$s</ul>',
    'walker' => new Custom_Tailwind_Walker()
]);

资源路径处理：

<!-- Source: <img src="/images/logo.png" /> -->
<img src="<?php echo get_template_directory_uri(); ?>/assets/images/logo.png" alt="Logo" />

最佳实践

建议：使用 get_page_by_path() 实现健壮的内部链接；在 functions.php 中实现 ACF 回退；在 header.php 中保留 Tailwind 配置以确保全局样式生效。不建议：添加 div 包裹器或为“清理”代码而重命名类名；在标准 WordPress 默认样式与原始设计冲突时使用默认样式。

限制

仅在任务明确符合上述范围时使用该技能。不要将输出视为环境特定验证、测试或专家评审的替代品。如果缺少必要的输入、权限、安全边界或成功标准，应停止并请求澄清。收费、价格等信息暂未提供。