如何使用可视化编辑器在 WordPress 中创建小部件

您想使用 WordPress 可视化编辑器轻松为您的网站创建小部件吗?

可视化编辑器允许您轻松设置文本格式、添加链接、图像和列表,而无需编写 HTML 代码。这允许您在 WordPress 侧边栏小部件中添加富文本。

在本文中,我们将向您展示如何使用可视化编辑器在 WordPress 中创建小部件。我们还将向您展示如何创建和保存小部件块,然后在任何主题和小部件区域中重复使用它们。

如何使用可视化编辑器在 WordPress 中创建小部件

为什么使用可视化编辑器在 WordPress 中创建小部件?

小部件提供了一种将非内容相关项目添加到您的网站的简单方法。就像关于部分、最近的帖子、电子邮件通讯注册表单、广告横幅等。

WordPress网站构建器带有许多默认小部件,可让您轻松添加这些东西。您的 WordPress 主题负责样式,并且它在您的网站上显示小部件。

WordPress小部件

但是,有时您可能想要添加不可用作默认小部件的内容。例如,您可能希望使用格式和链接上传带有富文本的作者照片。

在这种情况下,您可以使用带有内置可视化编辑器的文本小部件。这个编辑器与默认的块编辑器有点不同。

话虽如此,让我们看看如何使用这个可视化编辑器在 WordPress 中创建带有富文本和媒体的小部件。

在默认 WordPress 文本小部件中使用可视化编辑器

首先,您将转到外观»小部件,然后将“文本”小部件拖到您的侧边栏中。

将文本小部件拖放到 WordPress 侧边栏

通过使用标准文本小部件,您可以添加富文本、图像和链接,就像使用其他所见即所得编辑器一样。

标准 WordPress 文本小部件

它有一个添加媒体的按钮和一个顶部带有格式按钮的工具栏。这为您提供了一个很好的区域来添加您想要在WordPress 侧边栏中显示的任何类型的丰富内容。

完成编辑后,不要忘记单击“保存”按钮来存储您的小部件设置。

您现在可以访问您的网站以查看您的富文本小部件的运行情况。

您网站上的标准小部件

文本小部件非常适合添加丰富的内容。但是,还有其他方法可以使用更多格式和样式选项来做同样的事情。

使用小部件内容块插件创建小部件

默认的 WordPress 文本小部件具有较少的格式选项。如果您需要更多格式选项和灵活性,那么您可以尝试这种方法。

它允许您创建丰富的内容块,然后将它们用作您网站上的小部件。

首先,您需要安装并激活Widget Content Blocks插件。这是我们关于如何安装 WordPress 插件的完整指南。

安装后,该插件会在您的 WordPress 管理侧边栏中添加一个名为 Widget Blocks 的新菜单项。转到小部件块»新小部件块以创建新的小部件块。

创建小部件块

小部件块实际上是 WordPress自定义帖子类型。因此,当您添加新的小部件块时,您使用的是旧的 WordPress 可视化编辑器,也称为经典编辑器。

您可以充分利用可视化编辑器并在内容中添加链接、图像、列表或任何您想要的内容。完成后,继续发布您的小部件块。

您现在可以将此内容块添加到侧边栏。

只需转到外观»小部件页面并将“小部件块小部件”添加到您的侧边栏。

小部件块

在小部件块下,单击下拉菜单以显示并选择您之前创建的块。保存您的更改并预览您的网站。

以下是这个新的小部件块在您的网站主侧边栏中的外观:

小部件内容块

您可以使用此小部件的另一种方法是创建多个块以在您网站上的其他小部件区域中使用。

所有顶级 WordPress 主题都在页眉、页脚、侧边栏等中带有多个小部件区域。您可以使用不同的块并创建漂亮的布局。

要查看所有小部件块,请转到小部件块 » 所有小部件块页面。

所有小部件块

制作好块后,您可以将它们中的每一个拖到主题的任何其他小部件就绪区域。在这里,我们将它们拖到页脚区域以创建自定义页脚。

除了添加我们之前创建的图像小部件外,我们还添加了链接列表和联系表格。

这是我们演示网站上的样子:

页脚小部件

进一步推进 WordPress 设计(专业提示)

如果您希望创建完全自定义的登录页面,那么最好的方法是使用SeedProd 插件。

它是WordPress 的拖放页面构建器,被超过 100 万个网站使用。

您可以使用它来创建完全自定义的页面布局,而无需编写任何代码。

我们希望本文能帮助您了解如何在 WordPress 小部件中轻松使用可视化编辑器。您可能还想查看我们关于添加自定义内容元素的最佳 Gutenberg WordPress 块插件的指南,以及我们所有网站的必备 WordPress 插件列表。