---
canonical: https://meta.cyberforums.com/t/theme/2419
webpage: https://wpcy.com/community/t/2419-theme
language: zh-Hans
---

# 区块主题开发问题咨询 @theme

> 文派叶子支持论坛的只读副本，本页不能回复。
> 讨论原文：https://meta.cyberforums.com/t/theme/2419
> 网页版：https://wpcy.com/community/t/2419-theme

## 1 · 诗语

- 发布时间：2026年1月29日 16:56

@theme 你好！我想学习 WordPress 区块主题开发，请问：

区块主题和经典主题有什么区别？
theme.json 文件的作用是什么？
如何创建自定义区块模式？

谢谢指导！

## 2 · system

- 发布时间：2026年1月29日 16:57

你好 @feibisi 诗语！
很高兴看到你对区块主题开发感兴趣，这是 WordPress 主题开发的未来方向。我来详细解答你的问题：
1. 区块主题和经典主题的区别
经典主题 (Classic Theme):

基于 PHP 模板文件（如 header.php, single.php, page.php）
使用 functions.php 添加功能
依赖主题定制器 (Customizer) 进行样式调整
需要手动编写 HTML 结构
模板层级相对固定

区块主题 (Block Theme):

基于 HTML 模板文件（如 index.html, single.html）
使用 theme.json 管理样式和设置
支持全站编辑 (FSE) - 用户可以直接编辑所有页面
使用区块编辑器 (Gutenberg) 构建页面
更灵活的内容结构

关键区别示例：
// 经典主题的 header.php
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
    <meta charset="<?php bloginfo('charset'); ?>">
    <?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>

<!-- 区块主题的模板 -->
<!-- wp:template-part {"slug":"header","tagName":"header"} /-->
<!-- wp:post-content /-->
<!-- wp:template-part {"slug":"footer","tagName":"footer"} /-->

2. theme.json 文件的作用
theme.json 是区块主题的核心配置文件，主要有以下作用：
主要功能：

全局样式管理 - 定义颜色、字体、间距等
区块设置 - 控制哪些区块可用及其默认样式
模板定义 - 管理模板和模板部件
样式预设 - 创建可重用的样式变体

基本结构示例：
{
  "version": 2,
  "settings": {
    "color": {
      "palette": [
        {
          "name": "主色",
          "slug": "primary",
          "color": "#007cba"
        },
        {
          "name": "辅色",
          "slug": "secondary",
          "color": "#006ba1"
        }
      ]
    },
    "typography": {
      "fontSizes": [
        {
          "name": "小",
          "size": "14px",
          "slug": "small"
        }
      ]
    }
  },
  "styles": {
    "color": {
      "background": "var(--wp--preset--color--primary)",
      "text": "#ffffff"
    }
  }
}

3. 如何创建自定义区块模式
区块模式 (Block Pattern) 是可重用的区块组合，让用户快速插入预设布局。
创建步骤：
方法一：通过 PHP 注册（推荐）
// 在 functions.php 或插件中
function mytheme_register_patterns() {
    register_block_pattern(
        'mytheme/hero-section',
        array(
            'title'       => __( '英雄区域', 'mytheme' ),
            'description' => __( '一个全宽的英雄区域，包含标题和按钮', 'mytheme' ),
            'content'     => '<!-- wp:group {"align":"full","backgroundColor":"primary","className":"hero-section"} -->
                <div class="wp-block-group alignfull hero-section has-primary-background-color has-background">
                    <!-- wp:heading {"level":1,"textColor":"white"} -->
                    <h1 class="has-white-color has-text-color">欢迎来到我的网站</h1>
                    <!-- /wp:heading -->
                    <!-- wp:buttons -->
                    <div class="wp-block-buttons">
                        <!-- wp:button {"backgroundColor":"secondary","textColor":"white"} -->
                        <div class="wp-block-button">
                            <a class="wp-block-button__link has-secondary-background-color has-white-color has-text-color has-background">了解更多</a>
                        </div>
                        <!-- /wp:button -->
                    </div>
                    <!-- /wp:buttons -->
                </div>
                <!-- /wp:group -->',
            'categories'  => array( 'hero' ),
        )
    );
}
add_action( 'init', 'mytheme_register_patterns' );

方法二：通过 patterns 文件夹

在主题中创建 patterns 文件夹
创建 hero-section.php：

<?php
/**
 * Title: 英雄区域
 * Slug: mytheme/hero-section
 * Categories: hero
 */
?>
<!-- wp:group {"align":"full","backgroundColor":"primary"} -->
<div class="wp-block-group alignfull has-primary-background-color has-background">
    <!-- wp:heading {"level":1,"textColor":"white"} -->
    <h1 class="has-white-color has-text-color"><?php echo esc_html__( '页面标题', 'mytheme' ); ?></h1>
    <!-- /wp:heading -->
</div>
<!-- /wp:group -->

创建自定义模式分类：
function mytheme_register_pattern_categories() {
    register_block_pattern_category(
        'hero',
        array( 'label' => __( '英雄区域', 'mytheme' ) )
    );
    register_block_pattern_category(
        'features',
        array( 'label' => __( '功能区域', 'mytheme' ) )
    );
}
add_action( 'init', 'mytheme_register_pattern_categories' );

学习资源推荐


官方文档：

区块主题开发指南
theme.json 参考
区块模式 API



实践项目：

从官方主题 Twenty Twenty-Three 开始学习
使用 Create Block Theme 插件快速创建



开发工具：

安装 WordPress 开发环境（推荐 Local by Flywheel）
使用代码编辑器的 WordPress 代码片段插件



快速入门建议

从简单开始：先创建一个基础的区块主题，只包含 style.css、index.html 和 theme.json
逐步添加：先掌握模板部件（Template Parts），再学习模板（Templates）
多实践：尝试修改现有区块主题，理解其结构
关注社区：WPCommunity 有很多区块主题开发的相关讨论

如果你在具体开发过程中遇到问题，随时可以继续提问！区块主题开发需要一些思维转变，但一旦掌握，你会发现它比经典主题更灵活高效。
需要我详细解释某个特定部分吗？