如何创建自定义 WordPress 块(简单方法)



您想为您的 WordPress 网站创建自定义 Gutenberg 块吗?

虽然 WordPress 带有许多用于创建内容的基本块,但您可能需要为您的网站提供更多自定义功能。

在本文中,我们将向您展示一种简单的方法来创建内容为您的 WordPress 网站创建自定义 Gutenberg 块。

< p>

为什么要创建自定义 WordPress 块?

WordPress 带有直观的

块编辑器

,它允许您通过添加内容和布局元素作为块。

默认情况下,WordPress 附带几个常用的块。 WordPress 插件还可以添加您可以使用的自己的块。

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

blocks plugin

适合你。

在本教程中,我们将向您展示如何创建一个完全自定义的块。

注意:本文适用于中级用户。您需要熟悉 HTML 和

CSS

才能创建自定义 Gutenberg 块。

< h4>第 1 步:开始使用您的第一个自定义块

首先,您需要安装并激活

StudioPress

,这个插件为开发者提供了简单的工具来快速为他们的项目创建自定义块。 p>

为了本教程,我们将构建一个“推荐”块。

首先,从左侧边栏转到自定义块»添加新页面您的管理面板。

p>

这将带您进入块编辑器页面。

从这里,你需要给你的区块起个名字。

右侧在页面中,您会找到块属性。

您可以在此处为您的区块选择图标、添加类别和添加关键字。

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

现在让我们在块中添加一些字段。

您可以添加不同类型的字段,例如文本、数字、

电子邮件地址

, URL, color, image 、复选框、单选按钮等等。

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

点击[+]添加字段按钮插入第一个字段。

这将为该字段打开一些选项。让我们来看看它们。

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

按照上述过程,让我们点击 [+] 添加字段 按钮。

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

p>

要编辑或删除特定字段,您需要单击字段标签并编辑右侧列中的选项。

完成后,点击页面右侧的发布按钮,保存您的自定义 Gutenberg 块。

第 2 步:创建自定义块模板

虽然您在最后一步创建了自定义 WordPress 块,但在创建块之前它不会起作用

模板

.

块模板确定了输入块的信息如何在您的网站上显示。如果您需要运行函数或对数据执行其他高级操作,您可以使用 HTML 和 CSS 甚至 PHP 代码来决定它的外观。

创建块模板有两种方法。如果您的块输出是 HTML/CSS,那么您可以使用内置的模板编辑器。

另一方面,如果您的块输出需要在后台运行一些 PHP,那么您需要手动创建一个块模板文件并将其上传到您的主题文件夹。

方法 1. 使用内置模板编辑器

在自定义块编辑屏幕上,只需切换到模板编辑器选项卡并在标记下输入您的 HTML标签。

你可以编写您的 HTML 并使用双大括号插入块字段值。

例如,我们在上面创建的示例块中使用了以下 HTML。

之后,切换到 CSS 选项卡以设置块输出标记的样式。

这是我们用于自定义块的示例 CSS。

方法2.手动上传自定义块模板

如果您需要使用PHP与自定义块字段进行交互,建议使用此方法。

您基本上需要将编辑器模板直接上传到您的主题。

首先,您需要在您的计算机上创建一个文件夹,并使用您的自定义块名称 slug 命名它。例如,我们的演示块称为 Testimonials,因此我们将创建推荐文件夹。

接下来,您需要使用纯文本编辑器创建一个名为 block.php 的文件。这是您放置块模板的 HTML / PHP 部分的地方。

这是我们用于示例的示例模板。

请注意我们如何使用 block_field() 函数从块字段中获取数据。

我们已经将块字段包装在要用于显示块的 HTML 中。我们还添加了 CSS 类,以便我们可以正确设置块的样式。

不要忘记将文件保存在您之前创建的文件夹中。

接下来,您需要使用计算机上的纯文本编辑器创建另一个文件,并将其保存为您创建的文件夹中的 block.css。

我们将使用这个文件来添加样式块显示所需的 CSS。这是我们用于此示例的示例 CSS。

不要忘记保存您的更改。

您的块模板文件夹现在将在其中包含两个模板文件。

之后,您需要将块文件夹上传到您的网站

使用 FTP 客户端

WordPress 托管

帐户的控制面板。

连接后,导航到 /wp-content/themes/your-current-theme/ 文件夹。

如果您的主题文件夹没有文件夹名称块,那么继续创建一个新目录并将其命名为块。

现在输入blocks 文件夹并将您在计算机上创建的文件夹上传到 blocks 文件夹。

就这样!您已成功为自定义块创建手动模板文件。

步骤 3. 预览您的自定义块

现在,在您可以预览 HTML/CSS 之前,您需要提供一些可以使用的测试数据显示示例输出。

在 WordPress 管理区域内编辑您的块并切换到编辑器预览选项卡。在这里,你需要输入一些虚拟数据。

< /p>

在预览之前不要忘记单击更新按钮以保存更改。

你可以现在切换到前端预览选项卡以查看您的块在前端的外观(

WordPress 网站

)。

如果一切对您来说都不错,那么您可以更新您的块以保存任何未保存的更改。

第 4 步。在 WordPress 中使用您的自定义块

您现在可以像使用任何其他块一样在 WordPress 中使用您的自定义块。

只需编辑您要使用此块的任何帖子或页面。

单击添加新块按钮并通过输入其名称或关键字来搜索您的块。

在你之后将块插入内容区域,您将看到为此自定义块创建的块字段。

你可以根据需要填写块字段。

一个当您从一个块移到另一个块时,编辑器将自动显示您的块的实时预览。

你可以现在保存您的帖子和页面并预览它以在您的网站上查看您的自定义块。

这是我们的测试网站上推荐块的外观。

我们希望这篇文章能帮助您了解如何轻松地为您的 WordPress 网站创建自定义 Gutenberg 块。

您可能还想在

如何从头开始创建自定义 WordPress 主题

,或查看我们的专家精选 必须有 WordPress 插件网站。

如果您喜欢这篇文章,请订阅我们的YouTube 频道 以获取 WordPress 视频教程。您还可以在 Twitter 上找到我们href="https://facebook.com/wpbeginner" target="_blank" rel="noreferrer noopener nofollow" title="在 Facebook">Facebook 上加入 WPBeginner 社区



No comments:

Powered by Blogger.