如何在 WordPress 中构建自己的自定义搜索表单（3 种方式）

想要在 WordPress 中轻松创建自定义搜索表单而无需任何编码？

自定义搜索表单使访问者只需单击几下即可轻松搜索和过滤您的网站内容。

当用户快速找到他们正在寻找的内容时，他们更有可能在您的网站上停留更长时间。 他们也更有可能采取行动购买产品、阅读您的博客、注册新闻通讯等。

在这篇文章中，我们将向您展示如何在 WordPress 中轻松创建自定义搜索表单，以增强用户体验并提高转化率。

在此之前，让我们看看您是否真的需要为您的网站创建自定义搜索表单。

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

自定义搜索表单非常适合具有大量内容、产品、文档和常见问题解答的网站。 这是电子商务商店、在线商业目录、学校/学院网站和类似网站的必备功能。

搜索选项将帮助用户找到他们需要的东西，而无需花费几分钟甚至几个小时来寻找它。

因此，这就是您应该为您的 WordPress 网站创建自定义搜索表单的原因：

• 帮助用户浏览您的内容
• 通过更快地查找内容来节省时间
• 促进转化和销售
• 针对移动用户优化您的网站
• 降低跳出率

现在，我们将向您展示如何使用表单构建器插件在 WordPress 中创建自定义搜索表单。

如何在 WordPress 中创建自定义搜索表单

您可以使用的第一种方法是 WordPress.org 提供的默认搜索选项。 您可以启用基本的 WordPress 搜索，让您搜索网站上的页面和帖子。

这个方法虽然有点复杂。 它涉及对高度敏感的functions.php等文件进行编码和编辑。 一个错误的步骤，您可能会破坏您的网站。

您需要使用“ get_search_form() ”函数在您的站点上显示搜​​索表单。 这将帮助您在 WordPress 主题中找到 searchform.php 文件。 如果找不到，则将使用 WordPress 默认的核心搜索选项。

但是，要自定义 WordPress 搜索框，您需要在文件中添加更多代码。

如果您对编码不满意，最好使用可靠的 WordPress 搜索插件来启用站点搜索。 这正是我们将为本教程做的事情。

您会在市场上找到几个可让您自定义 WordPress 搜索表单的插件。

确保您选择的 WordPress 插件不仅可以让您创建自定义搜索，还可以添加过滤器并向访问者显示正确的结果。

我们建议使用 SearchWP，它是 WordPress 的排名第一的搜索插件，可让您搜索网站上的所有内容。 您还可以使用强大的表单来创建自定义搜索表单。 下面，我们将向您展示如何使用这 2 个插件创建自定义搜索表单。

使用 SearchWP 创建自定义搜索表单

SearchWP 是 WordPress 最好的自定义搜索插件。 它易于使用，显示准确的结果，并让您可以控制您的搜索表单。

SearchWP 真的很棒并且具有令人难以置信的高级功能，因此，它是一个高级插件。 您可以注册一个起价为每年 99 美元的计划。 尽管您不会失望，但我们提供 14 天退款保证。

这将允许您启用对所有内容的搜索。 在您的站点上搜索您的产品详细信息、自定义字段内容、简码输出、自定义数据库表格内容、跨站点多站点搜索等。

您将可以使用以下功能：

• PDF 和 Office 文档索引
• 与 Native WP Search 自动集成，无需编码！
• 多个搜索引擎
• 关键字词干
• 高级自定义字段支持
• WooCommerce 集成
• 排除或属性结果
• 搜索统计和见解
• 简单的算法定制

该插件还与 bbPress、WP Job Manager、Easy Digital Downloads 等集成。 此外，您还将获得承诺的支持和详细的文档。

我们提到的一切都只是基本计划，所以这个插件完全物有所值，每月只需 8.25 美元。 您将在高端计划中获得更多功能。

注册帐户后，您可以开始使用下面的教程。

第 1 步：激活 SearchWP

在您的 SearchWP 帐户中，您可以访问您的许可证密钥、帐户详细信息和下载。 您需要下载插件文件。 而且您还需要复制您的许可证密钥，因为您稍后会需要它。

然后，转到您的 wp-admin 面板并导航到插件»添加新»上传插件。

选择您下载到计算机的插件文件，然后单击立即安装按钮。

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

从您的 SearchWP 帐户中获取您的许可证密钥并将其粘贴到此处的许可证框中。

单击激活按钮，您就可以设置搜索引擎了。

第 2 步：自定义搜索引擎

在 wp-admin 面板的 SearchWP 选项卡中，选择“引擎”菜单选项。 进入后，单击“添加新”按钮以创建新的搜索引擎。

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

现在，您将看到一个选项来选择是否搜索帖子、页面、媒体文件、评论和用户。 推荐的设置已添加到此处，因此您可以保持原样。

为了稍后识别搜索引擎，让我们在“引擎标签”字段下将其命名为“自定义”。

在这里，您可以看到“关键字词干”选项已被选中。 这将在您的用户进行搜索时忽略词尾，以便显示最相关的搜索结果。

当您在这里准备好时，点击“完成”按钮来存储您的更改。

现在回到引擎页面，您可以在每个子标题下看到一个名为“Applicable Attribute Relevance”的部分。 这使您可以优先考虑不同的帖子属性，或者在搜索结果页面中仅包含某些类别或标签。

您所要做的就是使用滑块来调整“属性相关性”。

这将影响搜索引擎如何评估和排名您网站上的内容。 因此，例如，如果您希望 Google 更关注帖子标题而不是内容，您可以在这里赋予标题更多的重要性。

接下来，SearchWP 让您可以控制搜索结果中是否包含或排除某些内容。 为此，您可以创建规则。

这可能是为了让客户快速找到他们正在浏览的同一类别的产品。 或者允许访问者搜索与他们刚刚阅读的主题相同的内容。

要设置规则，每个部分都有一个“编辑规则”按钮。

单击此按钮时，您将看到一个弹出窗口，其中包含类别、标签、格式、发布日期和帖子 ID 的设置。

您可以在此处随意创建规则来控制搜索引擎的行为方式。

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

现在您已经成功设置了 WordPress 搜索引擎。 它已准备好添加到您的网站。

第 3 步：使用简码添加搜索表单

通常将搜索引擎添加到您的网站需要大量编码，但 SearchWP 已将其保持在最低限度。 您只需要粘贴一个短代码即可嵌入您的搜索引擎，这非常简单，即使您是初学者也很容易。

只需访问 SearchWP Shortcodes Extension，然后单击“下载扩展”按钮。

之后，您需要在您的 WordPress 网站上安装并激活扩展，就像您安装上面的插件一样。

激活后，您将能够在您的帖子、页面和小部件中添加一个简单的短代码。

您需要做的就是在块编辑器中编辑帖子并添加一个名为“自定义 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>

我们将引擎命名为“custom”，如果您选择了不同的名称，则需要在此代码片段内的四个位置将engine=“custom”更改为您自己的引擎名称。

在此代码中，按钮文本将显示为“自定义搜索”。 如果您想将搜索按钮的文本更改为更具创意的内容，您可以在第一行进行修改button_text=“Custom Search” 。

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

您可以预览帖子，您会看到搜索引擎出现。 您会在帖子中看到一个搜索字段以及 CTA 按钮。

然后发布或更新它并使自定义搜索表单生效。 如果您需要这方面的帮助，请按照我们关于如何在 WordPress 中添加短代码的简单指南进行操作。

您可以通过输入一些搜索词来测试您的自定义表单，以查看该工具返回的结果。

这样，您就学会了如何将搜索栏添加到您的 WordPress 网站。 SearchWP 是一个高级搜索插件，它的更多功能值得探索。 接下来，我们将向您展示如何增强您网站的搜索功能。

第 4 步：配置高级设置

我们希望介绍 2 个高级选项来改进您的自定义 WordPress 搜索表单。

• 添加 Live Ajax 搜索：这会在用户键入时自动添加下拉搜索结果。 它可以帮助用户更快地找到他们的查询。 SearchWP 为此在 WordPress 存储库中提供了一个免费的 Live Ajax Lite Search 插件。
• 使用 SearchWP 的高级设置：在 WordPress 菜单的设置 » SearchWP选项卡下，有一个高级选项卡。 在此页面上，您可以启用使用户更容易找到所需内容的设置。

这使您可以完全控制搜索引擎的工作方式。 接下来，我们将向您展示如何自定义搜索引擎的外观。

第 5 步：设置搜索表单和结果页面的样式

如果您对新搜索栏的显示方式不满意，可以进行更改。

您需要知道的是，您网站的主题控制着您的主页、标题、侧边栏、帖子、搜索表单和搜索结果的外观。 WordPress 主题的格式和样式存储在 CSS 样式表中。

您只需添加自己的自定义 CSS 即可更改搜索栏和结果页面的外观。

如果您以前没有这样做过，我们建议您备份您的网站。 如果事情没有按计划进行，能够恢复您的网站非常重要。 然后，您可以使用暂存站点（您的网站的克隆）先进行尝试。

以下是适用于大多数 WordPress 主题的自定义 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; }

想了解更多？ WPBeginner 有最好的指南：如何轻松地将自定义 CSS 添加到您的 WordPress 网站。

这里的所有都是它的！ 您已经使用 SearchWP 创建了一个完全可自定义的搜索表单。

接下来，我们将向您展示另一种创建自定义 WordPress 搜索表单的方法。

使用强大的表单创建自定义搜索表单

Formidable Forms 是唯一具有完全集成视图功能的 WordPress 表单构建器插件。 因此，您不仅可以收集表单数据，还可以将它们显示在您网站的前端。

使用 Views，您可以轻松地创建一个网页，直接从您的 WordPress 仪表板精美地显示用户提交的数据。 您可以使用它来显示业务目录、成员目录、列表等。

您还可以将您的视图与搜索表单联系起来，并允许您网站上的访问者搜索特定内容。

话虽如此，让我们开始教程。

第 1 步：安装并激活强大的表单插件

首先，您需要注册一个强大的表单帐户。 确保您获得包含“视图”功能的计划。

注册后，前往您的 WordPress 管理仪表板并打开插件»添加新选项卡。 搜索强大的表单插件，然后单击那里的安装按钮。

如果您在这方面需要更多帮助，可以阅读我们关于如何安装 WordPress 插件的指南。

安装并激活插件后，您将看到一个欢迎页面。 单击连接帐户按钮以连接到您的帐户并访问所有高级功能。

如果您尚未登录 Formidable Forms 帐户，则需要再次登录。

接下来，您需要在您的站点上安装Formidable Forms Pro和Visual Views插件。

您可以直接从 WordPress 仪表板上的强大选项卡安装它们，或从您的帐户下载插件文件。

现在，您已准备好使用强大的表单在 WordPress 中创建自定义搜索表单。

第 2 步：为您的搜索表单添加数据

在创建搜索表单之前，您需要为搜索结果收集数据。

要创建一个新表单，请导航到强大»表单，然后单击+ 添加新按钮。

您将看到一个弹出窗口，您可以在其中为表单选择模板。 我们将使用本教程的空白表单模板。

然后，您需要为表单添加名称和描述。

完成命名表单后，单击此处的创建按钮以启动拖放表单构建器。

在表单构建器中，您可以在页面左侧看到表单字段，在页面右侧看到表单预览。

要插入任何表单字段，您只需将它们从字段菜单拖放到表单预览中即可。

在这里，我们添加了这些字段：名字、姓氏、电子邮件和国家。 您可以根据需要添加任何字段。

要自定义任何字段，您只需单击它即可看到表单设置。 有许多选项，例如标签、必需选项、自定义 CSS 等等。

您甚至可以使用条件逻辑选项根据用户输入显示或隐藏表单字段。

添加完字段后，单击表单构建器右上角的更新按钮。

现在您需要做的就是在您的网站上发布此表单，以从您的用户或网站成员那里收集数据。

或者，您也可以从计算机导入数据文件。 为此，打开构建器顶部的条目选项卡，然后单击导入按钮。

然后，您会看到一个窗口，您可以在其中上传任何 CSV 或 XML 文件以将数据导入表单。 您可以将字段映射到文件中的数据以导入记录。

收集数据后，您需要在 WordPress 中创建自定义搜索表单，让用户在您的网站上进行搜索。

第 3 步：构建您的自定义搜索表单

要创建搜索表单，您需要按照步骤 2 中的相同说明进行操作。

转到强大»表单»添加新并选择一个空白模板。 然后，为您的自定义搜索表单命名和描述。

在此表单中，我们将添加 3 个表单字段，以让用户搜索您网站上的数据。 这些字段是名字、姓氏和国家。

您可以将文本表单字段用于名称，将搜索下拉字段用于国家/地区搜索。

在“名字”字段设置中，您需要添加默认值，以便稍后将您的搜索表单与结果视图连接起来。

为此，请在字段设置中的默认值选项上添加此短代码：

[获取参数=fname]

在这里，“fname”是我们用于连接视图的名字字段的文本。

在姓氏字段设置中，我们将添加相同的短代码：

[获取参数=lname]

这里，“lname”是我们用于连接视图的姓氏字段的文本。

在Country字段设置中，我们需要在下拉选项中添加国家名称。 确保将第一个选项留空。

如果向下滚动，您可以看到添加占位符文本的选项。 和其他两个表单字段一样，您需要在此处添加一个默认值。 插入短代码：

[获取参数=国家]

在这里，“国家”是我们用于国家/地区字段以连接视图的文本。

添加完输入类型后，您可以更改表单字段的布局。

要使它们显示在一条水平线上，请转到每个字段的 CSS Layout Classes 选项并选择 1/4 选项。

如果要自定义按钮，请导航到设置»样式和按钮选项卡并转到按钮设置。

在这里，您可以将提交按钮文本更改为Search并将按钮对齐方式选择为Inline 。 这将使您的搜索按钮与表单字段显示在同一行。

现在您已经了解了如何在 WordPress 中创建自定义搜索表单，让我们在网页上插入此表单和结果。

第 4 步：创建搜索结果视图

您需要创建一个视图以在同一页面上显示搜索结果和搜索表单。

要创建新视图，请打开Formidable » Views页面，然后单击+ Add New按钮。

然后，您可以看到让您在网格、表格、日历和经典视图类型之间进行选择的弹出窗口。

对于本教程，我们将为搜索表单结果选择网格视图。

之后，您可以看到为条目选择表单并为结果视图添加名称的选项。 确保选择在步骤 2 中创建的数据收集表单。

完成后单击创建视图按钮。

在视图构建器中，您可以在左侧看到样式选项，在右侧看到视图布局构建器。 单击开始添加内容链接以添加您的条目​​。

单击“ + ”图标开始将您的列表添加到视图中。 这将打开列表内容编辑器。

在列表页面内容编辑器中，您可以从页面右侧的自定义选项中添加表单字段。 只需单击那里的表单字段即可将它们插入到您的结果视图中。

然后，您可以设置字段键的样式以在您想要的布局中显示表单字段。

完成后，单击更新视图按钮。 现在您可以在视图页面上看到所有条目。

您需要在此页面上添加搜索表单。 为此，请单击“在内容前添加”选项

这将打开内容编辑器，您可以在其中插入您在步骤 3 中创建的自定义搜索表单。

您需要做的就是单击“强大”按钮并选择您的搜索表单以插入表单简码。

单击“更新视图”按钮以将您的自定义搜索表单添加到视图。

在下一步中，我们将向您展示如何在您的 WordPress 网站上发布结果视图。

第 5 步：发布搜索结果视图

要在您的网站上添加搜索结果视图，您需要创建一个新页面并搜索 Formidable Views 块。

添加视图后，您可以在您的站点上发布该页面。 您的页面将如下所示。

等待！ 你还没有完成。 您需要连接您的自定义搜索表单和结果视图，以让用户在您的网站上搜索内容。

第 6 步：将自定义搜索表单与视图连接

要连接您的搜索表单，请转到强大»表单并打开搜索表单的设置选项。

在这里，您可以转到On Submit选项并选择 Redirect to URL 选项。 然后，您需要将链接添加到您在第 5 步中创建的视图页面。

为此，复制页面 URL 并添加此部分：“?fname[21]&lname=[19]&country=[22]”。

您可以插入字段文本和键，以便重定向 URL 如下所示：

http://yoursitename/user-directory/?fname[21]&lname=[19]&country=[22]

请记住为此表单启用不存储从此表单提交的条目选项。

现在，您需要向结果视图添加过滤器，以便用户可以通过您添加的表单字段搜索列表。

为此，请打开您之前创建的视图，然后单击页面顶部的过滤器选项。

然后，您需要为名字、姓氏和国家/地区添加过滤器，并输入短代码作为每个字段的默认值。

您需要做的最后一件事是在左侧菜单的No Entries Message选项中插入搜索表单的简码。 这将让用户在每次搜索后搜索更多内容。

完成设置后不要忘记更新视图。

测试您的自定义搜索表单

要检查您的搜索表单是否正常工作，请重新加载您的搜索页面并使用过滤器搜索列表。

有了它，您就知道了向您的网站添加搜索表单的 3 种方法。 虽然默认的 WordPress 搜索选项是免费的，但如果您不知道自己在使用代码做什么，我们不建议您这样做。 SearchWP 插件是迄今为止我们最喜欢的方法。 它易于使用，并为您的网站添加了一种更高级的搜索功能。

我们希望本文能帮助您借助强大的表单插件在 WordPress 中轻松创建自定义搜索表单。

对于您的后续步骤，您可以查看以下资源：

• 如何将自定义预订表格添加到您的 WordPress 网站
• 最佳表单生成器比较（免费和付费）
• 如何在 WordPress 中使用 PayPal 付款创建注册表单

这些帖子将帮助您在最好的 WordPress 表单构建器的帮助下为您的 WordPress 网站添加更多功能。