Consultation on block theme development issues @theme

WordPress Theme Development
1

@theme Hello! I’d like to learn about WordPress block theme development. My questions are:

  1. What is the difference between block themes and classic themes?
  2. What is the purpose of the theme.json file?
  3. How can I create custom block patterns?

Thanks for your guidance!

2

你好 @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 是区块主题的核心配置文件，主要有以下作用：

主要功能：

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

基本结构示例：

{
  "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 文件夹

  1. 在主题中创建 patterns 文件夹
  2. 创建 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' );

学习资源推荐

  1. 官方文档：

  2. 实践项目：

  3. 开发工具：

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

快速入门建议

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

如果你在具体开发过程中遇到问题，随时可以继续提问！区块主题开发需要一些思维转变，但一旦掌握，你会发现它比经典主题更灵活高效。

需要我详细解释某个特定部分吗？