实现WordPress实时搜索功能,Elementor Live Search

WordPress实时搜索功能,Live Search
使用Elementor的Search元素,开启Live Results功能就可以实现WordPress实时搜索功能,跟随本篇教程一起操作吧!
文章目录

本篇文章共 745 字,预计阅读时间 3 分钟

实时搜索(Live Search)功能的好处

用户在使用搜索功能的时候不需要跳转页面,输入关键词就会直接加载搜索结果,可以很大程度提升用户体验,间接影响网站转化率。

如何实现WordPress实时搜索功能?

Elementor的搜索小组件就有这个功能,只需要开启并选择模板即可使用。

具体操作如下:

创建实时搜索模板

1 10 - Well建站

在WP后台点击 模板 – Theme Builder – Loop Item,创建一个Loop模板。

2 9 - Well建站

在Loop模板编辑页面内,左侧放置一张图片元素,右侧放置标题元素并调整好样式。

图片动态标签

图片元素设置动态标签:Featured Image。

标题动态标签

标题元素设置动态标签:Post Title。

最后再分别为标题和图片元素添加链接:

设置自定义连接动态标签 Post URL

链接选择自定义URL,点击动态标签,选择Post URL,这样用户在点击搜索结果后就能直接跳转到对应的内容页面。

Loop模版编辑完成后记得保存。

Elementor Search元素的Live Results设置

打开或者新建一个需要用到搜索元素的页面。

开启Search小组件的Live Results功能并选择模板

  1. 添加Elementor Search元素到该页面指定位置。
  2. 开启Search元素的Live Results。
  3. 选择我们刚刚创建好的Loop模板。
  4. 设置下方的最小搜索字符3,搜索结果显示列数1,最多显示6条结果。
  5. 最后保存页面。
这样就已经设置好实时搜索功能了。

Elementor实时搜索效果预览

实时搜索效果展示

在前端打开指定页面,在我们设置好的搜索框内输入搜索字符就会自动下拉显示出搜索结果。

学会了Elementor Search的用法后还可以结合Elementor Popup一起使用,比如点击搜索图标弹出实时搜索界面。

推荐你看更多Elementor教程

: ) 文章内容均为原创,转载须注明出处并添加原文链接,否则视为侵权
B2B外贸建站服务 - well建站
Well提供外贸建站服务,高性价比、不玩套路、终身售后。
文章标签
文章推荐
文章目录
相关文章