theme.json 中的 patterns 属性允许您将来自 WordPress 图案目录 的图案与您的主题捆绑在一起。这是一个很好的系统,可以让您提供多种由您亲自选择的图案,而无需自己设计和构建它们。目录中的任何图案都可供您使用。

WordPress.org 图案目录的截图,显示了一个块图案演示网格。

如果您想尝试冒险,甚至可以将您自定义设计的图案提交到目录中。这将使您能够将这些图案与您的主题捆绑在一起,并让其他主题创建者和用户在使用您的主题时也能使用这些图案。

在本文档中,您将学习如何在 theme.json 中仅用几行代码即可为您的主题用户包含目录图案。

添加来自目录的图案

patterns 是一个可选属性,允许您根据需要与您的主题捆绑任意数量或少数图案。该属性接受一个图案 slug 数组,只要这些图案存在于图案目录中,它们就会出现在 WordPress 编辑器中的图案插入器中。

这是默认 theme.json 中 patterns 属性的示例:

{
	"version": 2,
	"patterns": []
}

让我们来看看来自图案目录的其中一个图案:带有重叠图像的横幅。要查找图案的 slug,您需要查看浏览器的地址栏,它应该会给出此 URL:

https://wordpress.org/patterns/pattern/hero-banner-with-overlap-images/

slug 是 https://wordpress.org/patterns/pattern/ 之后的 URL 部分。在这种情况下,slug 是 hero-banner-with-overlap-images(请注意,最后的斜杠不包括在内)。

要将此图案与您的主题一起包含,您只需将 slug 传递给 theme.json 中的 patterns 数组:

{
	"version": 2,
	"patterns": [
		"hero-banner-with-overlap-images"
	]
}

现在您已经掌握了基础知识,挑选几个其他图案并将其添加到 theme.json 中的 patterns 数组:

{
	"version": 2,
	"patterns": [
		"fullscreen-cover-image-gallery",
		"hero-banner-with-overlap-images",
		"mixed-shape-gallery"
	]
}

现在您应该在 UI 中的图案插入器中看到您选择的图案:

来自页面编辑屏幕的图案插入器,显示基于图库的图案列表。

您包含的图案将自动出现在它们在图案目录中分配的类别下。这些映射到 WordPress 内部注册的现有图案。上面示例代码中的图案都具有 gallery 图案类别,因此它们出现在插入器的图案 > 图库选项卡下。