WordPress使用Elementor制作搜索结果页面

搜索功能作为网站的重要功能,能够帮助访客快速找到所需的信息。但是我们WordPress中默认的搜索结果页面往往缺乏个性化,无法充分展示网站的独特风格和内容。

然而,借助Elementor Pro的Template功能,我们可以轻松打造自定义的搜索结果页面,不仅提升用户体验,还能增强网站的整体视觉效果。

在开始本Elementor教程之前,你需要安装Elementor Pro专业版。

使用Elementor Pro创建模板

我们通过Templates > Add New创建一个新的Elementor模板

从下拉框中选择Search Result模板,然后给这个模板起一个名字。点击“Create Template”按钮。

然后Elementor会带我们进入到模板库,我们从中选择自己喜欢的搜索结果页面模板。

如果你想自己搭建搜索结果页面或者在模板的基础上修改,那么只需要对Elementor容器对应的Archive小部件做对应的更改即可。

Elementor容器和布局的教程可以看这里

搜索结果页面中我们用到的Archive小部件主要有两个:

  • Archive Title
  • Archive Posts

这两个小部件是专门用于Archive页面的,搜索结果页面也属于一种Archive页面(归档页面)。包括我们WordPress的分类页面也是一种归档页面。

我们使用了这两个小部件,那么里面的内容就会根据我们的归档类目的Title归档类目的内容来决定。

设置Archive Title

Archive Title的“Content”选项卡里面的设置保持默认即可。

设置Archive Posts

这边我们可以调整Archive Posts分几列展示(Columns)、图片的展示位置(Image Position)和大小(Image Ratio、Image Width)、是否展示摘要(Excerpt)等。我们按需调整即可。“Style”选项卡里面可以让我们对这些选项进行样式的设置。

添加其他小部件

除了以上两个必要的Archive小部件,你也可以发挥自己的想法跟创造力,来优化你的搜索结果页面。

设置展示条件

我们调整好搜索结果页面的展示信息和样式以后,点击Elementor顶部栏Publish按钮右边的下箭头,点击“Display Conditions”按钮

然后我们选择设置在“Search Result”中展示。点击“Save & Close”按钮

然后点击Publish发布该搜索结果页面模板即可。

我们在网站的搜索框输入对应搜索字词,点击搜索或按回车键,然后就能够看到我们刚刚设置的搜索结果页面了。

Scroll to Top

Let's have a chat