如何轻松自定义 WordPress 搜索结果页面
已发表: 2023-02-24自定义 WordPress 的许多部分都有很好的论据——但搜索结果页面呢? 可能有什么理由对其进行更改? 这个页面有什么不同吗?
事实上,WordPress 搜索结果页面本身并不是很有趣。 这使您有机会突出显示您希望更多人关注的文章,并使页面更有用。
在此,我诚挚地邀请您与我一起了解。 想象一下,在这篇文章的最后,我们都可以比以前更聪明。 你在吗?
为什么要自定义 WordPress 的搜索结果?
好吧,让我们从您应该考虑更改网站搜索结果页面的原因以及您可以自定义的内容开始。
搜索结果页面的目的
首先我们要弄清楚搜索结果页的作用是什么。 正如您可能猜到的那样,它应该可以帮助用户找到他们正在寻找的内容。 为此,他们可以在搜索字段中输入搜索词(希望出现在您的网站上——更多内容见下文)。
然后 WordPress 将提供搜索结果页面,其中包含它可以找到的关于该查询的所有内容。
你为什么要关心这个? 似乎 WordPress 自动涵盖了这部分,不是吗?
因为搜索结果页面会对您网站的用户体验产生很大影响,尤其是对于电子商务网站:
据 Econsultancy 称,高达 30% 的电子商务访问者使用内部站点搜索。 由于搜索者购买意向的增加,众所周知,他们的转化率比普通非网站搜索访问者高 5-6 倍。
CXL
有道理,不是吗? 想想您在网上购物时使用搜索功能的频率。 确切地! 但即使是没有电子商务功能的 WordPress 网站也可以从学习如何自定义搜索结果页面中受益。
WordPress 搜索有哪些改进之处?
在我的研究过程中,我发现了以下关于原生 WordPress 搜索功能的抱怨。
其一,直到最近,还没有非代码方式来自定义搜索结果页面的外观。 除非您熟悉 PHP、CSS 和代码编辑器,否则您只需要相信您的主题可以很好地显示它并对搜索页面的内容感到满意。
其次,本地 WordPress 搜索功能并不总是很擅长它的功能。 对于实际具有匹配项的搜索,它通常不会返回任何结果。
此外,它可能有点慢。 以旧的 PHP 方式,WordPress 搜索需要重新加载页面才能显示结果,这不是最快的处理方式。
因此,这给我们留下了以下需要改进的地方:
- 设计——我们将讨论如何控制 WordPress 搜索结果页面的外观以及显示在页面上的元素。
- 搜索结果——确保访问者在搜索页面上找到的结果相关且令人满意。
- 用户体验——提高搜索速度,使其使用起来更舒适,并向 WordPress 搜索添加一些访问者习惯于从 Google 或其他搜索引擎使用的功能。
如果你问我,乍一看听起来很有说服力。 那么,让我们言归正传。
将搜索表单添加到您的 WordPress 网站
自然地,只有在您甚至让用户有机会访问它的情况下,使用 WordPress 中的搜索结果页面才有意义。 这意味着,您在他们可以输入查询的地方提供了一个搜索表单。
为此,WordPress 提供了一个内置的搜索小部件,您可以将其放置在页面模板和模板部分中的任何位置。 如果您在每个页面上使用相同的标题,后者是一个特别好的主意。 在这种情况下,您只需编辑一次模板部分,您的更改将随处可见。
通常,将搜索表单添加到页眉、侧边栏或页脚(出现在每个页面上的元素)是个好主意。 这样,您就可以让访问者有机会从他们可能在您网站上找到的任何地方搜索他们正在寻找的内容。
如何使搜索字段显示在您的站点上取决于您使用的是块主题还是经典主题。
使用块主题和站点编辑器
如果您使用像二十二这样的块主题,您可以通过站点编辑器执行此操作。 您可以在Appearance > Editor下找到它。
在初始屏幕中,您可以编辑主页。 当您单击左上角的徽标时,您可以访问模板和模板部件菜单。
例如,假设您想将搜索表单添加到主题的默认标题中。 为此,转到Template Parts然后单击Header (Dark, small) 。
这样做会引导您进入此屏幕:
在这里,添加搜索表单非常简单,您可以通过多种方式完成。
首先,使用左上角的加号,查找“搜索”小部件,然后将其拖放到所需位置。
或者,在编辑器中创建一个空元素(例如,通过在现有元素上插入之前或之后插入),单击编辑器页面上的加号,然后查找搜索小部件或输入/search直接添加它。
这些方法中的任何一种都会使搜索表单出现在您的主题中,然后您可以借助右侧的块选项和顶部的设置栏进行自定义。
保存您的更改,它将显示在页面上。
经典主题中的相同过程
如果您的站点以经典主题运行,您可以在它提供的任何小部件区域中添加搜索小部件。 要找出存在哪些选项,请转到外观 > 小部件。
添加小部件的工作方式与站点编辑器相同。 单击左上角或其中一个小部件区域中的加号。 然后,搜索或浏览搜索小部件并将其输入到小部件区域。
如果您对自己的选择不满意,还可以在主题中添加更多小部件区域。
或者,也可以通过代码将搜索表单直接添加到您的页面模板中。 将下面的代码片段粘贴到您希望它出现的任何位置。
<?php get_search_form( true ); ?>
在这里,选择模板部分(例如页眉)也是有意义的,因此您不必为每个模板单独执行此操作。 但是请注意,您应该始终在子主题中进行这样的文件更改。
更改搜索结果页面的设计
好吧,现在您的网站上有了搜索表单,是时候自定义 WordPress 搜索结果页面的外观了,一旦有人使用它。 这个过程在很大程度上也取决于你的主题。
再次使用站点编辑器
WordPress 中搜索结果页面的外观由页面模板控制。 我们在站点编辑器中寻找的那个叫做搜索(谁会想到),您可以在前面提到的模板菜单中找到它。
单击它进入模板编辑器。
在这里,您可以进行所有想要的更改。 例如,这就是 Twenty Twenty-Two 默认的搜索结果页面的样子:
要修改它的外观,我可以做的最简单的事情之一就是用块模式交换默认的查询循环块。 之后,它最终看起来像这样:
很不一样,你不觉得吗?
通过代码自定义搜索结果页面
如果您没有使用可让您可视化自定义搜索结果页面的 WordPress 主题,您也可以使用代码来完成。 要呈现页面,主题将使用search.php
(如果存在),或者返回到index.php
(查看 WordPress 模板层次结构以了解其工作原理)。
创建子主题后,将父主题的search.php
复制到它,否则复制index.php
,将其重命名为search.php
并将其放置在子主题中。 之后,使用您最喜欢的代码编辑器打开它并根据您的需要对其进行自定义。
当然,如果你使用的是经典主题,不懂代码,也可以使用页面构建器插件。
改进 WordPress 搜索结果的插件选项
处理完搜索结果页面的设计后,就该谈谈如何自定义其内容了。 为此,我们将专注于插件选项。 首先,因为那里有几个不错的搜索结果,其次,因为通过代码自定义搜索结果超出了我们在本文中可以涵盖的范围。
1.相关性
该插件完全替代了标准的 WordPress 搜索功能,并做了以下改动:
- 按相关性而非日期对搜索结果进行排序。
- 启用模糊匹配,这意味着它还会显示与搜索查询的部分匹配。
- 支持使用 AND 和 OR 查询修饰符以及精确匹配搜索的引号。
- 当您点击搜索词时,在搜索摘录和结果中突出显示搜索词。
- 能够搜索分类法、评论、自定义字段,包括 WooCommerce SKU 和高级自定义字段内容。
- 没有结果时搜索建议(“你是说……?”)。
免费版提供更多功能,高级版提供更多功能。 请注意:Relevanssi 的索引需要大量数据库空间,因此在安装插件之前确保您的主机中有可用空间。
2. 象牙搜索
Ivory Search 的主要功能之一是它允许您创建无限的搜索表单并在任何您想要的地方显示它们。 可用位置包括站点页眉、页脚、小部件区域、导航以及可以放置短代码的任何位置。 您可以根据需要设计和自定义您的表单或使用包含的模板。 此外,您可以自定义每个搜索的确切内容。
除此之外,该插件还通过以下方式改进了您网站上的搜索功能:
- 通过基于索引的搜索引擎进行更快的搜索。
- 搜索图像、文件和附件、简码内容、WooCommerce 产品等。
- 实时搜索功能。
- 搜索特定内容或从结果中排除内容。
- 在搜索分析中跟踪您网站上的搜索。
- 多语言搜索。
提供具有附加功能的高级版本。
3. 更好的搜索
这个插件也取代了默认的 WordPress 搜索。 它根据您的帖子、页面和自定义帖子类型的标题和内容生成结果。 您还可以控制插件搜索的位置,包括元字段、作者、分类法,甚至评论。
此外,Better Search 按相关性显示结果,并允许您自定义搜索输出、为标题或内容分配更大的权重,并提供其他过滤器和操作。 最后,您可以以小部件的形式显示最流行的搜索内容,并使用您自己的模板和自定义 CSS 自定义搜索结果。
4.付费搜索插件
除了上述插件外,还有一些付费优惠:
- WP Fastest Site Search — 尽管在 WordPress 目录中,这实际上是一个付费插件,有 14 天的试用期。 唯一免费的部分是语音搜索功能,这对移动设备很有用。 除此之外,它还提供无代码 UI 自定义、PDF 和图像搜索、同义词和自动完成等功能。
- SearchWP — 根据找到的位置对结果进行排序。 该插件可以搜索自定义字段、电子商务产品和详细信息、类别、标签和其他分类法、您网站上文档的内容(例如 PDF、docx)等等。 您可以调整赋予不同搜索属性的重要性并排除分类法。 同一家公司还免费增强了实时搜索功能。
- YITH WooCommerce AJAX 搜索——专门用于改进 WooCommerce 网站上的搜索。 允许在特定类别内按供应商或 SKU 进行搜索。 它可以在搜索结果中显示价格,并提供不同的搜索表单布局,包括全屏。
5.其他搜索插件
最后,这里有一些插件对 WordPress 搜索功能进行了较小的更改:
- Search & Filter — 一个免费插件,允许搜索者通过选择要搜索的类别、标签或帖子类型来优化搜索。它还在搜索页面的顶部显示搜索词。 这样,即使搜索结果为空,用户也可以确定搜索已完成。
- Highlight Search Terms — 一个小巧轻便的插件,只做一件事:在搜索结果中以及点击后找到的页面上突出显示搜索词。 它也与 BuddyPress/bbPress 兼容。
最后的想法:WordPress 搜索结果
这就是您可能想要自定义 WordPress 搜索结果页面的原因以及如何进行的原因。 我,一方面,感觉有点聪明,你呢? 我希望您使用以上信息来改进 WordPress 网站的这一重要部分。
您知道自定义 WordPress 搜索结果页面的其他方法吗? 还有什么要补充的吗? 让我们在评论中知道!