如何在WordPress块编辑器中创建块模式

WordPress管理仪表板-新页面的截图，在菜单中显示了新的自定义块模式，并在页面中使用。

介绍

在WordPress的块编辑器中设计页面时最大的时间浪费之一是在每个页面上逐个将每个块复数布局添加到一个。

有一个简单的系统来加快设计过程，它不会很好吗？一个可以直接访问块库中的任何可用模式，尤其是您自己的自定义设计？

这就是自定义块模式进来的地方。

块模式可以手动创建和设计，存储和插入你想在WordPress网站上的任何地方。

如果这一切都听得太多就像努力工作，你也可以使用许多开发人员和网站的预先制作的块模式。

在本文中，我们将快速看看StudioPress的Genesis Blocks提供的模式．然后，我们将通过简要的教程来介绍如何手动创建和存储自己的块模式，以便再次使用。

古腾堡版编辑

WordPress的块编辑器是我们在2018年5.0版本时收到的早期圣诞礼物。区块模式是在2020年8月发布的WordPress 5.5中附带的一项功能。

我们目前在5.8版本中找到自己，编辑在过去近三年的跨越式和界限中增加。

无论你喜欢它还是讨厌它(如果你碰巧讨厌它，经典编辑器仍然是你的一个选择)，它都是可以留下来的。

它的进化、成长和不断的改进似乎是非常重要的一部分WordPress的未来计划．

基于块的方法

WordPress的Gutenberg Block Editor使用基于块的方法来创建网站，页面和博客文章。

熟悉它的人会知道，几乎所有你需要的东西都已经有一个块了。这可以是添加栏目、嵌入视频、分割器、图库或任何用于改善页面的东西。

当然，一旦你花了时间构建你的页面完全通过铺设所有不同的块来说，您想要的方式，它是一个非常安全的网，您想再次使用它，或者至少部分地区。

你真正不想要的是每次都要从头开始。

输入块模式

这就是方块模式发挥作用的地方。

什么是方块模式?这只是WordPress给模板起的花哨的名字，可以是整个页面，也可以是页面的一小部分。它是一个由定制的区块安排组成的模板。多个块按你想要的方式排列，用作一个“模式”。

预先制作的高级方块图案

WordPress和它庞大的用户基础的一个伟大之处在于，你可以在WordPress网站上实现任何你想要的功能。快速浏览一下插件库，它是众多提供免费或付费WordPress主题的网站之一我们的插件列表将确认这一点。

如您所料，块模式也是如此。一个很好的例子是StudioPress的Genesis Blocks．

他们提供了大量的预先制作的付费块模式以及数量有限的免费块，他们提供了他们所谓的“一个强大的付费块库”（SIC）最好的编辑，使它更好。”

在撰写本文时，免费版提供以下内容：

15个新块
4预构建full-page-layouts
8预构建的部分
AMP优化

的pro版本的创世纪块提供更大的范围，包括以下内容：

超过15个新区块
50+预建的全页布局
超过130个预构建的部分
AMP优化
保存和重用您自己的部分和布局
高级块级别用户权限

是时候升级主机了?

想要网站速度提高40% ?搬到WP引擎．享受即时访问和支持WordPress的10个最好的Genesis块编辑器主题WP引擎这家公司是创世纪和StudioPress的幕后推手。可在所有计划!

优惠码WPMayor20享受20％的折扣

自己做

自然地，总是可以自己做到这件事，并确切地创造什么你需要，根据你的品味定制。

这是怎么做的。

从一开始，这里有一些关键的外卖：

块模式是预定义的块布局。
一旦插入页面，就可以像任何其他常规块一样编辑每个单独的块。
将块模式插入页面后，它是“独立”，这意味着它不再链接到块模式库。这意味着更改页面上的模式不会影响库中的原始存储模式。相反，更改库中的模式不会更改已添加到您页面的模式。

现在我们已经解决了这个问题，让我们快速地完成在Library中创建和存储一个函数的步骤:

步骤1:在WordPress的Gutenberg编辑器中创建一个新页面

创建一个新页面，并使用块来设计它。

一旦您创建了您的感受，您对您感到满意的“模板”并希望再次使用，请执行以下操作：

步骤2:选择和复制块

选择要包含在保存模式中的所有相关块。

在弹出的块工具栏上，选择三个垂直点（“选项”），然后单击“复制”

你会看到一个弹出的确认框，上面写着“已复制”n把积木放到剪贴板上。”

或者，像以前一样选择所有的块，但是，点击右上角的三个点，然后选择“代码编辑器”。

使用Ctrl + C / CMD + C选择将其出现并将其复制到剪贴板的所有代码。

第三步:“逃离”代码

前往json逃脱了json格式化器然后将代码粘贴到左边窗口。

然后，只需单击中间的“转义”按钮（如果修改后的代码没有自动出现，通常会显示它）。

请参阅右侧窗口中出现的代码？这是我们想要的好东西。复制它并将其保留在手附近。

这是PHP的亮点。(如果PHP对你来说是新的，不要烦恼!复制粘贴到救援!)

回到你的WordPress Dashboard，导航到Appearance >主题编辑器。

在主题文件部分中要找的是functions.php文件。注意，一些主题在“主题函数”下列出了这个文件。

在functions.php文件中，一直滚动到最后(不需要搅乱那里的任何东西)。

复制并粘贴以下代码:

函数函数_name（）{register_block_pattern（'slug'，array（'title'=> __（'title'，'text-domain'），'design' => _x（'您的描述'，'块图案描述'，'块图案描述'，'文本域'），'内容'=>“”，））;} add_action（'init'，'function_name'）;

这个代码的来源是丰富的塔博尔

请注意，您需要在此处指定自己的函数名称。确保你写它完全它的同样需要它是为了工作的。我经过惨痛的教训才学到这个…

在相关的单引号内添加Snappy标题和描述。

请记住，修改后的代码，我提到在步骤3中保持方便？现在是时候带来了。

粘贴在内容部分中的两个（当前空的）引号之间的代码。

都做了什么?

点击“更新文件”，你很高兴！