最近对主题目录的搜索发现，有一个主题看起来使用了自定义模板部件区域。

只有一个主题。

无论是因为开发者没有找到这些便捷工具的用途，还是他们尚未了解，模板部件区域都非常有用，你可能已经在你的区块主题中使用它们了。（只是你还没意识到……）。

通过本教程，也许你会对在自己的主题中尝试自定义模板部件区域充满热情。

但首先，让我们看看它们是如何工作的，以及如何注册你自己的区域，这样你就能确切地知道你在为什么而兴奋。

什么是模板部件区域？

再次强调，如果你构建过区块主题，很可能已经用过它们。而且，你可能甚至都不知道。

模板部件区域将页面的某个区域定义为一组特定模板部件可以放置的位置。例如，页眉区域用于放置站点页眉。你甚至可以把——你猜对了——页眉模板部件放在页眉区域。

感到困惑了吗？既然已经有了页眉模板部件，为什么WordPress还要有页眉区域？

可以把它看作一种分类法。你的主题很可能有两个、三个，甚至十几个不同的页眉供用户选择。也许十几个有点多，但人生只有一次——做你想做的，享受乐趣。

这个系统的优点是，你的用户可以选择他们认为在特定区域效果最好的模板部件。

WordPress定义了三个默认区域：

• header
• footer
• uncategorized（在UI中标题为常规）

当你在theme.json中注册自定义模板部件时，可以使用这些区域。只需确保定义area值，如下所示。顺便说一下，这些当然是区块主题中最常注册的两个模板部件：页眉和页脚：

{
	"$schema": "https://schemas.wp.org/trunk/theme.json",
	"version": 2,
	"templateParts": [
		{
			"area": "header",
			"name": "header",
			"title": "Header"
		},
		{
			"area": "footer",
			"name": "footer",
			"title": "Footer"
		}
	]
}

从技术上讲，你可以随意命名页眉和页脚模板部件。大多数主题作者纯粹出于惯例使用这些名称。但为了将它们与其他页眉区分开来，你可以考虑使用站点页眉和站点页脚。

请注意，在站点编辑器中，你可以在模板面板下看到页眉和页脚区域：

这个面板的一个重要作用是帮助你从一个区域导航到另一个区域。如果你点击页眉区域，它会跳转到模板中的页眉部分。

当模板只有两个部分时，这可能不算什么。但是当你在更复杂的模板中注册了多个自定义区域时，你会很高兴有一些简单的方法来应对这种混乱。

此外，模板部件区域允许你在为该区域注册的所有模板部件或区块模式之间切换。

要测试一下，请选择页眉区域，然后点击工具栏中的⋮（选项）按钮。现在点击下拉菜单中的替换页眉选项。该操作将弹出一个模态窗口，显示该区域可用的模板部件或模式：

从那里，你可以用你更喜欢的页眉替换现有的页眉。

在抱太大希望之前，请注意此替换功能目前不支持自定义模板部件区域。抱歉。有一个开放工单旨在实现这一神奇功能，但为未来开发总是有益的。目前，你只能替换页眉和页脚。

注册模板部件区域

现在进入有趣的部分！是时候构建你自己的模板部件区域了。

主题模板中几个常见的区域是侧边栏和评论部分。如果没有自定义区域，你需要将它们注册为uncategorized。UI将其标记为常规，如果一个页面上有多个未分类的模板部件，你很快就会陷入用户体验的噩梦。

让我们尝试用自定义的侧边栏模板部件区域来改善这种体验。注册后，它将在站点编辑器中显示如下：

具体操作如下。首先，向default_wp_template_part_areas钩子添加一个过滤器。你的回调函数应接受一个名为$areas的参数，这是一个区域定义数组。

将此代码添加到主题的functions.php文件中，你将注册你的第一个侧边栏区域：

add_filter( 'default_wp_template_part_areas', 'themeslug_template_part_areas' );

function themeslug_template_part_areas( array $areas ) {
	$areas[] = array(
		'area'        => 'sidebar',
		'area_tag'    => 'section',
		'label'       => __( 'Sidebar', 'themeslug' ),
		'description' => __( 'Custom description', 'themslug' ),
		'icon'        => 'sidebar'
	);

	return $areas;
}

icon参数仅支持四个图标。header、footer、sidebar是指定名称的图标；所有其他值将恢复为symbolFilledIcon。有一个开放工单旨在解决此限制，但缺少推动其前进的补丁。对于想要参与Gutenberg开发的人来说，这可能是一个“好的入门工单”。

现在，注册一个区域并不会自动使其出现在站点编辑器中。你还需要注册至少一个模板部件，并且该模板部件必须位于你当前正在编辑的模板内。

将模板部件添加到自定义区域

注册了自定义侧边栏区域后，你就可以开始为其分配模板部件了。

首先，将一个sidebar.html文件添加到主题的/parts文件夹中。你可以在其中放入任何有效的区块标记。

然后，使用以下代码从顶级模板（如/templates/single.html或/templates/home.html）的任何位置调用该模板部件：

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

现在，为该区域注册部件。打开你的theme.json文件，为sidebar区域添加你的模板部件：

{
	"$schema": "https://schemas.wp.org/trunk/theme.json",
	"version": 2,
	"templateParts": [
		{
			"area": "header",
			"name": "header",
			"title": "Header"
		},
		{
			"area": "sidebar",
			"name": "sidebar",
			"title": "Sidebar"
		},
		{
			"area": "footer",
			"name": "footer",
			"title": "Footer"
		}
	]
}

接下来，访问站点编辑器并确保一切正常：你的侧边栏应该出现在你调用它的任何模板中，并且侧边栏区域应该出现在模板面板中。

想要更多吗？尝试再注册几个侧边栏部件——也许为主页和网站的商店注册几个：

//...
	{
		"area": "sidebar",
		"name": "sidebar-home",
		"title": "Sidebar: Home"
	{
		"area": "sidebar",
		"name": "sidebar-shop",
		"title": "Sidebar: Shop"
	}
//...

确保将sidebar-home.html和sidebar-shop.html文件添加到主题的/parts文件夹中，并在它们各自的顶级模板中调用它们。

现在你知道了实现愉悦区块主题UI的秘诀：模板部件区域。你处于一个绝佳的位置，可以继续扩展这些基础知识，为你的主题构建各种模板部件区域。

你首先会添加哪些区域呢？