WordPress 区块图案在模板中复用：用 Pattern 块落地 pattern-first 思维，少写重复代码

云上的幻象2026-10-047 分钟阅读2,544 字20

100%

WordPress 区块图案在模板中复用：用 Pattern 块落地 pattern-first 思维，少写重复代码

一句话结论

在 WordPress 区块主题里，与其在多个模板里复制同一段区块代码，不如把公共部分注册成一个 Pattern，再用 Pattern 块（ 形式的块标记）在模板和模板部件里一行调用——这就是 pattern-first 思维，能直接砍掉几十行重复代码。

为什么要在模板里用图案

区块图案（Block Pattern）不只是「用户在编辑器里能插入的版式」，它的真正威力在于直接进主题的前端输出。两个核心动机：

PHP 接入：区块模板和模板部件是 HTML 文件，需要动态能力时要用到 PHP 函数（详情见「在图案中使用 PHP 」文档）；
DRY 原则：模板里重复出现的版式（比如首页、归档、搜索页共用的 Query Loop 布局）应该抽成一个图案，而不是在三个文件里各写一遍。

WordPress 官方在剖析 Twenty Twenty-Two 默认主题时发现：index.html 、 home.html 、 search.html 的查询文章输出完全一样，却各写了 33 行重复代码。改用一行 Pattern 调用即可——这就是典型的「低垂果实」。

核心机制：Pattern 块

除了在「注册图案」里登记的图案，WordPress 还提供了一个名为 Pattern 的块。它不在编辑器插入器里出现，主要给主题作者用。关键点：必须设 slug 参数，且值要包含命名空间 + 图案 slug。

<!-- wp:pattern {"slug":"themeslug/hero"} /-->

不仅自己主题的图案能这么引，WordPress 核心或插件注册的图案也能用——只要填对 slug 。

三步落地：以 hero 图案为例

在主题 /patterns 目录新建 hero.php，用文件头注释注册图案（命名空间建议用主题目录名，如 themeslug/hero）。

在模板（如 /templates/home.html）的 header 之下插入 [!-- wp:pattern {"slug":"themeslug/hero"} /--]。

到站点编辑器（外观 → 编辑器 → 模板）打开对应模板，确认图案已渲染；模板部件（template part）里用同样写法即可。

<!-- wp:template-part {"slug":"header","tagName":"header"} /-->
<!-- wp:group {"tagName":"main","layout":{"type":"constrained"}} -->
  <!-- wp:pattern {"slug":"themeslug/hero"} /-->
<!-- /wp:group -->
<!-- wp:template-part {"slug":"footer","tagName":"footer"} /-->

更进一步：起步图案（Starter Patterns）

图案还能当「入口起点」给最终用户：

类型	触发位置	用途
Page Patterns	页面 → 新建	用户新建页面时给一套现成版式
Template Patterns	站点编辑器 → 新建模板	用户建模板时给含 header/footer 的整模板起点

注册页图案只要在文件头设 Block Types: core/post-content 和 Post Types；模板图案则设 Template Types（如 front-page, home）。模板图案通常把 Inserter 设为 no，避免与普通插入图案混淆。

pattern-first 思维的本质

经典主题开发是「模板优先」：模板里塞满结构。区块时代可以把前端看成「一组重复的代码组」。把首页/归档/单篇/侧边栏/页脚拆成几个主区域，每个区域做成一个图案，模板文件里就只剩  调用。主题作者没丢能力，用户反而能直接拿图案去拼自己的页面——这是双赢。

读 WordPress 官方 Patterns 开发文档