最近对主题目录的搜索出现了一个主题,看起来好像它使用了自定义模板部分区域。
一个主题。
无论开发人员是否没有找到这些方便的工具的用途,或者他们还不知道它们,模板部分区域是如此有用,以至于您可能已经在块主题中使用了它们。(您只是没有意识到……)。
在本教程之后,也许您会感到非常激动,可以尝试主题中的自定义模板部分区域。
但是首先,让我们看一下它们的工作方式以及如何注册自己,这样您就会确切知道自己的痛苦 关于。
什么是模板零件区域?
同样,如果您构建了一个块主题,则可能已经使用了它们。而且,再次,也许您甚至都不知道。
模板零件区域将页面的一个区域定义为一组特定模板零件可以使用的地方。例如,标题区域是用于站点标题的。您甚至可以粘贴(您猜到了),将模板置于标题区域。
困惑了吗?当已经有一个标头模板部分时,为什么WordPress具有标头区域?
将其视为一种分类学。您的主题很可能有两个,三个甚至十几个不同的标题,您希望用户选择。也许十几个是过分的,但是YOLO – 您做自己的事,并为之带来乐趣。
这个系统的伟大是您的用户可以选择并选择他们认为在给定区域中最有效的模板部分。
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将其标记为 一般的,如果您在页面上有多个未分类的模板零件,那么您很快就为自己买了UX的噩梦。
让我们尝试通过自定义的侧栏模板零件区域来改善这种体验。注册后,它将显示在网站编辑器中:
这是您的做法。首先,将过滤器添加到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 Development的人来说,这可能是“好第一张票”。
现在,注册区域不会自动使其出现在网站编辑器中。您还需要注册至少一个模板部分,并且该模板零件也必须在您当前正在编辑的模板内。
将模板零件添加到自定义区域
在注册自定义侧边栏区域后,您可以开始为其分配模板零件。
首先添加一个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
主题中的文件夹,并将其称为各自的顶级模板。
因此,现在您知道了幸福的Block-Theme UI的秘密酱:模板部分区域。您处在不断扩展这些基础知识的情况下,为您的主题构建各种模板部分领域。
您会先添加哪些?
道具 @玛丽鲍姆,@BPH,和 @NDIEGO 用于反馈和审查。