如何在WordPress中创建自定义古腾堡块（简便方法）

2020-04-27
WordPress

您想为您的WordPress网站创建自定义古腾堡块吗？WordPress 5.0更新后，您需要使用块在新的WordPress块编辑器中创建内容。

WordPress附带了几个有用的块，您可以在编写内容时使用它们。许多WordPress插件还带有您可以使用的自己的块。

但是，有时您可能想创建自己的自定义Gutenberg块来执行特定的操作。

如果您正在寻找一种简单的解决方案来为您的WordPress网站创建自定义古腾堡块，那么您来对地方了。

在本分步教程中，我们将向您展示为古腾堡创建自定义WordPress块的简单方法。

注意：本文适用于中级用户。您需要熟悉HTML和CSS才能创建自定义的Gutenberg块。

步骤1：开始

您需要做的第一件事是安装并激活Block Lab插件。

这是一个WordPress插件，可让您轻松地从管理面板创建自定义块。

要安装插件，您可以按照我们的初学者指南安装WordPress插件。

激活插件后，您可以继续执行创建第一个自定义块的下一步。

步骤2：建立新区块

为了本教程的缘故，我们将构建一个“推荐”块。

首先，从管理面板的左侧栏中转到Block Lab»Add New。

在此页面上，您需要为块命名。您可以在“在此处输入块名称”文本框中输入您选择的任何名称。

我们将命名自定义块：推荐。

在页面的右侧，您将找到块属性。在这里，您可以为块选择一个图标，然后从“类别”下拉框中选择一个块类别。

弹头将根据您的方块名称自动填充，因此您无需更改它。但是，您可以在“关键字”文本字段中最多写入3个关键字，以便可以轻松找到您的块。

现在，让我们向块添加一些字段。您可以添加不同类型的字段，例如文本，数字，电子邮件，URL，颜色，图像，复选框，单选按钮等等。

我们将3个字段添加到我们的自定义推荐区中：一个用于评论者图像的image字段，一个用于评论者姓名的文本框和一个用于推荐文本的textarea字段。

单击+添加字段按钮以插入第一个字段。

这将为该字段打开一些选项。让我们看看它们中的每一个。

字段标签：您可以使用任意选择的名称作为字段标签。让我们将第一个字段命名为“审阅者图像”。
字段名称：字段名称将基于字段标签自动生成。我们将在下一步中使用此字段名称，因此请确保每个字段的名称都是唯一的。
字段类型：您可以在此处选择字段的类型。我们希望我们的第一个字段是图像，因此我们将从下拉菜单中选择图像。
字段位置：您可以决定要将字段添加到编辑器还是检查器。
帮助文本：您可以添加一些文本来描述该字段。如果要创建此块供个人使用，则不需要这样做。

您还可能会根据您选择的字段类型获得一些其他选项。例如，如果您选择一个文本字段，那么您将获得额外的选项，例如占位符文本和字符限制。

处理完图像字段后，可以单击“ 关闭字段”按钮。

完成上述过程后，让我们通过单击+添加字段按钮为我们的推荐模块添加2个其他字段。

如果您想对字段进行重新排序，则可以使用每个字段标签左侧的汉堡包图标拖动它们来完成。

要编辑或删除特定字段，您需要将鼠标悬停在字段标签上才能获得编辑和删除选项。

完成后，单击页面右侧的“ 发布”按钮，以保存自定义的Gutenberg块。

步骤3：建立区块范本

尽管您已在最后一步中创建了自定义WordPress块，但只有创建名为block-testimonials.php的块模板并将其上传到当前主题文件夹后，它才能起作用。

块模板文件将告诉插件如何在编辑器中显示块字段。插件将查找模板文件，然后使用它显示块内容。

如果您没有此文件，则它将显示错误消息 “找不到模板文件blocks / block-testimonials.php”。

让我们创建块的模板文件。

首先，继续在桌面上创建一个文件夹，并将其命名为blocks。您将在此文件夹中创建您的阻止模板文件，然后将其上传到当前的WordPress主题目录。

要创建模板文件，可以使用纯文本编辑器（如记事本）。

每次将新字段添加到自定义块时，都需要将以下PHP代码添加到块模板文件中：

<?php block_field( 'add-your-field-name-here'); ?>

只需记住用此处的字段名称替换add-your-field-name-here即可。

例如，我们第一个字段的名称是reviewer-image，因此我们将以下行添加到模板文件中：

<?php block_field( 'reviewer-image'); ?>

很简单，不是吗？让我们对其余字段做同样的事情：

<?php block_field( 'reviewer-image'); ?><?php block_field( 'reviewer-name'); ?><?php block_field( 'testimonial-text'); ?>

接下来，我们将一些HTML标记添加到上面的代码中以进行样式设置。

例如，您可以将审阅者图像包装在img标签中以显示图像。否则，WordPress将显示您不想要的图像URL，对吗？

您还可以将类名添加到HTML标记中，并将代码包装在div容器中以设置块内容的样式（我们将在下一步中进行此操作）。

因此，这是块模板的最终代码：

<div class="testimonial-block clearfix"> <div class="testimonial-image"> <img src ="<?php block_field( 'reviewer-image' ); ?>"> </div> <div class="testimonial-box"> <h4><?php block_field( 'reviewer-name'); ?></h4> <p><?php block_field( 'testimonial-text'); ?></p> </div></div>

最后，将文件命名为block-testimonials.php并将其保存在blocks文件夹中。

第4步：设置自定义块的样式

要设置自定义块的样式吗？您可以在CSS的帮助下做到这一点。

打开一个纯文本编辑器（如记事本），然后添加以下代码：

.testimonial-block {    width: 100%;    margin-bottom: 25px;}
.testimonial-image {    float: left;    width: 25%;    padding-right: 15px;}
.testimonial-box {    float: left;    width: 75%;}
.clearfix::after {    content: "";    clear: both;    display: table;}