您想为WordPress网站创建自定义Gutenberg块吗?WordPress 5.0更新后,您需要使用块在新的WordPress块编辑器中创建内容。

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

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

如果您正在寻找一个简单的解决方案来为您的WordPress网站创建自定义Gutenberg块,那么您就是在正确的位置。

在这个分步教程中,我们将向您展示为Gutenberg创建自定义WordPress块的简便方法。

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

第1步:开始使用

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

这是一个WordPress插件,允许您从管理面板创建自定义块,没有太多麻烦。

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

第2步:创建一个新块

为了本教程的目的,我们将构建一个Block Lab“ testimonials ”块。

首先,从管理面板的左侧边栏转到»Add New

在此页面上,您需要为块指定名称。您可以在“在此输入块名称”文本框中写下您选择的任何名称。

我们将命名我们的自定义块: testimonials 。

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

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

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

我们将在我们的自定义 testimonials 块中添加3个字段:审阅者图像的图像字段,审阅者姓名的文本框以及推荐文本的textarea字段。

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

这将为该领域开辟一些选择。我们来看看他们每个人。

  • 字段标签:您可以使用您选择的任何名称作为字段标签。让我们将第一个字段命名为Reviewer Image。
  • 字段名称:将根据字段标签自动生成字段名称。我们将在下一步中使用此字段名称,因此请确保它对每个字段都是唯一的。
  • 字段类型:您可以在此处选择字段类型。我们希望我们的第一个字段是图像,因此我们将从下拉菜单中选择图像
  • 字段位置:您可以决定是否要将字段添加到编辑器或检查器。
  • 帮助文本:您可以添加一些文本来描述该字段。如果您要创建此块供个人使用,则不需要这样做。

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

完成图像字段后,可以单击“ 关闭字段”按钮。

按照上述过程,让我们通过单击+添加字段按钮为我们的推荐块添加2个其他字段。

如果您想重新排序字段,则可以使用每个字段标签左侧的汉堡图标拖动它们。

要编辑或删除特定字段,您需要将鼠标悬停在字段标签上以获取编辑和删除选项。

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

第3步:创建一个块模板

虽然您已在最后一步中创建了自定义WordPress块,但在创建名为block-testimonials.php的块模板并将其上载到当前主题文件夹之前,它将无法工作。

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

如果您没有此文件,则会显示错误消息 “未找到模板文件块/ block-testimonials.php”。

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

首先,继续在桌面上创建一个文件夹,并将其命名为。您将在此文件夹中创建块模板文件,然后将其上载到当前的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;
}

完成后,将文件命名为block-testimonials.css并将其保存在blocks文件夹中。

步骤5:将块模板文件上载到主题文件夹

现在让我们将包含我们的自定义块模板文件的文件夹上传到我们的WordPress主题文件夹。

上传到/ wp-content / themes /文件夹。从这里你需要打开你当前的主题文件夹。

现在将包含块模板文件和CSS文件的文件夹上传到主题目录。

完成后,您可以继续执行最后一步以测试自定义块。

注意:Block Lab插件允许您创建特定于主题的块。如果更改WordPress主题,则需要将blocks文件夹复制到新主题目录。

第6步:测试你的新区块

是时候测试我们的自定义 testimonials 块了。您可以通过转到页面 » 添加新建以创建新页面来执行此操作。

接下来,单击Add Block(+)图标并搜索Testimonials块。找到后,单击它将自定义块添加到页面编辑器。

您现在可以使用自定义块向此页面添加 testimonials 。要添加更多 testimonials ,您可以随时插入新的 testimonials 块。

完成后,您可以预览或发布页面以检查其是否正常工作。

就这样!您已成功为您的网站创建了第一个自定义WordPress块。

Block Lab插件下载地址 https://wordpress.org/plugins/block-lab/

2014-01-20 更新至 1.1

  • 修复首页使用静态页面无法分页的BUG
  • 修复无法在PHP5.2版本下运行的BUG

2014-02-23 更新至 1.2

  • 修复页面无法选择自定义布局BUG
  • 修复归档页面若使用2栏及3栏布局导致排版混乱的BUG
  • 增加文章列表若没有特色图像则不显示图像

03/22/2014 – v1.3 更新

  • 添加文章社交分享功能
  • 添加分类目录特色图像功能: 若文章无特色图像则调用分类目录默认特色图像
  • 添加后台文章列表特色图像预览列
  • 修复页脚链接小工具链接地址错位问题
  • 修复侧边栏标签小工具对齐问题
  • 修复文章快速定位评论造成页面错位问题
  • 删除不必要的JS文件
  • 重新打包演示数据及说明文档(前几个版本更新忘打包了)