随着每个 WordPress 和 Gutenberg 版本的发布，Patterns API 变得越来越强大。作为主题作者和设计师，你不断发现的新用例反过来也在推动着开发向前发展。

自 Gutenberg 15.5 版本 起，你可以注册特定于模板的模式，供你的主题用户在添加新模板时使用。

这个功能经过多个 Gutenberg 版本的开发。版本 14.9 开始允许你为 特定模板类型 注册模式。然后，在 15.2 中，当你从站点编辑器添加新模板时，可以通过 起始模态窗口 选择备用或空模板。Gutenberg 15.5 将这两个概念结合在一起：你的模板模式现在会显示在模态窗口中。

现在的问题是：你能用 Patterns API 的这个新功能构建什么？

本教程将重点介绍创建多种首页设计供用户选择。具体来说，你将学习构建与 WordPress 中的 首页 模板绑定的模式。

你也可以使用本文中的流程为任何模板类型构建模式。这将为你的用户提供更多选择和对他们网站的控制权。

为模板类型注册模式

在继续之前，你应该已经熟悉 注册自定义模式。本教程使用的技术是通过将模式文件放置在主题的 /patterns 文件夹中来注册它们。

以下是一个基本模式文件的代码，其中包含了新的 Template Types 头部信息：

<?php
/**
 * Title: Your Pattern Title
 * Slug: themeslug/pattern-slug
 * Categories: posts
 * Template Types: front-page
 */
?>
<!-- Your pattern code goes here. -->

Template Types 头部接受单个值或逗号分隔的模板类型列表。例如，如果你想让模式同时适用于首页和页面，代码将是：

<?php
/**
 * Title: Your Pattern Title
 * Slug: themeslug/pattern-slug
 * Categories: posts
 * Template Types: front-page, page
 */
?>
<!-- Your pattern code goes here. -->

在本教程中，你将使用 front-page 模板。但是，你也可以自由地为你想构建的其他模式使用以下任何默认模板类型：

• index
• home
• front-page
• singular
• single
• page
• archive
• author
• category
• taxonomy
• date
• tag
• attachment
• search
• privacy-policy
• 404

构建自定义首页模式

在本教程中，你将构建一个用于 front-page 模板类型的简单模式，如下所示：

你的主题用户可以通过 WordPress 管理后台的 外观 > 编辑器 > 模板 添加首页模板时选择此模式。一旦掌握了基础知识，你可以添加任意数量的模式，甚至上百个——但要合理！

现在使用你在上一节学到的知识来构建一个新模式。创建一个名为 hero.php 的文件，并将其放在你主题的 /patterns 文件夹中，代码如下（确保将 themeslug 更改为你主题的 slug）：

<?php
/**
 * Title: Hero
 * Slug: themeslug/hero
 * Categories: posts
 * Template Types: front-page
 */
?>
<!-- Your pattern code goes here. -->

由于此模式是针对特定模板类型的，它将代表使用该页面的整个前端视图。根据你的设计，你通常需要包含常见的模板部件，如页眉和页脚。

你的初始模式代码可能如下所示：

<?php
/**
 * Title: Hero
 * Slug: themeslug/hero
 * Categories: posts
 * Template Types: front-page
 */
?>
<!-- wp:template-part {"slug":"header","tagName":"header","theme":"themeslug"} /-->

<!-- Your pattern code goes here. -->

<!-- wp:template-part {"slug":"footer","tagName":"footer","theme":"themeslug"} /-->

注意代码中 theme 属性的使用。当你在模式中包含模板部件时，必须将此属性设置为你的主题 slug。否则，编辑器将抛出“缺少模板部件”错误。有一个 待解决的问题 正在处理此问题。

WordPress 目前还没有内置的模式管理器/构建器。创建自定义模式最简单的方法是在站点编辑器或模板编辑器中创建它，然后将区块代码复制到模式文件中。或者你也可以使用文章/页面编辑器来构建（注意：此编辑器无法添加模板部件）。

前面截图中显示的模式有四个组成部分：

• 页眉模板部件
• 包含嵌套的标题、段落和按钮区块的封面区块
• 查询循环区块
• 页脚模板部件

尝试在编辑器中重新创建它。或者完善一个你更喜欢的设计。

💡 提示： 你可以通过点击 : (选项) 按钮并选择 复制所有区块 来复制编辑器中的所有区块代码。

如果你在过程中遇到困难，请将以下代码复制并粘贴到你主题的 /patterns/hero.php 文件中并进行自定义：

<?php
/**
 * Title: Hero
 * Slug: themeslug/hero
 * Categories: posts
 * Template Types: front-page
 */
?>
<!-- wp:template-part {"slug":"header","tagName":"header","theme":"themeslug"} /-->

<!-- wp:cover {"minHeightUnit":"vh","gradient":"vivid-cyan-blue-to-vivid-purple","isDark":false,"align":"full","textColor":"white","layout":{"type":"constrained"}} -->
<div class="wp-block-cover alignfull is-light has-white-color has-text-color"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-100 has-background-dim has-background-gradient has-vivid-cyan-blue-to-vivid-purple-gradient-background"></span><div class="wp-block-cover__inner-container"><!-- wp:spacer {"height":"60px"} -->
<div style="height:60px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:heading {"textAlign":"center","align":"wide","style":{"typography":{"lineHeight":"1.1","fontSize":"5rem"}}} -->
<h2 class="wp-block-heading alignwide has-text-align-center" style="font-size:5rem;line-height:1.1">A Radical  Experience</h2>
<!-- /wp:heading -->

<!-- wp:paragraph {"align":"center","style":{"typography":{"fontSize":"1.4rem"}}} -->
<p class="has-text-align-center" style="font-size:1.4rem">This blog documents my travels around the world. Follow along if you want to experience the adventure of a lifetime.</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">More About Me <span aria-hidden="true" class="wp-exclude-emoji">→</span></a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->

<!-- wp:spacer {"height":"60px"} -->
<div style="height:60px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer --></div></div>
<!-- /wp:cover -->

<!-- wp:group {"align":"full","style":{"spacing":{"padding":{"top":"2em","right":"2em","bottom":"2em","left":"2em"}}},"layout":{"type":"default"}} -->
<div class="wp-block-group alignfull" style="padding-top:2em;padding-right:2em;padding-bottom:2em;padding-left:2em"><!-- wp:query {"queryId":10,"query":{"perPage":3,"pages":0,"offset":0,"postType":"post","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":false},"displayLayout":{"type":"flex","columns":3}} -->
<div class="wp-block-query"><!-- wp:post-template -->
<!-- wp:post-title {"level":3,"isLink":true} /-->

<!-- wp:post-featured-image {"isLink":true,"aspectRatio":"1","align":"wide"} /-->

<!-- wp:post-excerpt {"excerptLength":16} /-->

<!-- wp:separator -->
<hr class="wp-block-separator has-css-opacity"/>
<!-- /wp:separator -->

<!-- wp:post-date /-->
<!-- /wp:post-template --></div>
<!-- /wp:query --></div>
<!-- /wp:group -->

<!-- wp:template-part {"slug":"footer","tagName":"footer","theme":"themeslug"} /-->

从模式创建首页

目前，模板模式的目的是为用户提供新模板的起点。理论上，未来这可能演变为整体替换现有模板，但该功能目前还不允许你这样做。所以现在，你只能在首次在站点编辑器中添加新模板时使用模板模式。

转到 WordPress 管理后台的 外观 > 编辑器，点击 模板 项。然后，点击 + (添加新模板) 按钮并选择 首页，如下所示：

这应该会打开编辑器，并显示一个用于选择模式的起始模态窗口。你应该在列表中看到你的自定义模式，如下所示：

一旦你选择了自定义模式，WordPress 会将其添加到编辑器的内容画布中。从那里，你（或你的用户）可以进一步编辑它。

剩下的就是创建更多模式。一旦这个功能在 WordPress 中落地，它将为你提供一个解决主题化中古老问题的现成方案：如何为用户提供多种模板选项？ 这个问题是首页设计的核心，这也是本文重点讨论它的原因。但是，不要把自己局限在一种模板类型上。去探索你喜欢的任意多种模板类型。