
关于
WordPress 主题开发工作流,涵盖主题架构、模板层级、自定义文章类型、块编辑器支持、响应式设计和 WordPress 7.0 新特性:DataViews、Pattern Editing、Navigation Overlays 和管理界面刷新。
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 主题特性
-
管理界面刷新
- 新的默认配色方案
- 管理界面之间的视图过渡
- 现代排版和间距
-
模式编辑
- 未同步模式的 ContentOnly 模式默认值
- disableContentOnlyForUnsyncedPatterns 设置
- 每个区块实例的自定义 CSS
-
导航覆盖层
- 可自定义的导航覆盖层
- 改进的移动端导航
-
新区块
- 图标区块
- 带过滤器的面包屑区块
- 响应式网格区块
-
Theme.json 增强
- 伪元素支持
- 区块定义的特性选择器被尊重
- 增强的自定义 CSS
-
iframe 编辑器
- Block API v3+ 启用 iframe 文章编辑器
- 7.1 完全强制,7.0 可选启用
何时使用此工作流
在以下情况使用此工作流:
- 创建自定义 WordPress 主题
- 将设计转换为 WordPress 主题
- 添加区块编辑器支持
- 实现自定义文章类型
- 构建子主题
- 实现 WordPress 7.0 设计特性
工作流阶段
阶段 1:主题设置
需要调用的技能
- app-builder - 项目脚手架
- frontend-developer - 前端开发
操作
- 创建主题目录结构
- 设置带主题头部的 style.css
- 创建 functions.php
- 配置主题支持
- 设置脚本/样式入队
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 - 模板开发
操作
- 创建 index.php(回退模板)
- 实现 header.php 和 footer.php
- 创建 single.php 用于文章
- 创建 page.php 用于页面
- 添加 archive.php 用于归档
- 实现 search.php 和 404.php
WordPress 7.0 模板注意事项
- 使用 iframe 编辑器测试
- 验证视图过渡正常工作
- 检查新管理配色方案兼容性
复制粘贴提示
Use @frontend-developer to create WordPress template files
阶段 3:主题函数
需要调用的技能
- backend-dev-guidelines - 后端模式
操作
- 注册导航菜单
- 添加主题支持(缩略图、RSS 等)
- 注册小部件区域
- 创建自定义模板标签
- 实现辅助函数
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 模式
操作
- 注册自定义文章类型
- 创建自定义分类法
- 添加自定义元框
- 实现自定义字段
- 创建归档模板
兼容 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'],
]);
兼容工具
Claude CodeCursor
标签
前端开发