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

技术教程 2021年11月6日

2154 0 1

VPS1352主机测评网(www.vps1352.com)
本文链接：https://www.vps1352.com/7170.html

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

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

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

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

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

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

第 1 步:开始

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

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

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

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

第 2 步:创建一个新块

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

第 3 步:创建块模板

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

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

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