Divi 插件亮点：Divi Ajax 过滤器

Divi Ajax Filter 是一个第三方插件，它向 Divi Builder 添加了几个新模块。 这些模块协同工作以创建简单或复杂的过滤器。 Divi Ajax Filter 适用于页面、帖子、项目和自定义帖子类型，例如 WooCommerce 产品和高级自定义字段。 在这篇文章中，我们将研究 Divi Ajax Filter 并了解它如何工作以帮助您确定这是否是满足您需求的正确产品。 我们将使用 Divi 威士忌布局包来展示如何在野外使用此插件。

Divi Ajax 过滤器模块

Divi Ajax Filter 向 Divi Builder 添加了一个块。 单击此按钮可打开包含 Ajax 过滤器模块的子菜单。 这些模块协同工作，生成带有过滤器的帖子列表。 您可以使用它们来创建布局或显示您创建的布局。

存档循环 - Divi Ajax 过滤器

存档循环模块显示您选择用于显示产品或帖子的任何循环布局。 换句话说，它会显示您选择的自定义帖子类型的列表。 如果您选择产品帖子类型，它将显示您的产品列表。 它不能用于自定义循环布局。 它旨在与档案、类别页面和一般页面一起使用。

在您创建并指定循环布局之前，您会看到一条消息，要求您创建一个循环布局。 循环布局应该使用 Divi Ajax 模块创建，例如帖子标题和缩略图。 您还可以选择默认的 WooCommerce 循环。

模块选项

您还可以选择帖子类型，例如帖子、页面、媒体、项目和产品。 让它自动检测您的帖子类型或将可变产品设置为单一产品。

对于循环样式，请在 WooCommerce 布局或自定义布局之间进行选择。 如果您选择自定义布局，您将看到另一个下拉框，您可以在其中从 Divi 库中选择布局。

选择要显示的帖子数。 这使您可以控制显示在模块区域内的数字，但您可以通过分页显示更多帖子和加载更多按钮。 将其设置为主循环使其成为过滤器控件的帖子列表。 您还可以通过排序选项添加订单并显示结果数。

结果数在 Divi Builder 中仍然显示 1-9 个结果，但它将在前端显示正确的结果数，如下例所示。

分页的显示方式有多种选择。 从加载更多、标准分页、无限滚动或无中选择。

在 ajax 更新或禁用该功能后让它滚动到顶部。 您还可以微调分页的位置。

当类别有子类别、特定类别和产品时，禁用、排除或包含许多元素，例如产品。 您还可以将某些项目设置为仅在加载时包含。 用逗号将它们输入到字段中。

选择过滤器的动画和无限滚动选项。 它有六种动画可供选择，包括垂直三行、水平三行、三点弹跳、甜甜圈、甜甜圈倍数和波纹。 动画很流畅，给它额外的闪光。

自定义布局选项

Custom Layout Options 允许您选择您创建的布局以用作您的自定义分类。 您还可以指定要包含的自定义分类法。

默认布局选项

默认布局选项允许您在网格或经典博客布局之间进行选择。 对于网格，选择要显示的列数。 您还可以显示评级、摘录、价格和添加到购物车按钮。

这是它在前端的样子。 我已将其设置为显示 4 列的网格。 我还禁用了摘录选项。

这一个还包括颜色和填充选项。 更改销售徽章、星级和产品背景的颜色。 使用滑块向产品的所有四个侧面添加填充。 我添加了一些填充，给星星上色，并更改了销售徽章的颜色。

这是它在前端的样子。

设计设定

设计设置包括每个元素的详细选项，包括字体、颜色、间距和其他标准 Divi 设置。

过滤帖子 – Divi Ajax 过滤器

过滤帖子模块与存档循环模块一起过滤它显示的帖子。 它不应在自定义循环布局中使用。 过滤器项是子模块。 您可以添加任意数量的过滤器来创建过滤器。

新过滤项目

添加新的过滤器项会打开其子模块。 这包括很多设置。 主要设置让您可以选择在类别、标签、价格、评级、属性和自定义分类法之间过滤的内容。 您还可以创建一个搜索框。 选择帖子类型、值、排除选项等。

布局允许您选择显示过滤器参数、显示标签和选择过滤器宽度。

Select 选项允许您启用 Select2 并更改选项文本。

Category、Tags 和 Taxonomy 允许您选择术语在列表中的排序方式、显示模式、前缀和折叠选项。

范围使您可以完全控制过滤器的范围设置。 隐藏标签、选择值类型、设置范围、选择步进级别、调整外观、选择文本前后等等。

条件逻辑允许您为过滤器创建逻辑规则。 这意味着您可以微调过滤器以控制过滤器并使其尽可能智能。

添加多个过滤器项目以创建您想要的确切过滤器。 我创建了一个带有搜索选项、类别、标签和价格的过滤器。 用户可以选择其中一种过滤工具，也可以一起使用。

主过滤器帖子设置

主要选项包括过滤器更新类型（从单击按钮或更改字段中选择）、选择滚动位置、为搜索和重置按钮添加文本以及启用 Select2。

布局选项确定过滤器元素的布局。 选择侧列或全宽列，设置大小，切换和滑动之间的过滤器样式，以及隐藏或显示按钮。

移动选项添加切换，让您选择切换样式，更改按钮文本，并单独切换过滤器。

帖子标题 - 存档页面

帖子标题模块显示标题并允许您选择标题级别、链接到单个页面、打开新选项卡并输入 URL。

“设计”选项卡包括帖子标题和产品标题的单独设置。 包括所有标准设置。

缩略图 – Divi Ajax 过滤器

缩略图模块允许您选择图像大小、将图像链接到单个页面、使用具有高级自定义字段的占位符图像、在新选项卡中打开、启用标题标签以及选择图像样式。

Thumbnail Image Sizes 包括很多选项。

构建产品过滤器

首先，我将使用 Archive Loop 模块和 Filter Posts 模块构建一个产品过滤器。

接下来，对于 Archive Loop Module，我将其设置为 Products 并选择了默认的 WooCommerce 布局。 默认情况下，这会为我们提供图像、标题和价格。 我已将其设置为主循环并启用了“按菜单排序”和“结果计数”。 我为加载选项选择了加载更多。 布局设置为具有 3 列的网格。 我还选择了显示评级、价格、摘录和添加到购物车按钮。 销售徽章和星级评定有自定义颜色，我在产品中添加了一些填充。

接下来是设计设置。 我已经调整了各个文本元素的颜色和样式以及“添加到购物车”按钮。

最后，对于过滤器，我添加了搜索、类别、价格和评级。 对于类别过滤器，我选择了单选按钮。 价格设置在 5 美元到 100 美元之间。

对于过滤器的设计设置，我调整了字体颜色、按钮颜色等。

产品筛选结果

这是 Divi 威士忌布局包样式在前端的外观。

这是排序功能。 用户可以选择默认排序，按受欢迎程度、平均评分、最新、价格从低到高或价格从高到低排序。

以下是搜索选项的结果。 我正在使用 WooCommerce 演示产品。 我搜索“粉红色”并找到了两个结果。

对于类别，我选择了“厨房”类别单选按钮并找到了四个结果。

在此示例中，我按价格范围过滤了产品。 我选择了 5-30 并按价格从低到高排序。

您也可以一起使用过滤器。 对于此示例，我选择了“厨房”类别并将价格范围设置为 30 美元到 50 美元。 它显示了我库存中该类别和价格范围内的产品。

在哪里购买 Divi Ajax 过滤器

Divi Ajax Filter 在 Divi Marketplace 有售，售价 97 美元。 它包括一年的支持和更新以及 30 天退款保证。

结束的想法

这就是我们对 Divi Ajax Filter 的看法。 这是 Divi Builder 的一组功能强大的模块，可为许多 WordPress 帖子类型创建惊人的过滤器。 Divi Ajax Filter 很复杂。 学习确实需要一些时间，但一旦开始，理解和使用并不难。 遵循演示将为您节省一些时间并大大减少学习曲线。 如果您对帖子类型的高级过滤器感兴趣，Divi Ajax Filter 是一个不错的选择。

我们希望听到您的意见。 你试过 Divi Ajax 过滤器吗？ 在评论中让我们知道您的想法。