---

name: codebase-to-wordpress-converter description: "将任何代码库（React/HTML/Next.js）转换为像素级精确、SEO优化且动态的WordPress主题的专家技能。" risk: safe source: community date_added: "2026-04-12"

代码库转WordPress转换器

概述

本技能专为将静态或基于React的前端高保真转换为功能完整、CMS驱动的WordPress主题而设计。它集高级WordPress架构师、React专家和QA工程师于一体，确保与原始设计100%像素级匹配，同时深度集成WordPress功能，如ACF、动态菜单和技术SEO保留。

适用场景

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

核心能力

分阶段转换与审计

本技能遵循严格的4阶段取证流程：

1. 阶段1：取证式UI对比：React组件与WordPress模板的逐项对照表审计，发现差异。
2. 阶段2：全面审计：深入检查UI、SEO、CMS可编辑性、导航、功能和性能。
3. 阶段3：行动计划：任务分类为安全、有风险或阻塞，防止破坏UI。
4. 阶段4：迭代修复：每次执行一个安全任务，每步完成后进行验证。

绝对UI锁定

严格执行不可违反的规则：

• 不得更改布局、间距、排版或颜色。
• 精确保留Tailwind或CSS类名。
• 不得更改DOM结构或HTML嵌套。

分步指南

1. 发现与取证审计

首先识别源代码中的所有组件。创建UI对比表，将原始源输出与目标WordPress输出进行比较。

• 规则：此阶段不允许修复，仅做检测。

2. 策略性字段映射

将静态React/HTML内容映射到动态WordPress函数：

• 用 the_title()、get_field() 或 the_content() 替换静态文本。
• 用 get_template_directory_uri() 替换静态路径。

3. 核心钩子实现

确保每个主题正确包含基础WordPress钩子：

• 布局文件（header.php / footer.php）：必须在 </head> 前包含 wp_head()，在 </body> 前包含 wp_footer()。
• 页面模板：必须调用 get_header() 和 get_footer()。
• 使用 register_nav_menus() 实现动态导航，不破坏原始HTML结构。

4. 验证与实时追踪

维护问题总数、已修复和剩余的实时追踪器。每次修复后必须确认：

• ✅ 无UI变化
• ✅ 无DOM变化
• ✅ 无类名变化

示例

示例1：导航转换

// 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</ul>',
    'walker' => new Custom_Tailwind_Walker()
]);

示例2：资源路径处理

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

最佳实践

• ✅ 应该： 使用 get_page_by_path() 实现稳健的内部链接。
• ✅ 应该： 在 functions.php 中实现ACF（高级自定义字段）回退。
• ✅ 应该： 将Tailwind配置保留在 header.php 中以确保全局样式生效。
• ❌ 不要： 添加div包装器或重命名类名来整理代码。
• ❌ 不要： 使用与原始设计冲突的WordPress默认样式。

附加资源

• ACF文档
• WordPress中使用Tailwind CSS
• WordPress主题开发手册

限制说明

• 仅在任务明确符合上述范围时使用本技能。
• 不要将输出视为特定环境验证、测试或专家审查的替代品。
• 如果缺少必要的输入、权限、安全边界或成功标准，请停下来寻求澄清。