使用 AI 高效构建 WordPress 7.0 定制主题 #

本技能为开发者提供一套标准化的 WordPress 主题开发工作流，旨在通过 AI 快速实现从基础架构搭建、模板层次定义到 WordPress 7.0 最新特性（如 Iframed 编辑器、导航覆盖层）的集成。

为什么需要这个技能 #

开发一个符合现代标准的 WordPress 主题涉及大量重复性的模板文件创建和复杂的配置。特别是随着 WordPress 7.0 的发布，引入了 theme.json v3 版本、区块模式（Block Patterns）的 ContentOnly 模式以及全新的管理后台界面刷新。

手动配置这些新特性极其耗时且容易出错。通过该技能，AI 可以直接根据最新的 API 规范生成精准的 style.css 头部信息、theme.json 配置文件以及兼容 REST API 的自定义文章类型（CPT）代码，显著提升开发效率。

适用场景 #

• 从零开始创建自定义 WordPress 主题。
• 将 UI 设计稿转换为高性能的 WordPress 主题。
• 为现有主题添加 Gutenberg 区块编辑器支持或自定义区块。
• 实现复杂的自定义文章类型（CPT）及其对应的归档模板。
• 升级旧主题以适配 WordPress 7.0 的新设计特性（如 View Transitions）。

核心工作流 #

1. 主题基础初始化 #

利用 AI 快速生成符合规范的目录结构和 style.css 头部信息，配置 functions.php 以启用必要的主题支持（如缩略图、RSS 等）。

2. 模板层次与架构 #

根据 WordPress 模板层级（Template Hierarchy）创建 index.php、single.php、page.php 等核心文件。针对 7.0 版本，重点验证在 Iframed 编辑器下的显示效果。

3. 配置 theme.json (v3) #

通过 AI 定义全局样式、排版和间距。例如，配置 appearanceTools 以允许用户在后台直接调整边距和填充。

{
  "$schema": "https://schemas.wp.org/trunk/theme.json",
  "version": 3,
  "settings": {
    "appearanceTools": true,
    "layout": {
      "contentSize": "1200px",
      "wideSize": "1400px"
    }
  }
}

4. 现代区块特性集成 #

• 自定义文章类型：注册支持 show_in_rest 的 CPT，确保其能与区块编辑器无缝协作。
• 区块模式：创建带有 contentOnly: true 属性的模式，优化非同步模式的编辑体验。
• 导航覆盖层：实现可定制的移动端导航覆盖模板。

5. 测试与质量把关 #

使用 Playwright 等工具测试不同浏览器的响应式断点，并对照 WordPress 7.0 检查清单（如验证 View Transitions 是否生效）进行最后审计。

下载和安装 #

下载 wordpress-theme-development 中文版 Skill ZIP

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

你可能还需要 #

暂无推荐