块模式(简称“模式”)是主题作者可以使用的最强大的功能之一。WordPress 5.4中引入的模式让用户更容易从块编辑器中插入更复杂的布局,同时为设计者打开了一个充满可能性的世界。
本文提供了什么是模式及其工作方式的总体定义。这将作为您阅读本章其他文章的基础。
从本质上讲,模式只不过是一个或多个预先配置并呈现给最终用户的块。将它们视为可重用的块组。
就这样。真正地。模式只是一组块。
它们非常适合作为用户插入其帖子和页面内容的起点,但在模板内部使用时也很有用。
用户可以从站点编辑器将其直接插入到模板中,或从Post Editor将其插入到其内容中:
与模板部件(这是可重用块组的类似功能)相比,当您将它们绑定到主题中时,模式还允许您访问PHP。这意味着您可以国际化其中的文本,动态添加URL以包含图像等。在本章中,您将了解更多关于这些事情的信息。
请注意,用户可以从外观>编辑器>图案在admin中显示。您还可以使用此屏幕在开发安装中管理自己的模式:
如果您正在构建经典主题,则此屏幕不可用。但是,从WordPress 6.5开始,您可以通过外观>图案而不是屏幕。
基本上,有两种类型的模式:
- 已同步:无论在网站上使用多少次或在何处使用,模式都保持不变。这些以前在旧版本的WordPress中称为“可重用块”。注意:这些只能通过WordPress管理员创建和管理。
- 未同步:当通过块编辑器插入时,将创建图案块的新实例的图案。对插入块所做的任何更改都不会影响图案的其他使用。未来对模式的更改也不会影响以前的使用。
即使在构建主题时,您通常也会直接从管理员那里构建模式,然后从主题本身中绑定和注册它们。这也是一种在本地存储和管理模式的好方法,直到您满意它们已准备好包含在主题中。
了解用户如何与模式交互也是一种很好的实践。
您可以通过访问外观>编辑器在你的WordPress管理员屏幕上点击模式工具条中的项。
在模式屏幕上,必须单击创建图案按钮(+图标),您可以选择创建多个选项:
选择创建图案选项,它将触发如下所示的覆盖模式:
您需要填写三个字段:
- 姓名:确定要创建的图案的名称。
- 类别:添加一个或多个适合您的图案的类别。
- 已同步:决定是否同步模式。如果您计划将其与主题一起发布,则应关闭此选项,以便其行为与来自主题的行为相同。
单击后创建按钮,它将带您进入模式编辑器。从那里,它就像WordPress中的其他编辑器一样工作。在图案中添加想要的块,并调整其设置和样式以满足您的需要。
下面是一个基本的“欢迎英雄”模式示例:
只要确保点击保存按钮。从那里,您可以像使用站点上的任何其他模式一样使用您的模式。
您还可以通过模式>我的模式侧栏中的部分:
这个我的模式部分总是任何用户创建的模式将出现在WordPress管理中的地方。它们也将出现在所有图案部分和分配给他们的任何其他类别。
编辑器界面是一种创建图案的简单方法。但这是主题手册,所以您可能想知道如何将您创建的模式与主题捆绑在一起。
为此,您需要复制模式代码本身。您将在中学习如何处理模式代码注册模式本章中的文章。
复制模式代码有几种不同的方法。但最简单的方法是单击选项按钮(⋮图标),并选择复制所有块下拉菜单中的选项:
对于屏幕截图中显示的特定模式,它将为您提供以下块标记:
<!-- wp:cover{“overlayColor”:“对比度”,“对齐”:“完整”}--><div class=“wp-block-cover alignfull”><span aria-hidden=“true”class=“wb-block-coor__background-has-contrast-background-color has-backgroud-dim-100 has-background-dim”></span><div class=“wp-block-cover__inner-container”><!--wp:group{“style”:{“space”:}“blockGap”:“2.5rem”}},“layout”:{“type”:“constrained”,“wideSize”:“%”,“contentSize”:“75%”}}--><div class=“wp-block-group”><!--wp:heading{“textAlign”:“center”}--><h2 class=“wp-block-heading has-text-align-center”>欢迎访问我的网站</h2><!-- /wp:标题--><!-- wp:段落{“align”:“center”}--><p class=“has-text-align-center”>这是我远离家乡的小家。在这里,你会了解我。我会分享我的爱好、爱好和更多。有时,我甚至会在博客上发表一些有趣的文章</p>(第页)<!-- /wp:段落--><!-- 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> </div><!-- /wp:按钮--></div><!-- /wp:按钮--><!-- /wp:组--><!-- /wp:封面-->
在注册模式文档中,您将学习如何使用块标记,并将其绑定为主题的模式。
目前,主题作者没有标准来管理他们的模式或直接将其移植到他们的主题,而无需经历上述过程。
目前,您完全可以决定如何将模式管理集成到您的工作流中。需要考虑的一些事项:
- 您需要手动将模式的块标记从管理UI复制并粘贴到主题中。
- 如果需要对模式的块标记进行更改,则无法使主题中的模式与在管理员中构建的版本保持同步。
这些无疑是您在决定使用最佳方法时会遇到的挑战。有一个公开讨论对于探索模式管理的官方Create Block Theme插件,这是与其他主题作者讨论最佳前进道路的最佳位置。