wordpress-theme-to-emdash

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

WordPress Theme to EmDash

将WordPress主题迁移至EmDash

Port WordPress themes to EmDash in six phases. Read the phase file before starting each phase.

分六个阶段将WordPress主题迁移至EmDash。开始每个阶段前，请阅读对应阶段的文件。

Critical Rules

核心规则

Copy scaffold first - Start every theme by copying
```
scaffold/
```
from this skill
Take screenshots of demo - Identify the demo URL and capture all page types using agent-browser before starting work
No hard-coded content - Use
```
getSiteSettings()
```
for title/tagline,
```
getMenu()
```
for navigation
Server-rendered pages - Never use
```
getStaticPaths()
```
for EmDash content
Astro 6 - Use
```
ClientRouter
```
not
```
ViewTransitions
```
, Zod 4 syntax, Node 22+
Use emdash Image component - For all images, import Image from "emdash/ui"

先复制脚手架 - 所有主题开发均需从本skill中复制
```
scaffold/
```
目录开始
截取演示站点截图 - 开始工作前，确定演示站点URL，并使用agent-browser捕获所有页面类型的截图
禁止硬编码内容 - 标题/标语使用
```
getSiteSettings()
```
获取，导航菜单使用
```
getMenu()
```
获取
服务器渲染页面 - EmDash内容绝不能使用
```
getStaticPaths()
```
Astro 6 规范 - 使用
```
ClientRouter
```
而非
```
ViewTransitions
```
，采用Zod 4语法，要求Node 22及以上版本
使用EmDash Image组件 - 所有图片均需从"emdash/ui"导入Image组件

Phases

迁移阶段


phases/1-discovery.md
phases/2-design.md
phases/3-templates.md
phases/4-dynamic.md
phases/5-seed.md
phases/6-verify.md

Phase	File	Summary
1	`phases/1-discovery.md`	Download theme, screenshot demo, capture images
2	`phases/2-design.md`	Extract CSS variables, fonts, colors
3	`phases/3-templates.md`	Convert PHP templates to Astro
4	`phases/4-dynamic.md`	Site settings, menus, taxonomies, widgets
5	`phases/5-seed.md`	Create seed file with demo content
6	`phases/6-verify.md`	Screenshot, compare, iterate, build


phases/1-discovery.md
phases/2-design.md
phases/3-templates.md
phases/4-dynamic.md
phases/5-seed.md
phases/6-verify.md

阶段	文件	概述
1	`phases/1-discovery.md`	下载主题、截取演示站点截图、捕获图片素材
2	`phases/2-design.md`	提取CSS变量、字体、配色方案
3	`phases/3-templates.md`	将PHP模板转换为Astro模板
4	`phases/4-dynamic.md`	配置站点设置、菜单、分类法、小工具
5	`phases/5-seed.md`	创建包含演示内容的种子文件
6	`phases/6-verify.md`	截图、对比、迭代优化、构建站点

Checklist

检查清单

Setup

初始化设置

Copy
```
scaffold/
```
to new theme directory. Unless otherwise specified by the user, make this a subdirectory of
```
themes/
```
and name it after the WordPress theme (e.g.,
```
themes/twentytwentyfour/
```
).
Rename folder, update
```
package.json
```
Verify build:
```
pnpm build
```

将
```
scaffold/
```
复制到新主题目录。除非用户另有指定，否则将其作为
```
themes/
```
的子目录，并以原WordPress主题命名（例如：
```
themes/twentytwentyfour/
```
）。
重命名文件夹，更新
```
package.json
```
验证构建：执行
```
pnpm build
```

Phase 1: Discovery

阶段1：探索准备

Theme source downloaded
Demo site identified
```
discovery/
```
folder created with
```
screenshots/
```
,
```
images/
```
,
```
notes.md
```
All page types screenshotted
Sample images downloaded

已下载主题源码
已确定演示站点
已创建
```
discovery/
```
目录，包含
```
screenshots/
```
、
```
images/
```
和
```
notes.md
```
已捕获所有页面类型的截图
已下载示例图片素材

Phase 2: Design

阶段2：设计提取

Phase 3: Templates

阶段3：模板转换

Homepage, single post, archive, category, tag, page, 404
Components extracted (PostCard, etc.)

已完成首页、单篇文章、归档页、分类页、标签页、自定义页面、404页面的模板转换
已提取组件（如PostCard等）

Phase 4: Dynamic

阶段4：动态功能适配

Site settings (title, tagline, logo from CMS)
Navigation menus (from CMS, not hard-coded)
Taxonomies
Widget areas (if applicable)

已配置站点设置（从CMS获取标题、标语、Logo）
已配置导航菜单（从CMS获取，非硬编码）
已配置分类法
已配置小工具区域（如适用）

Phase 5: Seed

阶段5：种子文件创建

Seed file created with demo images at
```
.emdash/seed.json
```
(or wired up via
```
package.json#emdash.seed
```
)

已在
```
.emdash/seed.json
```
创建包含演示图片的种子文件（或通过
```
package.json#emdash.seed
```
配置）

Phase 6: Verify

阶段6：验证与收尾

Dev server applied seed cleanly on first request (no validation errors in logs)
Output screenshots captured
Visual comparison done
Build succeeds:
```
pnpm build
```
LICENSE file downloaded (GPL-2.0 in most cases)
README credits original theme

开发服务器首次请求时可正常加载种子数据（日志中无验证错误）
已捕获输出站点的截图
已完成视觉对比
构建成功：执行
```
pnpm build
```
无报错
已下载LICENSE文件（多数情况下为GPL-2.0）
README文件中已注明原主题出处

Reference Documents

参考文档

```
references/astro-essentials.md
```
- Astro 6 patterns
```
references/template-patterns.md
```
- PHP → Astro conversion
```
references/concept-mapping.md
```
- WP → EmDash concepts
```
references/emdash-api.md
```
- Full API reference
```
references/design-extraction.md
```
- CSS extraction techniques

```
references/astro-essentials.md
```
- Astro 6 设计模式
```
references/template-patterns.md
```
- PHP 转 Astro 模板指南
```
references/concept-mapping.md
```
- WordPress 转 EmDash 概念映射
```
references/emdash-api.md
```
- 完整API参考文档
```
references/design-extraction.md
```
- CSS提取技巧