免费获取策划方案多一份参考,总有益处

重庆网站公司

Company website

案例671

重庆网站公司

如何使用WordPress块模式

来源:派臣科技|时间:2020-11-20|浏览:

块模式有可能使在WordPress中发布内容比以往任何时候都更容易、更灵活。

例如,假设您总是发现自己在您的帖子中添加了相同的两个块。也许是两个并排的按钮。如果你以前做过这样的事情,那么你就知道怎样才能做到这一点:

添加一个包含两列的列块

接下来,在左列中添加一个按钮块

然后。向右列添加一个按钮块

显示带有两列的轮廓,每列都有一个表示button作为标签的蓝色圆角按钮。

这就是块模式被设计来解决的问题。

块模式允许您将块组合成一个组,以便在需要的时候重用,而不是放入多个块来创建一个元素。WordPress甚至提供了几种开箱即用的块模式。

块菜单作为内容编辑器左侧的边栏打开,Patterns选项卡处于活动状态。在模式菜单上方有一个灰色的搜索框。菜单下面是前两个模式的预览,包括两个按钮、三个按钮和列。

以我们的按钮为例,我们可以将这些块组合在一起,并将它们保存为一个块以供以后使用。但在这之前,让我们先画出另一个重要的区别。

块模式与可重用块非常相似。

块编辑器已经允许我们完成块模式对可重用块的处理:将一些块作为一个组放入编辑器中,单击小菜单图标,然后选择“添加到可重用块”选项。

太酷了!现在给它一个名字,当我们需要两个紧挨着的按钮时,我们可以使用它。

那么,当可重用块还可以保存一组块时,为什么要使用块模式呢?

一个原因是,当你对一个可重用的块做了一个改变时,这些改变将自动应用到任何块被使用的地方,无论是在同一个岗位上,还是在另一个岗位上。可以将一个可重用块转换为一个常规块,这样更改只适用于该实例,但这会破坏分组块的布局,并需要修改一堆内容。

另一方面,块模式是一开始就可以编辑的。它们只是提供了块的布局,你可以在其中创建和定制你的内容。

相关:查看要与事件日历一起使用的这些块模式。

如何注册块模式

WordPress引入了一个新的register_block_pattern()函数,就像它的名字一样,它注册了一个块模式,以便你将来可以使用它。它的所有文档都可以在WordPress.org上找到,所以我们不会在这里详细说明。重要的是了解它所需要的论证。这是两个必需的参数:

标题:您将在模式菜单中看到的模式名称。

内容:模式代码。

描述:一个简短的描述模式的简介。

categories:将模式与相同类别中的其他模式进行分组。

关键字:告诉WordPress如果在块菜单中搜索某些单词应该返回作为搜索结果的模式。这对于使模式更容易被发现非常方便。例如,在搜索“three”或任何其他单词组合时,可以找到一个包含一行三张卡片的模式,称为“cards”。

viewportWidth:这给了你一点额外的控制模式在块插入器中的外观,比如将其设置为全宽项。

首先,让我们定义一个模式类别。

这是完全可选的,并且只有在您想在一个全新的类别下注册一个模式时才真正必要。

如果你可以使用其中任何一种,那太棒了!如果没有,那就创建一个!无论哪种方式,如果你不想分类一个模式,它会自动进入一个“未分类”的类别,就像未分类的文章一样。

正如您所看到的,它实际上只需要一个标签参数。my-block-patterns的部分只是你插件或主题的命名空间…无论你注册块模式的地方。

接下来,在WordPress中创建模式。

现在,我们可以在register_block_pattern()函数中直接为模式编写代码。但这将是对耐心的考验。在块编辑器中勾画模式的草图,然后将代码复制到函数中,这样做要容易得多。

首先,创建一个组。然后,在那个组中放下一些积木。接下来,选择组,打开块选项菜单,选择“复制”选项。

显示包含两个黑色按钮的选定组,在组内容上展开选项菜单,选择复制选项。

复制块复制块的HTML和标记。这就是我们需要的内容参数寄存器函数。

但首先……

我们需要对复制的代码进行转义。

这是正确的。我们不能简单地把它粘贴进去。幸运的是,有一个在线工具可以帮我们摆脱代码。粘贴到那里,计时“Escape”按钮,然后复制它输出的代码。

显示用于转义代码的在线工具。这里有一个用于粘贴代码的纹理,需要在包含生成代码的另一个纹理之上转义。

先拿着这个。我们马上就需要它。

注册模式。

我们有一些模式的代码。我们有一个记录模式的函数。现在,让我们把它们放在一起来创建一个图案。

开始使用模式!

现在我们可以回到编辑器。打开块插入器,搜索模式,并从结果中选择它。

在块插入程序中显示两个按钮示例模式,该模式在发布内容的左侧打开。

开始在事件日历中使用块模式。

如果我们没有带一些模式,这篇文章是不完整的。因此,我们创建了一个小扩展,您可以安装添加一些模式,以使用与事件日历。

留言

返回顶部

君
重庆网站建设重庆网站公司如何使用WordPress块模式