JetSmartFilters配合Elementor Posts使用 – 简单但好用

什么是筛选器（Filter）？

当你在使用Posts widget(Posts小部件)时，比如在“Query（查询）”栏里你可以根据类目名称选择包含什么或排除什么。在下面的截图中，就只有“plugin（插件）”类目会被包含在查询文章内。这就是“query filter（查询筛选器）”，其功能是在展示给前端访问者之前，在后台对文章进行筛选过滤。

 

JetSmartFilters拥有一些后台筛选功能，你可以在定义筛选器时使用他们，并且他们具有很强的前端特性。这些筛选器使得你可以让访问者在页面上进行交互式内容查询以找到他们想要的内容。这些后端筛选器仅会在结果中保留与你选择的查询内容相匹配的文章，并隐藏掉其他文章。

JetSmartFilters功能很全面，并支持很多类型的筛选器。在下文的图片中就是所有支持的筛选器类型。从上至下分别为：

• Checkboxes Filters（复选框筛选器）是对wordpress自带的或自定义的taxonomy（分类）（类目或标签）进行筛选的筛选器，通过它你可以选择多个筛选类目。
• Radio Filter（单选筛选器）类似于复选框筛选器，但只能选择一个筛选类目。这个同你的车载收音机的单选按钮类似，你每次只能选择一个频道。
• Indexer Filters（索引筛选器）是对一个post type(post类型)运行一个索引，并把结果储存在数据库中的筛选器。筛选的速度非常快，但你每次都需要重新运行该索引以添加类目或内容对数据库进行更新。作为对左侧的Indexer Filter的补充，我在顶部也设置了一个Indexer Filter，显示按钮“Kids’, Men’s, Women’s”。
• Check Range Filter（范围选择筛选器）需针对一个filed（域）设置一组可选范围（比如1-10,11-20…）。本文中针对的是产品价格，你也可以根据需要针对其他的值。
• Rating Filter（评分筛选器）是与Rating widget(评分小组件) 挂钩的，基于评分小组件中的星星的数量进行筛选。
• Range Filter（范围筛选器）类似于范围选择筛选器，只是它有滚动条已进行范围选择。
• Select Filter（选择筛选器）是与一个taxonomy（分类）绑定的，它的选项在下拉列表中。
• Date Range Filter（日期范围筛选器）类似于范围选择筛选器。在使用该筛选器时，你需要定义日期范围。
• Color Filter（颜色筛选器）需要手动与列明颜色的taxonomy（分类）进行定义的筛选器。
• Image Filter（图片筛选器）可以进行图片筛选，而非名称筛选。也需要与一个taxonomy（分类）进行绑定。
• Search Filter（搜索筛选器）允许用户通过输入需要搜索的值进行常规搜索。
• Checkboxes Filter（复选框筛选器）类似于Radio Filter（单选筛选器），但使用的是复选框，而非单选按钮。

 

本文应用案例

本文应用目的为发布与Elementor相关的新闻。包含新插件，更新，教程等等。设置了一个Custom Post Type(自定义Post类型) 叫做“News（新闻）”,并给每一个新闻项目都添加了tags（标签）来对他们进行管理。每过几周时间，我都会搜集新闻项目添加到newsletter（新闻时讯）中。一些Elementor Posts widget（Elementor Posts小组件）是具有前端筛选器的，但本文中我使用的是“custom skin(自定义界面)”来自定义了新闻文章的编辑界面。

下图为一个Single News Item（单一新闻项目）的截图：

 

下图为Wordpress 管理员界面中新闻项目列表的截图。红色框选出了标签项。

 

我在网站的菜单“Latest New（最近的新闻）”中展示了这些项目，见下图：

 

该新闻页面中存在几个问题。可见，在页面底部，新闻文章的底部参差不齐。如果谁想要直接看文章列表，就无法实现。文章没有图片，看上去就是文字堆叠。并且，所有文章虽然都有标签，但是访问者无法进行搜索。本文使用JetSmartFilters来解决这些问题。

创建筛选器

背景

JetSmartFilters可以与Elementor Pro版的Post、Archive，以及WooCommerce小组件和类似的Crocoblock小组件配合使用。所以你可以选择与JetEngine插件一起使用，JetEngine可以创建Custom Post Types(自定义Post类型)、custom fileds(自定义域)、listing loops（列表循环）。但是，你也可以配合Elementor Pro使用。

筛选器设置分为两步，第一步是在管理员界面中定义帅选器类型，与什么taxonomy（分类）进行绑定，或你将使用什么自定义搜索值，然后在Elementor编辑器中将筛选器与Posts、Archive或WooCommerce表单进行绑定。下文就将详细介绍：

Wordpress 管理员面板中设置筛选器

点击安装并激活JetSmartFilters，会在Wordpress管理员面板中增加一个新的菜单项目。

 

点击“Add New(新建)”进入如下页面：

 

给筛选器命名，这个名字会在Elementor中使用时显示在筛选器选择列表里。Filter Label(筛选器标签)和Active Filter Label(启用时筛选器名称)在Elementor中可选择不显示。然后在Filter Type(筛选器类型)中下拉选择类型。这些类型在上文有提过。最后是一个针对“Magic Tags(磁力标签)”或变量的区域，该区域是Crocoblock（JetSmartFillters提供平台）用来告诉JetSmartFilters筛选什么东西的。这些变量并不局限于我们将使用的taxonomy（分类）。注意，选取其他筛选器可能会有更多内容。

下面将使用一列复选框筛选器。Indexer Filter（索引筛选器）的按钮看起来很美观，但一定要记得每次添加内容后都要重新运行索引流程。这对于本文来说没必要，因为我们只需要定期添加新闻。选择taxonomy（分类）“产品”。本文没使用JetEngine，且taxonomy不存在值的继承性。下面是填写完成的页面截图：

保存然后回到News Archive模板中（上面有展示过）。

Elementor中编辑News Archive

下图为Elementor编辑器中的News Archive截图。使用的是Post widget来展示News项目。

下滑左侧小组件列表直到找到JetSmartFilters组件（也可以在搜索框中输入名称进行搜索）。里面一共有13个小组件。如图，其中多数都和具体类型的筛选器有关，但也有一个是“Apply Button（应用按钮）”，一个是“Remove Filters Button（移除筛选器按钮）”以及一个“Pagnation（分页）”。

 

选取的组件必须与之前定义的筛选器类型相匹配。把对应的Chenckboxes（复选框）组件拖拽到需要展示的section（块）里。

在组件设置区域，在“Select widget（选择组件）”下拉栏里选择与需要的筛选器匹配的组件类型。你可以选择是使用AJAX还是手动刷新页面。如果不想自动刷新页面你也可以选择添加Apply button（应用按钮）。

你必须告诉Crocoblock你要用筛选器筛选哪种类型的Posts/Archive组件。在下拉单例，本文选择的是Elementor Pro Posts.

然后就会显示添加“jet-smart-filters”到Posts组件的Query ID里的提示。我们稍后再做。现在需要到Style（风格）栏里选择horizontally（水平）显示复选框项目而非竖直。

看起来好多了。

回到筛选器的Style（风格）栏里，在checkboxes之间设置一定的间距，还可以设置一些其他小细节。

在设置筛选器的设置时，Post表单可能会消失。因为我们还没有为Posts组件设置query ID（查询ID）。那接下来就添加上。如果因为Post组件不可见了，无法选取到，那你可以到左下侧Navigator（导航器）里去锁定。

接下来还需要做一件事。系统默认使用的是Posts组件自带的pagnation（分页），但现在使用了筛选器，所以需要使用JetSmartFilters的Pagnation（分页）组件。

拖拽JetSmartFilter的分页组件到Posts组件的底部，在Control(控制)和Pagnation Option（分页选项）里进行设置。

前面我们把Query ID（查询ID）加到了Posts的设置里。现在进到Style（风格）栏里进行设置。下图就是现在的样子：

保存并查看反馈的结果。

最终结果

返回的结果很漂亮。下图是没启用筛选器时的页面：

下图是筛选“Tutorial（教程）”后的页面。注意，底部的页面数根据筛选器的筛选发生了变化。

总结

通常前端筛选器是和listing（表单）组件绑定的。但JetSmartFilters并不是与表单组件绑定的，而是分开的。因此，它既可以和Crocoblock套件配合使用也可以和Elementor Pro的表单配合使用。

该插件有很多种类的筛选器，几乎包含了你能想到的所有类型。很多人想配合WooCommerce使用筛选器，但在本文案例中，只涉及到News（新闻）archive。

设置筛选器一共所需两步：一是在Wordpress管理员面板中，另一步是在Elementor编辑器中，所以有的人可能会被弄晕。但是一旦你理解了JetSmartFilters的工作原理，就不会迷惑了。在Crocoblock官网上有很多支持文档。

JetSmartFilters解决了本文案例的问题。非常简单且适用面广。