FSWP 主题开发 是做什么的?
基础(始终适用): fswp-developer/references/lean-coding.md(少写,优先复用)、fswp-developer/references/coding-standards.md(编码标准、文档、国际化、可访问性)以及 fswp-security-engineer(输入、输出、授权)。
执行已批准的主题 PRD(fswp-architect)。主题控制呈现。必须能在主题切换后保留的功能(如自定义文章类型、集成、业务逻辑)应归入插件(fswp-plugin-developer);请明确说明,而不是将其隐藏在 functions.php 中。
首先确定类型
| 类型 | 适用场景 | 核心文件 |
|---|---|---|
| 区块主题 | 需要站点编辑器编辑;新构建默认选择 | style.css(仅头部)、theme.json、templates/index.html、parts/、patterns/、styles/ |
| 经典主题 | 需要 PHP 模板和每个模板的自定义逻辑,或必须支持旧版 WordPress | style.css、index.php、functions.php、模板文件 |
| 混合主题 | 经典模板加上用于设置和编辑器样式的 theme.json | 经典文件 + theme.json |
| 子主题 | 调整父主题而不派生它 | style.css(包含 Template: 头部)、functions.php、仅覆盖文件 |
新构建默认选择区块主题,除非 PRD 另有要求。区块主题需要 WordPress 5.9 或更高版本;在锁定 Requires at least 之前,请查阅文档确认当前 theme.json 模式版本及其最低 WordPress 版本。
工作流程
- 脚手架:
python3 scripts/scaffold_theme.py --help,然后生成骨架(区块、经典或子主题)。运行fswp-qa-engineer/scripts/run_gate.sh <dir> <min-php> --fix一次。 - 设计令牌:在
theme.json(区块/混合主题)或 CSS 自定义属性(经典主题)中定义调色板、排版、间距、布局宽度以及边框/阴影预设。在模板和模式中使用预设,避免硬编码值。 - 模板:构建 PRD 所需的层级结构(首页、主页、单篇、页面、归档、搜索、404 页面,以及任何自定义模板)。复用模板部分(header、footer 和重复区域)。
- 模式:将可复用布局注册为
patterns/目录下的文件(头部注释:Title、Slug、Categories、可选 Keywords、Viewport Width、Block Types)。禁用远程图片。 - 样式变体:
styles/目录下的 JSON 文件用于替代外观;保持小巧,仅覆盖theme.json。 - 主题真正需要的自定义区块或交互:
fswp-block-developer。否则优先使用核心区块。 - 资源:通过
wp_enqueue_scripts(经典主题)或theme.json/add_editor_style(区块主题)加载;本地打包字体(fontFace条目)并附带其许可证;无 CDN 链接。 - 安全性、国际化、可访问性:转义每个输出、翻译每个字符串、满足可访问性规则(
fswp-security-engineer、fswp-developer/references/coding-standards.md、references/theme-i18n-a11y.md)。对钩子使用命名且带前缀的函数(禁止闭包),前缀至少四个字母,并根据编码标准使用array()语法。 - 目录就绪(如果目标是 WordPress.org 主题目录):
fswp-release-manager(references/theme-requirements.md),然后运行python3 ../fswp-qa-engineer/scripts/theme_check.py <dir> --directory。主题不得包含自定义文章类型、区块、短代码、角色、联系方式或 MIME 类型:这些应归入插件。主题名称不得包含 "WordPress"、"Theme" 或 "Twenty"。
停止并交给 fswp-qa-engineer。
经典主题要点
add_theme_support() 用于 title-tag 和 automatic-feed-links(目录要求),加上 post-thumbnails、html5、responsive-embeds、wp-block-styles 和 editor-styles;language_attributes()、body_class()、post_class()、wp_link_pages() 和用于选项权限的 edit_theme_options;register_nav_menus;包含 wp_head()、wp_body_open()、wp_footer();使用 get_template_part() 处理重复部分;使用模板标签而非直接查询;次要循环后使用 wp_reset_postdata();声明内容宽度和图片尺寸。
子主题
正确依赖地加载父样式表和子样式表;覆盖单个模板而非复制父主题;保持子主题版本独立于父主题;不要复制父主题的 functions.php。
交付
可安装的 {theme-slug}.zip,主题文件夹位于根目录,包含 readme.txt、screenshot.png(最大 1200x900,4:3 比例)、每个打包资产的许可证说明,以及需要手动完成步骤的摘要。参考资料:references/block-theme.md、references/theme-i18n-a11y.md。