如何创建自定义 WordPress 搜索表单（逐步）

已发表: 2021-11-04

您需要为您的 WordPress 网站创建自定义搜索表单吗？

搜索是大多数用户在您的网站上查找内容的方式。 如果他们不能轻易找到他们正在寻找的东西，那么他们可能会转移到另一个网站。

在本文中，我们将逐步向您展示如何通过创建自定义 WordPress 搜索表单来改进您的网站搜索。

如何创建自定义 WordPress 搜索表单（逐步）

为什么要为 WordPress 创建自定义搜索表单？

默认的 WordPress 搜索功能非常有限，并不总能找到最相关的内容。

随着您向网站添加更多内容，您将需要更好的方法来帮助网站访问者轻松找到您网站上的内容。

如果您正在经营一家在线商店或会员网站，您希望用户在其中找到合适的产品或课程，这一点就变得更加重要。

您可能还希望自定义搜索算法以显示比其他内容更高的特定内容，或自定义搜索表单的外观。

话虽如此，让我们看看如何自定义 WordPress 搜索表单和结果页面。 我们将介绍两种方法，您可以使用以下链接进行选择：

如何自定义 WordPress 搜索表单和结果

SearchWP 是 WordPress 最好的自定义搜索插件。 它易于使用，可让您完全控制搜索结果，并且比默认的 WordPress 搜索更准确。

第一步是安装 SearchWP 插件。 有关更多详细信息，请参阅我们关于如何安装 WordPress 插件的分步指南。

激活后，您需要访问设置 » SearchWP页面，然后单击“许可证”菜单选项。

输入 SearchWP 许可证密钥

然后，在“许可证”框中输入您的许可证密钥，然后单击“激活”按钮。 您可以在 SearchWP 网站上的帐户中找到此信息。

自定义搜索引擎

完成后，您需要单击“引擎”菜单选项。 到达那里后，您应该单击“添加新”按钮以创建新的搜索引擎。

搜索WP 添加新引擎

这将创建一个名为“补充”的新搜索引擎。 要更改名称，您需要单击“来源和设置”按钮。

SearchWP补充搜索引擎

这会将您带到一个页面，该页面还允许您选择是否搜索帖子、页面、媒体文件、评论和用户。 我们将保留默认设置。

我们会将搜索引擎的名称更改为“自定义”。 继续并将其输入到“引擎标签”字段中。

搜索WP引擎标签

请注意，已为您选择了“关键字词干”选项。 这将在您的用户进行搜索时忽略词尾，以便显示最相关的搜索结果。

完成后请确保单击“完成”按钮。

搜索引擎的设置页面包含帖子、页面、媒体和用户部分。 在每个部分中，您可以优先考虑不同的帖子属性，或者在搜索结果中仅包含某些类别或标签。

您可以通过调整“属性相关性”滑块来做到这一点。

这些改变了搜索引擎对内容的评价和排名方式。 例如，如果您希望帖子标题高于内容，那么您可以相应地调整滑块。

您应该完成每个部分并对您喜欢的滑块进行任何调整。

SearchWP 属性相关性滑块

您还可以为每个部分创建规则，以确定搜索结果中是否包含或排除某些内容。

例如，您可以让访问者轻松搜索与他们刚刚阅读的主题相同的内容。 或者在在线商店中，您可能会帮助您的客户快速找到同一类别的其他产品。

继续并单击“帖子”部分中的“编辑规则”按钮。

您会注意到您可以创建有关帖子类别、标签和格式、发布日期和帖子 ID 的规则。

搜索WP编辑规则

您可能希望让访问者搜索特定的网站类别。 例如，您可以向存档页面添加类别搜索功能，以帮助访问者快速找到他们正在寻找的内容。

要了解如何做到这一点，请参阅我们的分步指南中的方法 1，了解如何在 WordPress 中按类别搜索。

完成自定义默认搜索引擎设置后，请确保单击页面顶部的“保存引擎”按钮以创建自定义搜索引擎。

单击保存引擎按钮

使用简码添加搜索表单

SearchWP Shortcodes Extension 简化了将新的自定义帖子搜索表单添加到 WordPress 网站的工作。

只需访问 SearchWP Shortcodes Extension 网站，然后单击“下载可用许可证”按钮。

下载 SearchWP 简码扩展

之后，您需要以与上面安装插件相同的方式安装和激活扩展。

现在，您可以使用简码将自定义搜索表单添加到您的帖子、页面和小部件。 如果您以前没有使用过简码，那么您可以在我们的初学者指南中了解更多关于如何在 WordPress 中添加简码的信息。

只需编辑帖子并将光标放在要添加搜索表单的位置。 之后，单击加号“ + ”添加块图标以调出块菜单。

添加自定义 HTML 块

接下来，在搜索框中输入“html”，然后单击“自定义 HTML”块将其添加到帖子中。

添加新块后，应将以下短代码和 HTML 粘贴到其中。


[searchwp_search_form engine="custom" var="searchvar" button_text="Custom Search"]
  
<div class="search-results-wrapper">
 [searchwp_search_results engine="custom" var="searchvar" posts_per_page=4]
  <h2>[searchwp_search_result_link direct="true"]</h2>
  [searchwp_search_result_excerpt]
 [/searchwp_search_results]
</div>
  
<div class="no-search-results-found">
 [searchwp_search_results_none]
 No results found, please search again.
 [/searchwp_search_results_none]
</div>
  
<div class="search-results-pagination">
 [searchwp_search_results_pagination direction="prev" link_text="Previous" var="searchvar" engine="custom"]
 [searchwp_search_results_pagination direction="next" link_text="Next" var="searchvar" engine="custom"]
</div>

此代码会将您的自定义搜索表单添加到帖子中，创建一个部分来显示搜索结果，如有必要显示无结果消息，并在结果进入多个页面时添加分页。

如果您给您的搜索引擎起一个不同的名称，那么您需要在四个地方将engine=“custom”更改为您自己的引擎名称。

您还可以选择通过编辑button_text=“Custom Search”将搜索按钮上的文本更改为更具描述性的内容。 其余代码可以保持不变。

确保单击“发布”或“更新”以保存您的帖子并使其生效。

单击发布或更新以保存您的帖子

要查看实际的搜索表单，只需查看您的 WordPress 网站上的帖子。 这就是它在我们的运行二十一二十一主题的演示站点上的外观。

SearchWP 自定义搜索表单预览

添加实时 Ajax 搜索

Live Ajax 搜索通过在用户键入查询时自动提供下拉搜索结果来改进您的搜索表单。

实时搜索页面示例

将 Ajax 实时搜索添加到 WordPress 的最简单方法是免费的 SearchWP Live Ajax Lite Search 插件，因为它会自动启用实时搜索。

有关如何安装它的分步说明，请参阅我们的指南，了解如何将实时 Ajax 搜索添加到您的 WordPress 网站。

使用 SearchWP 的高级设置

现在您应该导航到设置»SearchWP ，然后单击高级选项卡。 在此页面上，您可以启用一些设置，使您的用户更容易找到他们正在寻找的内容。

搜索WP高级设置

检查您想要的任何这些选项：

  • 部分匹配也会显示与正在搜索的词不完全匹配的结果。
  • 自动“你的意思是？” 更正将建议一个稍微不同的搜索词，以匹配您网站上的更多帖子。
  • 支持“引用/短语搜索”将允许您的用户在搜索确切的短语时使用引号。
  • 在结果中突出显示术语将使您的访问者更容易在搜索结果中找到他们正在寻找的内容。

设置搜索表单和结果页面的样式

您的 WordPress 主题控制着您网站的外观，包括搜索表单和搜索结果页面。 它们将 WordPress 网站所有元素的格式规则存储在 CSS 样式表中。

您可以添加自己的自定义 CSS 来覆盖主题的样式规则。

如果您以前没有这样做过，请参阅我们关于如何在 WordPress 中为初学者添加自定义 CSS 的文章。

例如，这里有一些适用于大多数主题的自定义 CSS。 第一部分更改搜索表单的样式，第二部分自定义搜索结果。


.searchform {
font-family:arial;
font-size:16px;
background:#ace5e3;
color:#ffffff;
border:1px solid #61c3c0;
padding:10px;
height:90px;
width:600px;
}

.search-results {
font-family:arial;
font-size:16px;
background:#ace5e3;
color:#000000;
border:1px solid #61c3c0;
padding:10px;
width:600px;
}

您可以更改代码中的格式以适合您自己的站点。 您还可以删除您不想修改的任何行。 例如，如果您不想更改搜索表单的高度和宽度，则只需删除这些行。

这是我们的演示网站在添加自定义 CSS 之前和之后的屏幕截图。

SearchWP 自定义 CSS 预览

衡量搜索结果并提高转化率

设置好自定义 WordPress 搜索表单后，下一步就是衡量结果。

SearchWP 带有一个搜索指标扩展，可以准确地向您展示您的网站搜索的执行情况。

SearchWP Metrics

您还可以使用搜索指标通过将获得更多点击的结果推广到顶部来自动改进搜索结果。

电子商务网站还实施退出意图弹出窗口和游戏化的转轮活动，以吸引用户访问搜索页面，因此他们可以在不久之后转换为电子邮件订阅者和客户。

OptinMonster spin to win popup example

我们希望本教程能帮助您学习如何创建自定义 WordPress 搜索表单。 您可能还想查看我们为小型企业挑选的最佳商务电话服务的专家，以及我们对最佳域名注册商的比较。

如果您喜欢这篇文章，请订阅我们的 YouTube 频道以获取 WordPress 视频教程。 您也可以在 Twitter 和 Facebook 上找到我们。