WordPress模板中的模式使用指南

发布于 作者:

在WordPress主题开发中，模式（Patterns）远不止是用户可手动插入的区块组合。当你开始在主题模板中直接调用模式时，它们会成为你构建网站的有力工具。本文将从实用角度出发，告诉你为什么要直接在模板中使用模式，以及如何操作。你将会了解到Pattern区块的用法，并通过一个具体的”英雄区”案例，掌握在首页模板中嵌入模式的全流程。通过这种方式，你不仅能够复用代码，保持项目整洁，还能在模板中享受PHP带来的动态数据处理能力。无论你是刚开始接触WordPress主题开发，还是已经有一些经验，这份指南都会帮你更好地理解并运用这个功能。

为什么要在模板中使用模式？

在深入代码之前，先搞清楚背后逻辑。有两个核心理由，让你值得在主题模板中直接引用模式：

一，获得PHP支持。 块模板和模板部件本质上是HTML文件，但很多实际场景里你离不开PHP。比如需要动态获取当前分类名称、调用翻译函数，或者根据用户登录状态显示不同内容。这时把模式放到模板里，就能在模式中自由使用PHP函数。

二，遵循DRY原则。 DRY是”Don’t Repeat Yourself”的缩写，是软件开发里一条基础准则——同样的代码别写两遍。比如你网站首页、归档页、搜索页都用相同的文章列表布局，那就做成一个模式，然后在三个模板里分别引用它。以后要改样式，只改模式一处就够了，既省事又降低出错概率。

认识Pattern区块

这里有一个容易混淆的概念需要先理清：一方面”模式”（Pattern）是你注册的一组区块集合，另一方面WordPress里确实有一个专门的区块叫”Pattern”。

这个Pattern区块在设计器的区块插入器里是找不到的，它专供主题开发者使用。它的写法其简单：

html

<!-- wp:pattern {"slug":"your-namespace/pattern-slug"} /-->

看起来和普通区块没什么两样，关键的是slug参数——你必须告诉它你要引用哪个模式，值由”命名空间/模式别名”组成。

注意，你不仅能引用自己主题注册的模式，任何来自WordPress核心或插件的模式，只要你知道它的slug，都能在模板中调用。

实战：给首页加一个英雄区

下面通过一个完整例子，带你走一遍流程。假设你做的是一个公司官网主题，希望在首页顶部默认显示一个英雄区（Hero），同时这个英雄区也允许用户在页面任何位置手动添加。

一步：注册模式

在主题的/patterns文件夹下新建一个hero.php文件：

php

<?php
/**
 * Title: 英雄区
 * Slug: mytheme/hero
 * Categories: featured
 */
?>
<!-- wp:cover {"overlayColor":"contrast","isUserOverlayColor":true,"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:heading {"textAlign":"center"} -->
		<h2 class="wp-block-heading has-text-align-center"><?php esc_html_e( '欢迎来到我的网站', 'mytheme' ); ?></h2>
		<!-- /wp:heading -->

		<!-- wp:paragraph {"align":"center"} -->
		<p class="has-text-align-center"><?php esc_html_e( '这是一个温馨的互联网小角落。', 'mytheme' ); ?></p>
		<!-- /wp:paragraph -->

		<!-- wp:buttons {"layout":{"type":"flex","justifyContent":"center"}} -->
		<div class="wp-block-buttons">
			<!-- wp:button {"className":"wp-block-button is-style-outline"} -->
			<div class="wp-block-button is-style-outline"><a class="wp-block-button__link wp-element-button"><?php esc_html_e( '了解更多', 'mytheme' ); ?></a></div>
			<!-- /wp:button -->
		</div>
		<!-- /wp:buttons -->

	</div>
</div>
<!-- /wp:cover -->

文件开头的PHP注释块定义了模式的元信息，Title是名称，Slug是调用时的标识（格式”主题名/模式名”），Categories用于在编辑器里分类显示。区块里混用了PHP的esc_html_e()函数，这是主题开发中用来输出翻译文本的标准做法。

二步：在模板中引用

现在打开你的/templates/home.html（或index.html），在页眉和页脚之间插入Pattern区块：

html

<!-- wp:template-part {"slug":"header"} /-->

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

<!-- 这里是其他内容，比如文章列表 -->

<!-- wp:template-part {"slug":"footer"} /-->

三步：查看效果

进入WordPress后台，点击”外观 → 编辑器 → 模板”，找到你修改的模板。在可视化编辑界面中，你应该能看到英雄区已经固定显示在模板里了。前端访问首页，同样能看到它。

这个模式在编辑器里对用户是可见的，用户如果愿意，可以在任何页面或文章里通过区块插入器再次添加它。但你放在模板里的这个版本，是每个访客都会看到的默认内容。

补充：模式与模板部件的区别

刚接触WordPress主题开发时，容易把模式和模板部件搞混。简单区分一下：

  • 模板部件（Template Part）通常代表网站的结构性区域，比如页眉、页脚、侧边栏。每个网站一般只有一套页眉和页脚，所有模板共用。
  • 模式（Pattern）代表的是可复用的内容组件，比如产品介绍卡片、团队展示区、CTA按钮组。一个网站可能有几十种不同的模式，分布在各种页面的不同位置。

两者也可以配合使用——比如你可以在页眉模板部件里引用一个导航相关的模式。

总结

在模板中使用模式是WordPress主题开发中一项非常实用的技术。它的核心价值体现在两方面：一是让你在HTML模板中拥有PHP的处理能力，二是帮助你在多个模板间复用区块代码，保持项目整洁和可维护性。具体操作上，你只需注册好模式，然后在模板的HTML文件中用<!-- wp:pattern {"slug":"命名空间/模式名"} /-->即可完成调用。这个技巧在开发中等规模以上的主题时几乎一定会用到，掌握它能让你的主题开发工作更加顺畅。