Generic filters
Exact matches only
Search in title
Search in content
Search in excerpt

页面

教程分类

WordPress高级AJAX搜索插件JetSearch使用教程,产品分类条件筛选实时搜索插件

Generic filters
Exact matches only
Search in title
Search in content
Search in excerpt
WordPress高级AJAX搜索插件JetSearch使用教程,产品分类条件筛选实时搜索插件
本篇文章分享WordPress高级AJAX搜索插件JetSearch使用教程,Jet Search提供快速、动态的搜索体验,允许用户在不刷新页面的情况下实时获取搜索结果,还能根据设定的条件进行筛选搜索,提升用户体验。
文章目录

本篇文章共 3148 字,预计阅读时间 13 分钟

AJAX实时搜索插件JetSearch使用教程

JetSearch是由Crocoblock开发一款Ajax实时搜索插件。

JetSearch的主要特点:

  1. Ajax 实时搜索 – 通过即时搜索技术,用户输入关键词后,结果会即时显示,无需等待页面刷新。
  2. 高度可定制 – 可自定义搜索栏的外观、样式和布局,完美适配 Elementor 设计。
  3. 智能搜索 – 支持在特定内容类型(文章、页面、产品、自定义文章类型等)中搜索,并可以设置优先级。
  4. 支持 WooCommerce – 适用于电商网站,可快速搜索产品,提高用户体验。
  5. 关键词高亮 – 在搜索结果中高亮显示匹配的关键词,增强可读性。
  6. 多字段搜索 – 可在标题、内容、分类、标签、SKU(适用于WooCommerce)等多个字段中进行搜索。
  7. 兼容性强 – 适用于大多数 WordPress 主题

适用场景:

  • 文章博客站点:提升用户查找内容的效率。
  • WooCommerce 商城:快速搜索产品,提高转化率。

如果你对网站的搜索功能要求不高,使用Elementor自带的Search组件即可。

点击购买JetSearch插件

接下来就由Well分享JetSearch使用教程:

安装JetSearch

上传安装Wordpress插件

Wordpress后台 – 插件 – 安装新插件,点击右上角上传插件,将JetSearch插件安装包上传安装到Wordpress。

安装并启用Jet Search后,通过菜单栏“Crocoblock – JetPlugins Settings”打开JetSearch的默认设置:

JetSearch默认设置

可以在默认设置里添加Suggestions(搜索建议)。

Ajax Search Settings里设置JetSearch的默认功能,这一可以不做设置,使用JetSearch时单独设置即可。

用JetSearch做全局产品搜索

首先,使用Elementor打开需要添加Ajax实时搜索的页面或者模板,Well准备把JetSearch搜素框添加到网站Header(页眉)区域:

网站页眉添加JetSearch

如果你还没有创建网站Header,请参考使用Elementor创建页眉页脚

在元素搜索框中输入“Search”,将Ajax Search(这就是JetSearch生成的Elementor小部件)小部件添加到指定的区域。

接下来设置JetSearch小部件:

Search Form设置

JetSearch Search Form设置

Input Icon: 就是搜索框最左侧显示的图标,可以上传SVG图片或者是在Elementor图标库里选。

Clear Text Button Icon: 清楚搜索内容的图标,用默认的就行,是个 “ X ”。

Placeholder Text: 搜索框里的提示语,如果你的搜索框是用来搜索产品的,可以写类似“Search Product”的文字。

Minimal Quantity of Symbols For Search: 搜索时最少要输入的字符,如果填“2”,最少要输入两个字符才启动实时搜索。

Allow Search by Empty String: 不建议开启。

Disable Submit on Enter: 如果你想实时搜索,不想用户通过回车键提交跳转到搜索结果页(结合下面禁用搜索按钮),就开启。

Show Submit Button: 是否显示搜索按钮,Well选择不显示,结合关闭回车键搜索,只实现实时搜索,不让用户跳转页面,集中精力,利于转化。

Show Categories List: 如果你网站产品多的话还是开启好一些,在分类条件的筛选下,用户能更容易找到产品。

Select Placeholder: 分类的提示词。

Responsive Form on Mobile:开启。

Search Query设置

JetSearch Search Query设置
JetSearch Search Query设置

Search by the current query: 会自动限定搜索范围在当前查询下。如果你添加的是一个全局搜索框就不开启,如果你是想在文章分类或者产品分类下添加该搜索框,可以开启。

Custom Search Result URL: 不用填写。

Source: 想要搜索的范围,可以添加单个或者多个范围。

Include,Exclude: 需要包含或排除的内容。

Search in custom fields: 搜索一些自定义字段,比如价格、属性。

Sentence Search: 句子搜索可以让搜索更精准,不只是简单的分词搜索。

Search in taxonomy terms: 决定搜索的时候是否也检索分类名称,如果搜索词匹配到某个分类,即使里面的产品没有匹配到也会列出来。

Results Order By: 搜索结果的顺序,默认按照相关性排序。

Results Order: ASC是升序,DESC是降序。

Use Product Catalog Visibility Settings: 开启,会遵循WooCommerce产品可见性原则展示产品,搜索结果不会显示当前用户不能看的产品。

Posts Per Page: 搜索结果每页显示多少条。

Posts Number: 最多显示多少个搜索结果。

Results Area设置

- Well建站 | 唯二建站
- Well建站 | 唯二建站

Results Area Width: 搜索结果区域的宽度,建议选择和搜索框一样宽(by Search Form)。

Columns Number: 列数,1列。

Highlight Searched Text: 高亮显示搜索结果,开启。

Show Post Thumbnail: 显示搜索结果的缩略图,开启。

Thumbnail Size: Thumbnail。

Thumbnail Placeholder: 缩略图占位符,如果搜结果没有特色图,会显示设置的占位符图片。

Post Content Source: Post Excerpt。

Post Content Length: 30。

Show Product Price: 开启。

Show Product Rating: 不开启。

Show Add to Cart Button: 开启。

Show Results Counter: 开启。

Results Counter Text: Results。

Show All Results Button: 不开启,避免用户点击后跳转页面。

Open Results In New Tab: 不开启。

Bullet Pagination, Number Pagination, Navigation Arrows: Show in Header。

Navigation Arrow Type: Angle。

样式设置

JetSearch AJAX Search小部件样式设置

这个小部件的样式设置比较精细,可以控制到每个部分的样式,根据网站风格和个人需求调整即可。

效果展示:

JetSearch效果展示

以上就是JetSearch使用教程的全部内容,网站使用实时搜索可以提升网站的用户体验和用户专注度,增强网站转化。

点击了解更多Wordpress插件使用教程

: ) 文章内容均为原创,转载须注明出处并添加原文链接,否则视为侵权
Well企业微信
专业网站搭建,扫码直接咨询
外贸服务器推荐(Well在用的服务器)
vultr-logo
一线品牌VPS服务器,稳定、不贵、性能强
Clouvider-logo
二线品牌VPS服务器,稳定、便宜、性能强
文章标签
文章推荐
文章目录

建站遇到问题?

联系我们获得:免费技术咨询 / 付费技术支持
联系我们获得免费技术咨询 、 付费技术支持
相关文章
没有账号? 忘记密码?