如何在 WordPress 中创建动态滑块

如果您正在编译一个网站功能列表,这将使您的 WordPress 网站脱颖而出,滑块将在列表中居高不下。 但是,如果您真的想要一个令人印象深刻的自定义网站,您将需要一个具有动态内容功能的滑块。

什么是动态内容?

动态内容是根据来自网站的数据或用户行为在网页上发生变化的内容。

动态内容的对立面是静态内容。 对于静态内容,无论用户或时间如何,该网页都将保持完全相同。

您倾向于在哪里找到静态内容的一个很好的例子是登陆页面,无论谁点击它,通常都会显示完全相同的标题、描述和号召性用语。

您可以在下面看到一个下载 WordPress 的登录页面。 无论您如何到达该页面,您都会看到完全相同的信息,因为它是静态的。

WordPress 静态页面

但是,有时静态内容不起作用。 例如,如果您运行一个博客,您很可能希望最近的帖子出现在顶部。 如果内容是静态的,那么您的博客将始终在顶部显示相同的帖子。 但是,如果它是动态的,那么每次您发布新帖子时,订单都会自动(或动态)更改。

下面是 WPExplorer 博客。 每次 WPExplorer 发布新的博客文章时,它都会自动显示为左上角的最新文章。

WordPress 动态页面

还有其他示例说明您何时可能需要动态内容。 如果您经营一个销售旅游套餐的旅游网站,您将需要为您的旅游定制一个帖子类型,每个旅游都显示在自己的帖子上。

现在您可以单独设计每个旅游站,但这需要时间和精力。 如果您想更改游览布局会发生什么? 您必须单独编辑每个游览,以使它们具有相同的结构。 同样,您将为自己创造不必要的工作。

动态自定义帖子类型

最好的解决方案是创建一个 显示您的自定义帖子的模板. 在此模板上,您可以为帖子标题、图片、价格等添加动态内容。 这意味着现在当您点击每个不同的旅游帖子时,内容将会改变。 例如,关于 Semuc Champey 的旅游帖子将包含关于 Semuc Champey 的内容,而关于帝王谷的旅游帖子将……你明白了。

有哪些类型的动态滑块?

有两种类型的动态滑块可以增强您的自定义网站。

1.动态图像滑块

动态图像滑块

动态图像滑块是一种图像滑块,您可以将其添加到模板一次,并根据您单击的帖子显示来自数据库的不同图像。

例如,在健身房网站上,您的健身房可能有一个自定义帖子类型,其中包含许多健身房帖子。 在每个健身房帖子上,您都需要显示一个图片滑块,其中包含来自该健身房的图片。 因此,您点击的每个健身房帖子的图像都会有所不同。

最简单的方法是创建动态图像滑块。 无论您单击“市中心健身中心”还是“平衡健身房”,静态图像滑块都会显示相同的图像,而动态图像滑块会显示您在后端的每个帖子中添加的任何图像。

2.动态帖子内容滑块

动态帖子内容滑块

有时滑块将包含的不仅仅是图像。 事实上,您可能会在主页上遇到的许多滑块将包含与图像相关的更多信息。

例如,在健身房网站上,您可能想要创建一个包含三张图片的滑块,每张图片都显示不同的健身房。 问题是,如果您只显示图像,用户如何知道健身房的名称、会员价格和可用设施? 最简单的解决方案是添加一个滑块,其中包含基于自定义字段的动态帖子内容。

您可能想知道为什么此内容需要是动态的? 将滑块上的每张幻灯片视为一个页面。 当您转动每个滑块的“页面”时,您希望内容发生变化以显示有关不同健身房的信息。

当然,如果此内容是静态的,那么它不会改变,您只需显示相同的背景图片、帖子标题、号召性用语等。但是使用动态内容,您将确保每张幻灯片都显示来自每个健身房的信息。

创建动态滑块的最佳插件是什么?

有许多很棒的滑块插件可确保您可以包含两种类型的动态滑块,无论您的编码能力如何。

1. 工具集

工具集

信息和下载查看演示

第一个插件是用于构建自定义网站的最通用的资源之一,工具集。

Toolset 创建了 Toolset Blocks,这是一个 Gutenberg 扩展程序,专门用于使所有经验水平的 WordPress 用户可以轻松地显示自定义内容,例如滑块,以及自定义字段、设计模板、档案等等,而无需编码。

除了 PHP,您可以使用 Toolset 的一组独特的块来准备动态内容。 Toolset 的一大优势是它的功能。 除了滑块,您还可以创建许多其他重要功能,例如搜索、前端表单和地图。

2.滑块革命

滑块革命

信息和下载查看演示

如果您想要尽可能多的选项来自定义滑块,Slider Revolution 是一个出色的插件。 这些选项之一是动态滑块。

但是,虽然您能够构建动态滑块,但您无法创建您可能想要从中绘制内容的自定义字段。 您将需要选择一个包含内置自定义字段的主题,或者自己编写代码。

Slider Revolution 确实提供了 200 多个模板,因此您可以立即构建包含滑块的网站。

3.智能滑块3

智能滑块3

信息和下载查看演示

Smart Slider 3 允许您使用从包括 WordPress 帖子和页面、WooCommerce 产品和包括 Facebook 在内的社交媒体渠道在内的大量来源生成的内容创建动态滑块。

使用 Smart Slider 3 的专业版,您可以导入预定义的滑块示例,还可以从 WordPress 中的 20 个来源中进行绘制。

如何创建动态图像滑块

现在您已经了解了哪些动态滑块可以添加到您的网站以及最好的插件,我现在将向您展示如何创建它们。 对于这个例子,我将使用 Toolset 及其 Gutenberg 块。

有关详细的分步视频教程,您可以查看 Toolset 的 模板动态滑块指南.

我将免费使用工具集 健身房参考网站 并将我的动态图像滑块添加到它的健身房帖子类型。 我的每个健身房都将包含一个显示其图像的动态图像滑块。

1.使用自定义字段创建自定义帖子类型

在我们添加滑块本身之前,我们需要添加我们将在滑块中显示的信息,并构建它将出现的结构。

我们需要创建两个自定义内容——自定义帖子类型和自定义字段。

您可以在下面看到如何使用 Toolset 创建自定义帖子类型,只需添加其名称即可。

具有自定义字段的自定义帖子类型

一旦你有了你的健身房帖子类型,你接下来需要添加内容。 为此,您需要通过创建自定义字段来设置每个帖子的结构。

对于动态图像滑块,您将需要图像的自定义字段。 当然,图像滑块将包含多个图像,但自定义字段通常只存储一个数据。 那么如何添加更多呢?

使用工具集,您可以创建存储多个数据的重复自定义字段。 在这种情况下,我们将能够存储多个图像并将它们全部显示在我们的动态图像滑块上。

为了使自定义字段重复您需要做的就是在创建字段时选择相关框。 你可以在下面看到我是如何重复我的“健身房照片库”的。

自定义字段重复

如您所见,我的健身房帖子已经有许多自定义字段,包括评分、地址和营业时间。

健身房自定义字段

2. 将媒体添加到帖子

现在我们有了滑块的自定义字段,我们需要添加我们想要以图像形式显示的媒体。 为此,我们前往每个帖子并单击以添加图像,就像您添加特色图像一样。

只需单击“+”按钮即可上传图像。

将媒体添加到帖子

这些图像现在将作为动态滑块的“来源”。 这意味着每个健身房帖子都会在前端显示添加到其“健身房照片库”中的任何图像。

3.添加一个滑块

准备好自定义字段并添加内容后,您现在可以使用它们来创建动态滑块。 在创建动态滑块之前,您需要已经为您的帖子创建了一个模板。

首先,我将 Toolset 的 Image Slider 块插入到模板中。 因为我们已经将图像上传到健身房照片库,​​所以我们可以选择动态源并选择我们想要从中提取图像的自定义字段。

添加滑块并选择动态源

您的滑块将显示您上传到自定义字段的图像。

动态源滑块

您可以通过使用编辑器顶部的下拉菜单在帖子之间切换来检查滑块是否真正显示动态内容。 选择新帖子后,它将加载该帖子的内容——包括动态图像滑块。

虽然上面的示例使用了工具集,但大多数带有动态内容选项的 WordPress 滑块都以相同的方式工作。 在大多数情况下,您需要先创建内容,然后在将滑块添加到帖子、页面或模板时选择“动态”来源。

如何使用动态帖子内容创建滑块

除了图像之外,您还可以向滑块添加多个字段(包括自定义字段,例如价格、评级、按钮、摘录等)。 Toolset 还提供完整的分步视频 创建自定义滑块.

1.使用自定义字段创建自定义帖子类型

就像使用动态图像滑块一样,您需要先创建带有自定义字段的自定义帖子类型。 我将重用健身房的帖子类型。

2. 将动态源添加到滑块

但是,与动态图像滑块不同,您将使用工具集的视图块。 这允许您从数据库加载帖子并将它们显示为列表 – 包括作为滑块。

工具集的视图块

插入视图块后,使用向导为滑块设置参数。 例如,下面我添加了分页,以便用户可以在幻灯片之间切换,并且我将样式保留为未格式化。

工具集的视图块向导

您还需要选择将作为内容来源的帖子类型。

您现在已经创建了您的视图。 您可以在滑块的右侧栏上进行许多编辑。 您首先需要从左上角的块导航选项中选择查看块。

滑块动态内容块

使用为滑块设置的结构,您可以插入容器块来添加内容。 例如,您可以添加背景、图像、文本、价格、评论——几乎任何您为其添加自定义字段的东西。 插入元素时,只需选择动态源并相应地选择您的自定义字段,然后根据您的需要进行自定义(更改颜色、字体、位置等)。

3.使用你的滑块

我们现在可以保存滑块并在前端检查它。 根据您添加的内容,您应该会看到一个令人惊叹的动态内容滑块。

动态内容滑块

就像动态图像滑块一样,当涉及到动态内容滑块时,大多数 WordPress 滑块都包含类似的选项。 Toolset 提供动态内容源选择框,Slider Revolution 包括内置的动态内容模块等。在大多数情况下,您需要插入您选择的内容模块才能将动态内容添加到滑块。

立即开始构建您的动态滑块!

既然您已经看到所有经验的 WordPress 用户构建滑块是多么容易,现在是时候试一试了。 选择您的滑块插件并开始工作!

查看  成为更高效的 WordPress 开发人员的提示

类似文章