如何在 WordPress 中创建自定义古腾堡块(简单方法)

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

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

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

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

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

Creating a custom WordPress block for Gutenberg

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

第 1 步:开始

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

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

Block Lab WordPress Plugin

要安装插件,您可以按照我们关于如何安装 WordPress 插件的初学者指南进行操作.

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

第 2 步:创建一个新块

为了本教程,我们将构建一个"推荐"块.

首先,前往Block Lab »从管理面板的左侧边栏中添加新.

在此页面上,您需要为您的区块命名.您可以在"在此处输入块名称"文本框中输入您选择的任何名称.

Enter Custom Block Name

我们将自定义块命名为:推荐.

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

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

Custom Block Properties

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

我们将向我们的自定义推荐块添加 3 个字段:用于评论者图像的图像字段、用于评论者姓名的文本框和用于推荐文本的 textarea 字段.

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

Image Field Options

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

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

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

完成图像字段后,您可以点击关闭字段按钮.

按照上述过程,让我们通过点击 + 添加字段 按钮为我们的推荐块添加另外 2 个字段.

Final Custom Block Fields

如果您想对字段重新排序,可以通过使用每个字段标签左侧的汉堡图标拖动它们来实现.

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

完成后,点击页面右侧的发布按钮以保存您的自定义古腾堡块.

第 3 步:创建块模板

虽然您在最后一步中创建了自定义 WordPress 块,但在您创建一个名为 block-testimonials.php 的块模板并将其上传到您当前的主题文件夹之前,它不会起作用.

Create a Block Template

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

如果你没有这个文件,那么它会显示一个错误提示"模板文件块/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;
}

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

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

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

为此,您需要使用 FTP 客户端连接到您的 WordPress 站点.如需帮助,您可以查看我们的指南,了解如何使用 FTP 将文件上传到您的 WordPress 网站.

连接后,转到/wp-content/themes/文件夹.从这里您需要打开当前的主题文件夹.

Enter Theme folder using FTP

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

完成后,您可以进行最后一步来测试您的自定义块.

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

第 6 步:测试您的新区块

是时候测试我们的自定义推荐块了.您可以通过转到页面来完成此操作 » 添加新以创建新页面.

接下来,点击添加区块 (+) 图标并搜索推荐区块.找到后,单击它以将自定义块添加到您的页面编辑器.

Add Custom Block to Page Editor

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

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

仅此而已!您已成功为您的网站创建了第一个自定义 WordPress 块.

您是否知道在编辑器中使用可重复使用的块可以节省时间?查看我们的指南,了解如何在 WordPress 块编辑器中轻松创建可重复使用的块并在其他网站上使用它们.

您可能还想查看我们的指南,了解如何在不编写任何代码的情况下创建自定义 WordPress 主题.

1
订阅评论
提醒
0 评论
内联反馈
查看所有评论