---

name: wordpress-theme-development description: "WordPress 主题开发工作流，涵盖主题架构、模板层级、自定义文章类型、区块编辑器支持、响应式设计，以及 WordPress 7.0 特性：DataViews、模式编辑、导航覆盖层和管理界面刷新。" category: granular-workflow-bundle risk: safe source: personal date_added: "2026-02-27"

WordPress 主题开发工作流

概述

从零开始创建自定义 WordPress 主题的专业工作流，包括现代区块编辑器（Gutenberg）支持、模板层级、响应式设计和 WordPress 7.0 增强功能。

WordPress 7.0 主题特性

1. 管理界面刷新

   • 新的默认配色方案
   • 管理界面之间的视图过渡
   • 现代排版和间距

2. 模式编辑

   • 未同步模式的 ContentOnly 模式默认值
   • disableContentOnlyForUnsyncedPatterns 设置
   • 每个区块实例的自定义 CSS

3. 导航覆盖层

   • 可自定义的导航覆盖层
   • 改进的移动端导航

4. 新区块

   • 图标区块
   • 带过滤器的面包屑区块
   • 响应式网格区块

5. Theme.json 增强

   • 伪元素支持
   • 区块定义的特性选择器被尊重
   • 增强的自定义 CSS

6. iframe 编辑器

   • Block API v3+ 启用 iframe 文章编辑器
   • 7.1 完全强制，7.0 可选启用

何时使用此工作流

在以下情况使用此工作流：

• 创建自定义 WordPress 主题
• 将设计转换为 WordPress 主题
• 添加区块编辑器支持
• 实现自定义文章类型
• 构建子主题
• 实现 WordPress 7.0 设计特性

工作流阶段

阶段 1：主题设置

需要调用的技能

• app-builder - 项目脚手架
• frontend-developer - 前端开发

操作

1. 创建主题目录结构
2. 设置带主题头部的 style.css
3. 创建 functions.php
4. 配置主题支持
5. 设置脚本/样式入队

WordPress 7.0 主题头部

/*
Theme Name: My Custom Theme
Theme URI: https://example.com
Author: Developer Name
Author URI: https://example.com
Description: A WordPress 7.0 compatible theme with modern design
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: my-custom-theme
Tags: block-patterns, block-styles, editor-style, wide-blocks
*/

复制粘贴提示

Use @app-builder to scaffold a new WordPress theme project

阶段 2：模板层级

需要调用的技能

• frontend-developer - 模板开发

操作

1. 创建 index.php（回退模板）
2. 实现 header.php 和 footer.php
3. 创建 single.php 用于文章
4. 创建 page.php 用于页面
5. 添加 archive.php 用于归档
6. 实现 search.php 和 404.php

WordPress 7.0 模板注意事项

• 使用 iframe 编辑器测试
• 验证视图过渡正常工作
• 检查新管理配色方案兼容性

复制粘贴提示

Use @frontend-developer to create WordPress template files

阶段 3：主题函数

需要调用的技能

• backend-dev-guidelines - 后端模式

操作

1. 注册导航菜单
2. 添加主题支持（缩略图、RSS 等）
3. 注册小部件区域
4. 创建自定义模板标签
5. 实现辅助函数

WordPress 7.0 theme.json 配置

{
  "$schema": "https://schemas.wp.org/trunk/theme.json",
  "version": 3,
  "settings": {
    "appearanceTools": true,
    "layout": {
      "contentSize": "1200px",
      "wideSize": "1400px"
    },
    "background": {
      "backgroundImage": true
    },
    "typography": {
      "fontFamilies": true,
      "fontSizes": true
    },
    "spacing": {
      "margin": true,
      "padding": true
    },
    "blocks": {
      "core/heading": {
        "typography": {
          "fontSizes": ["24px", "32px", "48px"]
        }
      }
    }
  },
  "styles": {
    "color": {
      "background": "#ffffff",
      "text": "#1a1a1a"
    },
    "elements": {
      "link": {
        "color": {
          "text": "#0066cc"
        }
      }
    }
  },
  "customTemplates": [
    {
      "name": "page-home",
      "title": "Homepage",
      "postTypes": ["page"]
    }
  ],
  "templateParts": [
    {
      "name": "header",
      "title": "Header",
      "area": "header"
    }
  ]
}

复制粘贴提示

Use @backend-dev-guidelines to create theme functions

阶段 4：自定义文章类型

需要调用的技能

• wordpress-penetration-testing - WordPress 模式

操作

1. 注册自定义文章类型
2. 创建自定义分类法
3. 添加自定义元框
4. 实现自定义字段
5. 创建归档模板

兼容 RTC 的 CPT 注册

register_post_type('portfolio', [
    'labels' => [
        'name' => __('Portfolio', 'my-theme'),
        'singular_name' => __('Portfolio Item', 'my-theme')
    ],
    'public' => true,
    'has_archive' => true,
    'show_in_rest' => true,
    'supports' => ['title', 'editor', 'thumbnail', 'custom-fields'],
]);