WordPress Block Patterns：主题开发者的得力工具

发布于 作者:

对于刚开始接触WordPress主题开发的朋友来说，Block Patterns（区块样式）是必须要掌握的一个功能。它早出现在WordPress 5.4版本中，设计初衷就是让用户能够快速插入复杂的页面布局。说白了，它就是一组已经配置好的区块集合，你可以把它们想象成“布局模板”。对于主题作者而言，它的价值在于大大降低了用户搭建页面的门槛，同时也为开发者提供了更灵活的代码组织方式。这篇文章会带你从头了解什么是Block Patterns、它有哪些类型、以及如何从WordPress后台创建并导出到你的主题中。

到底什么是Block Patterns？

简单说，Pattern就是一个或多个区块的组合，并且已经预先配置好了样式和内容，直接丢给用户使用。

打个比方：你设计了一个包含标题、描述和按钮的“号召性用语”区域。按照传统方式，用户需要自己一个个插入标题区块、段落区块、按钮区块，然后挨个调整对齐、颜色、间距。但如果你把它注册成一个Pattern，用户只需要在编辑器里点一下，整个布局就出来了——标题、文字、按钮的位置和样式全都已经安排妥当。

Pattern和“可复用区块”不同。主题注册的Pattern，每次插入到页面里都是一个“新副本”，改了这个页面的内容，不会影响其他页面；反过来，你修改了注册时的代码，之前已经插入到文章里的Pattern也不会跟着变。对主题开发者来说，这意味着你不用担心更新主题会把用户自己改过的内容给覆盖掉。

另外，Pattern和模板部件（Template Parts）也有区别。模板部件更适合做网站的全局结构，比如页头、页脚这些每个页面都一样的部分。Pattern则更灵活，主要用于页面里的具体内容区域。而且Pattern因为是注册在主题里的，你可以用PHP处理里面的文字翻译、动态插入图片地址等等，比纯静态的模板部件要灵活不少。

两种Pattern，用对场景才顺手

在WordPress后台创建Pattern的时候，你会遇到一个叫“Synced”的开关。这个开关决定了Pattern的使用方式：

  1. 同步Pattern（Synced）
    这种Pattern其实就是老版本里的“可复用区块”。你在一个地方改了它的内容，所有引用到它的地方都会跟着变。好处是统一管理方便，坏处是不够灵活。这种Pattern只能在WordPress后台创建和管理，没法直接用主题代码注册。
  2. 非同步Pattern（Not Synced）
    主题注册的Pattern都属于这种。每次插入到页面里都是一个全新的副本，随便怎么改都不会影响到别的实例。这也是为什么主题开发者能放心地在Pattern里提供“示例内容”——用户拿到手之后可以随意改成自己的东西。

注意：目前WordPress还不支持直接把主题注册的Pattern标记为“同步”类型，官方讨论区有相关的票（Ticket）在讨论这个功能，但暂时还没实现。如果你的需求是“全局同步更新”，可能得考虑用其他方案，比如模板部件。

在后台创建Pattern，然后在主题里用起来

虽然你这会儿是在看主题开发的教程，但在实际工作中，很多开发者还是习惯先在WordPress后台把Pattern搭出来，满意了再搬到主题里。这么做的好处是：视觉上直观，调样式也方便，不用一遍遍改代码刷新页面。

操作步骤大概是这样的：

  1. 进到后台，找到 外观 > 编辑器（如果是经典主题，可能是 外观 > Pattern）。
  2. 左侧菜单里点“Pattern”，然后点那个创建新Pattern的“+”按钮。
  3. 在弹出的窗口里填好名称、选好分类。如果你是准备放到主题里用的，记得把“Synced”开关关掉。
  4. 进入编辑器后，就像正常写文章一样，把区块拖进去，调好样式。
  5. 保存。这时候你就能在编辑器里看到自己刚做的Pattern了。

把Pattern搬到主题里的关键一步是复制区块代码。编辑完Pattern之后，点右上角的选项菜单（三个竖点那个图标），选择“复制所有区块”。你会得到一大段像是HTML和注释混在一起的东西，这其实就是区块的序列化数据，WordPress就是用这个来还原布局的。

这段代码搬到主题里之后，就能通过register_block_pattern函数注册成一个正式的Pattern了。如果你用的是块主题（Block Theme），还有个更简单的办法：直接把代码放到/patterns文件夹下，WordPress会自动加载。

源码里是怎么注册的？

如果你用的是经典主题，或者想更精细地控制注册过程，可以在functions.php里用PHP代码注册Pattern。

基本的注册函数是register_block_pattern()，需要两个必填参数：的标识符（slug）和包含标题、内容等信息的数组。一个简单的例子就像这样：

php

function mytheme_register_patterns() {
    register_block_pattern(
        'mytheme/hello-world',
        array(
            'title'   => __( 'Hello World', 'mytheme' ),
            'content' => '<!-- wp:paragraph --><p>Hello World</p><!-- /wp:paragraph -->',
        )
    );
}
add_action( 'init', 'mytheme_register_patterns' );

对于块主题，从WordPress 6.0开始，官方推荐把Pattern放在/patterns目录下。每个Pattern就是一个单独的PHP文件，文件头部用注释声明标题、分类这些元信息，剩下的就是区块的HTML代码。这种方式的优点是结构清晰，便于维护——尤其是当你需要管理几十个Pattern的时候。

下面是一个/patterns/hero-section.php文件的例子：

php

<?php
/**
 * Title: 欢迎横幅
 * Slug: mytheme/hero-section
 * Categories: hero, call-to-action
 * Description: 带标题、描述和按钮的欢迎横幅
 * Keywords: 欢迎, 横幅, 号召性用语
 * Viewport Width: 1200
 */
?>

<!-- wp:cover {"overlayColor":"contrast","align":"full"} -->
<div class="wp-block-cover alignfull">
    <span aria-hidden="true" class="wp-block-cover__background has-contrast-background-color has-background-dim-100 has-background-dim"></span>
    <div class="wp-block-cover__inner-container">
        <!-- wp:group {"style":{"spacing":{"blockGap":"2.5rem"}},"layout":{"type":"constrained"}} -->
        <div class="wp-block-group">
            <!-- wp:heading {"textAlign":"center"} -->
            <h2 class="wp-block-heading has-text-align-center">欢迎来到我的站点</h2>
            <!-- /wp:heading -->
            <!-- wp:paragraph {"align":"center"} -->
            <p class="has-text-align-center">这里是我的小天地，分享我的爱好、生活和感悟。</p>
            <!-- /wp:paragraph -->
            <!-- wp:buttons {"layout":{"type":"flex","justifyContent":"center"}} -->
            <div class="wp-block-buttons">
                <!-- wp:button {"className":"is-style-outline"} -->
                <div class="wp-block-button is-style-outline">
                    <a class="wp-block-button__link wp-element-button">看看热门文章 →</a>
                </div>
                <!-- /wp:button -->
            </div>
            <!-- /wp:buttons -->
        </div>
        <!-- /wp:group -->
    </div>
</div>
<!-- /wp:cover -->

关于Pattern管理的一些提醒

目前WordPress对主题开发者来说，Pattern的管理还称不上“丝滑”。你没法直接从后台把做好的Pattern一键同步到主题文件夹里，只能手动复制粘贴代码。而且一旦Pattern被放进主题里，如果再回到后台编辑它，两边的内容就对不上了。

既然这样，平时开发的时候可以先把Pattern在后台搭好，确认设计没问题了再一股脑搬到主题里。这样虽然笨一点，但胜在稳妥，也不容易出错。有经验的开发者通常会搭一个本地开发环境，专门用来试验各种Pattern的组合。

另外，如果你用的是块主题，记得充分利用/patterns文件夹的功能。把每个Pattern拆成单独的文件，配上清晰的命名和注释，日后维护起来会轻松很多——特别是当你的主题要同时支持好几种布局风格的时候。

总结

Block Patterns是WordPress主题开发里一个非常实用的功能。它把零散的区块打包成完整的布局方案，让用户“一键插入”就能搭出好看的页面。对于主题作者来说，它的价值不仅仅是方便了用户——Pattern让你能用PHP处理动态内容（比如多语言支持、动态图片地址），这是纯静态的模板部件做不到的。

理解并善用Pattern，你就能让主题用起来更顺手、看起来更。希望这篇文章能帮上忙，如果对具体的注册方式或者实际应用还有疑问，可以再去翻翻官方的主题开发手册。