Skip to main content

WordPress实时搜索功能实现，Elementor Live Search教程

Last updated: Feb 18, 2025

WordPress实时搜索功能，Live Search

概述​

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

实时搜索（Live Search）功能的好处​

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

如何实现WordPress实时搜索功能？​

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

具体操作如下：

创建实时搜索模板​

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

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

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

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

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

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

Elementor Search元素的Live Results设置​

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

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

这样就已经设置好实时搜索功能了。

Elementor实时搜索效果预览​

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

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

提示

推荐您查看更多Elementor教程来丰富网站功能。

下载资源​

| 资源类型 | 下载链接 | 说明 | |----------|------| | WordPress插件 | WordPress 插件下载 | WordPress 插件下载，合理使用插件丰富网站功能 | | 建站服务 | 外贸建站服务 | 提供专业外贸建站服务 | | 服务器推荐 | 外贸服务器推荐 | WordPress专用VPS、虚拟主机推荐 |