将实时Ajax搜索栏添加到您的WordPress网站

无论您是在Google，YouTube，Amazon还是任何其他主要网站上键入搜索查询，实时搜索都已成为现代Web设计的基本要素。

实时搜索是当您看到建议的搜索字词列表时，这些搜索字词会随着您的输入而更新，并且可能是对任何网站的宝贵补充。 如今，许多用户只是希望每个网站都具有实时搜索功能，您可能会发现很少有人愿意手动搜索您的网站。

通过帮助访问者找到对他们而言重要的内容，您可以将它们保留在您的网站上更长的时间，提供更好的用户体验，甚至可以通过使访问者更容易发现相关的产品和服务而产生一些额外的收入。

在本文中，我将向您展示如何使用Ajax Search Pro插件用功能强大的搜索引擎替换标准WordPress搜索栏。 开箱即用，该实时搜索栏将能够搜索任何内容类型，包括WooCommerce内容。

下载Ajax Search Pro插件

第一步是购买可通过CodeCanyon获得的Ajax Search Pro插件。

如果尚未注册，请创建免费的Envato Market帐户 。 转到CodeCanyon网站 ，单击右上角的“ 登录”按钮，然后输入您的Envato帐户详细信息。

登录到帐户后，转到Ajax Search Pro列表 ，单击“ 立即购买” ，然后按照屏幕上的说明完成购买。 出现提示时下载插件。 解压缩Ajax插件； 随后的文件夹应包含ajax-search-pro zip文件，您需要将其上传到WordPress帐户。

将插件添加到您的WordPress网站

下载Ajax Search Pro插件后，您需要安装它。

如果尚未登录，请登录到您的WordPress帐户。 从WordPress的左侧菜单中选择插件 ，然后选择添加新 。 选择上载插件 。

滚动到如果您有.zip格式的插件部分，然后选择选择文件 。 选择您刚刚下载的ajax-search-pro文件。 选择立即安装 。

现在，Ajax Search Pro插件将上传到您的WordPress帐户。 片刻之后，您应该会看到“ 插件已成功安装”消息； 选择随附的“ 激活插件”按钮。

假设插件已成功安装，那么在WordPress的左侧菜单中现在应该可以看到一个新的Ajax Search Pro项目。

创建实时搜索栏

首先，将Ajax Search Pro的默认搜索栏添加到我们的网站，这需要我们创建一个搜索实例：

• 在WordPress的左侧菜单中，选择Ajax Search Pro 。
• 在随后的屏幕上，为您的搜索实例命名。 我正在使用testSearch 。

现在单击添加按钮。 这会生成一个短代码，您可以使用该短代码将搜索栏放置在您的网站上。 点击保存 。

就是这样！ 您刚刚创建了一个基本的实时搜索栏，该功能完全可用并可以使用。

小部件，简码和菜单：显示搜索栏

您可以通过几种不同的方式在网站上放置此搜索栏：

• 使用WordPress编辑器
• 生成简码
• 创建一个搜索小部件
• 将搜索栏添加到现有菜单

请注意，WordPress还提供了“ 将默认主题搜索替换为...”下拉列表，您可以使用该下拉列表选择Ajax搜索实例。 但是，此方法与所有WordPress主题均不兼容，因此在以下各节中将不进行介绍。

1.使用WordPress编辑器

您可以使用标准的WordPress编辑器轻松快捷地将搜索栏添加到您的网站。 但是，此方法一次只能将搜索栏添加到一个页面或一个帖子中，如果要在整个网站上显示搜索栏，则可能很耗时，并且不允许您控制搜索的位置条出现在您选择的网页中。 如果这些因素中的任何一个都是破坏交易的因素，那么您可能会发现，使用以下各节中讨论的方法中的一种较为容易。

要使用WordPress编辑器插入搜索栏，请导航至要显示搜索栏的页面或帖子，然后将其打开以进行编辑。

在工具栏中，确保已选择“ 可视”选项卡。 选择新的ASP按钮。 如果此按钮未显示在WordPress工具栏的一部分中，请跳至以下部分以获取解决方法。

选择搜索框 ，然后选择刚刚创建的搜索实例的名称。 点击更新保存更改。

选择查看帖子 。 现在，搜索栏应显示在您选择的页面或帖子上。

如果要在任何其他网页上显示搜索栏，请重复上述步骤。

找不到ASP按钮？

如果ASP按钮没有出现在WordPress工具栏中，则可能需要切换到WordPress经典编辑器。

为了更轻松地在经典编辑器和默认的块编辑器之间切换，我建议安装免费的经典编辑器 WordPress插件：

在WordPress的左侧菜单中，选择插件>添加新内容 。 搜索经典编辑器 。 当Classic Editor插件出现时，选择立即安装 。

• 安装经典编辑器插件后，从WordPress的左侧菜单中选择插件>已安装的插件 。
• 找到经典编辑器 ，然后单击其随附的“设置”链接。
• 滚动到所有用户的默认编辑器，然后选择经典编辑器 。
• 在“ 允许用户切换编辑器”部分中，选择“ 是” 。
• 点击保存更改 。
• 导航到您要放置搜索栏的页面或帖子，但暂时不要打开它进行编辑。
• 将鼠标悬停在您选择的页面或帖子上，然后在出现时选择“ 编辑（经典编辑器）”链接。

WordPress工具栏现在应包含一个ASP按钮，您可以使用该按钮将搜索栏插入此页面或发布。 请注意，通过将鼠标悬停在要编辑的项目上，然后在出现时选择“ Classic Editor / Block Editor”链接，可以随时在Classic Editor和Block Editor之间切换。

2.生成搜索栏简码

如果需要精确控制搜索栏在单个网页上的显示位置，则可以生成一个简码，然后将其复制/粘贴到任何页面或帖子中。

这是显示搜索栏最灵活的方法之一，但是您需要手动将简码粘贴到希望显示搜索栏的每个位置，因此如果您需要显示搜索，此方法可能会变得很耗时。跨多个网页的栏。

生成简码：

• 在WordPress的左侧菜单中，选择Ajax Search Pro 。
• 找到您的搜索实例，然后选择其随附的“设置”图标。
• 在屏幕顶部，单击以展开“ 切换简码”部分。
• “ 简单简码”部分应包含“ 搜索简码” 。 复制此简码。

您现在可以将此简码粘贴到网站上的任何位置； 我将其粘贴到我的Hello World主页中：

• 导航到您要放置搜索栏的页面或帖子，然后将其打开以进行编辑。
• 单击以选中要在其中显示搜索栏的块。
• 选择三个点的图标，然后选择编辑为HTML 。

• 将您的简码粘贴到您希望搜索栏出现的确切位置。
• 点击更新保存更改。
• 选择查看帖子 。 现在，您的搜索栏应显示在您粘贴短代码的确切位置。

3.使用Ajax Search Pro小部件

为了提供一致的用户体验，您可能希望在同一位置的多个网页上显示搜索栏，例如网站的侧边栏或页脚。

您可以使用Ajax Search Pro小部件将搜索栏添加到任何小部件区域，然后该搜索栏将出现在包含该小部件区域的每个网页上。 小部件是实现网站范围的搜索栏的一种简便方法，尽管它们不允许您自定义搜索栏在单个网页上的显示位置。

要将搜索栏添加到小部件区域：

• 在WordPress的左侧菜单中，选择外观>窗口小部件 。 您应该看到几个新的小部件，包括Ajax Search Pro小部件。
• 在屏幕的右侧，您会找到所有“玻璃化”区域的列表。 确定要使用的窗口小部件区域，例如Blog Sidebar或Footer 1 ，然后将Ajax Search Pro拖放到所选区域。

• 单击以展开Ajax Search Pro小部件。
• 为该搜索栏指定一个描述性标题。
• 打开“ 选择搜索...”下拉列表，然后选择要使用的搜索实例。
• 点击保存 。

花一些时间浏览您的网站，您应该注意到搜索栏现在显示在您选择的区域中，跨多个网页甚至整个网站中，这取决于您的WordPress主题。

4.将搜索栏添加到菜单

最后，您可以将搜索栏作为菜单项添加到您的网站。

如果您已经有一个菜单，那么这可能是一种实现搜索栏而不破坏您网站内容或设计的方法。 如果在整个网站上都使用了菜单，那么这也是实现网站范围的搜索栏的快速简便的方法。

要将搜索实例添加到菜单，您需要复制该搜索实例的简码：

• 从WordPress的左侧菜单中选择Ajax Search Pro 。
• 查找相关搜索实例，然后选择其“设置”图标。
• 单击以展开“ 切换简码”部分。
• 复制搜索简码值。

现在，我们准备将此搜索实例添加到菜单中：

• 在WordPress的左侧菜单中，选择外观>菜单 。

打开您要编辑的菜单。 如果您以前尚未创建菜单，则可以通过在菜单名称字段中输入标题并选择创建菜单来创建一个菜单 。 然后，您可以使用“ 编辑”菜单选项卡将项目添加到此菜单，并使用“ 管理位置”选项卡指定此菜单应显示的位置 。 完成操作后，别忘了保存更改！

现在，在“ 添加菜单项”下 ，找到“ 自定义链接”部分，然后单击以展开。

• 在网址字段中输入任何值，我只是使用. 字符。
• 将您的搜索实例简码粘贴到“ 链接文本”字段中。
• 单击添加到菜单 。 您应该注意到，您的简码现已添加到Menu结构中 。
• 要保存更改，请单击“ 保存菜单” 。

导航到显示此菜单的任何帖子或页面，搜索栏现在应作为该菜单的一部分出现。

删除默认的WordPress搜索栏

如果您的WordPress主题已经包含搜索栏，则此时您可能具有多个网站范围的搜索栏。

要删除WordPress主题中包含的搜索栏，请执行以下操作：

• 在WordPress的左侧菜单中，选择外观>窗口小部件 。
• 在此屏幕的右侧，找到仍显示原始搜索栏的窗口小部件区域，然后单击以展开“ 搜索栏”部分。
• 点击删除 。 现在，原始搜索栏将从您的网站中完全删除。

节省空间：切换到精简搜索栏

到目前为止，我们已经集中于将Ajax Search Pro的默认搜索栏添加到您的网站的方法。 但是，根据您网站的主题，内容和总体布局，默认搜索栏可能不是最合适的。

也许您正在努力为默认的Ajax搜索栏找到足够的空间，或者它与您网站的外观冲突。 在这些情况下，可能有助于将默认搜索栏转换为紧凑的搜索栏，该搜索栏显示为一个小的放大镜图标。

当访问者单击此图标时，搜索栏将展开，他们将能够像往常一样在搜索栏中键入查询。

要将默认搜索栏转换为紧凑搜索栏：

• 在WordPress的左侧菜单中，选择Ajax Search Pro 。
• 找到您想要转换为紧凑搜索栏的搜索实例，然后单击其随附的“设置”图标。
• 选择布局选项 。
• 选择紧凑框布局 。
• 找到“ 紧凑布局”模式滑块，然后将其推到“ 打开”位置。

• 滚动到屏幕底部，然后单击“ 保存所有选项卡” 。

这就是设置紧凑型搜​​索栏的全部操作，因此请转到显示搜索栏的任何网页-现在应该已经转换为紧凑型搜索栏。

如果需要，您可以更改精简搜索栏的对齐方式，使其显示在其指定空间的右侧或左侧。 请注意，根据您网站的主题和搜索栏的位置，更改对齐方式会产生戏剧性的效果，或者可能很难判断搜索栏是否已经完全移动！

要更改搜索栏的对齐方式：

• 导航到Ajax Search Pro>设置>布局选项>紧凑框布局 。
• 找到紧凑的布局对齐部分，并打开其附带的下拉菜单； 选择向右或向左 。
• 单击“ 保存所有选项卡” 。

现在，您可以导航到具有搜索栏的任何网页来检查更改。 如果您对它的新对齐方式不满意，则可以将搜索栏恢复到其原始位置：

• 导航到紧凑框布局屏幕（ Ajax Search Pro>设置>布局选项>紧凑框布局 ）。
• 打开“ 紧凑式布局对齐”下拉列表，然后选择“ 不浮动” 。
• 通过单击“ 保存所有选项卡”来保存更改。

在“ 紧凑框布局”屏幕上，您还可以使用“ 位置值”字段来更改紧凑搜索栏的大小。 您可以将其大小指定为父元素的百分比，尽管根据您的WordPress主题，这些百分比可能无法按预期工作。 如果更改百分比值对搜索栏的大小没有任何影响，则可以通过切换到像素（ px ）值来获得更好的结果。

更强大的搜索：添加分类过滤器

对于许多网站而言，搜索栏对于帮助访问者找到有趣且相关的内容至关重要，但是您通常可以通过向标准搜索栏添加过滤器来改善用户体验。

默认情况下，Ajax Search Pro插件提供了许多内置过滤器，这些过滤器在WordPress用户界面中被称为分类法。

让我们从探索这些内置过滤器开始，然后继续创建自定义过滤器：

• 在WordPress的左侧菜单中，选择Ajax Search Pro 。
• 找到您的搜索实例，然后单击其随附的“设置”图标。
• 选择“ 前端搜索设置”选项卡。
• 选择类别和分类术语 。

打开选择分类法下拉列表，然后从可用分类法中进行选择。 我以前曾使用WooCommerce创建Amazon Affiliate商店 ，所以我将为访客提供使用产品-pa_brand （产品品牌）分类法按品牌过滤产品的选项。

选择分类法后，将显示该分类法的所有术语。 您可以将这些术语中的任何一个用作过滤器，因此请抓住一个或多个术语并将其放入以下框中： 拖动要包括的术语！

此时，您可以通过在屏幕底部显示的浮动窗口中单击“ 显示”按钮，预览使用当前设置配置的搜索栏的外观。

浮动窗口现在将展开为“ 预览”框； 单击刷新以查看当前设置应用于搜索栏。 对过滤器满意后，可以单击“ 保存所有标签”来发布它们！

显示过滤器：添加搜索设置开关

配置过滤器后，您可以指定它们是作为标准搜索对话框的一部分自动显示，还是在用户必须明确启动的菜单中显示。

要访问这些设置，请导航至Ajax Search Pro>前端搜索设置 ，并确保选择了“ 常规”选项卡。 在这里，您可以选择以下选项：

• 将搜索设置默认设置为可见 。 访问者与搜索栏进行交互后，您的过滤器就会自动显示。
• 显示搜索设置将在前端打开 。 这将添加一个访问者必须单击的开关，以启动过滤器对话框。 如果用户不需要任何过滤器，那么他们只需在搜索栏中单击并键入查询，而无需触摸搜索设置开关。

过滤器不出现？

如果您已完成上述所有步骤，但您的过滤器仍未出现在您的网站上，则可能有助于切换显示搜索设置…复选框。

确保已保存对分类法设置所做的任何更改（通过单击“ 保存所有选项卡！”按钮），然后：

• 浏览至Ajax Search Pro>前端搜索设置 。
• 确保已选中“ 常规”选项卡。
• 查找以下部分： 将搜索设置默认设置为可见？ 该滑块应处于“ 打开”位置； 将其关闭，然后再次打开。
• 使用随附的“ 显示/隐藏”预览面板来检查这是否使您的过滤器处于隐藏状态。

如果此解决方法不成功，那么您也可以通过切换前端的“ 显示搜索设置”开关来获得积极的结果。 开关，您会在屏幕顶部找到它。

自定义过滤器

添加一些过滤器后，您可能需要调整搜索栏的过滤功能，或更改其外观以更好地适合您的网站主题。

要自定义过滤器，请导航至Ajax Search Pro>前端搜索设置 ，然后选择“ 更改显示模式”按钮，这将弹出一个弹出窗口。

在此弹出窗口中，您可以进行以下更改：

添加标题：更改“框标题”

您可以通过找到相关分类法，然后编辑其Box标头字段来更改出现在过滤器对话框中的分类法标头 。 例如，由于我使用的是Product Brand ，因此我将通过滚动到product-Product Brand（pa_brand）中的条款来自定义其标题，然后编辑Box标题字段中显示的文本。

复选框，下拉菜单，多选还是单选？

默认情况下，Ajax Search Pro插件将其过滤器显示为复选框。 或者，您可以打开“ 显示为”下拉列表，然后从以下选项中进行选择：

1.下拉

这会将所有可用的过滤器显示为下拉菜单。

选择显示为：下拉菜单时 ，您将可以访问其他一些设置：

• 选择一个/任何选项 。 用户将只能从下拉菜单中选择一个过滤器。
• 第一项 。 默认情况下，下拉菜单中的第一个过滤器将被选中。
• 最后一项 。 默认情况下，下拉菜单中的最后一个过滤器将被选中。
• 按照定义 。 这使您可以指定默认情况下应选择哪个过滤器。 要确定具体内容，请在随附的“ 定义的”字段中键入所需的过滤器，然后在出现时选择该过滤器。

选择选择一个/任何选项 。 您可以使用此设置在下拉菜单顶部添加一些文本。 输入您要使用的文本，然后选择随附的复选框。

2.下拉搜索

如果可能的过滤器列表很长，那么您的听众可能会喜欢按名称搜索过滤器的功能。

3.多选带搜索

此设置允许您同时选择多个过滤器。 默认情况下，会选择每个过滤器，但用户可以通过单击该过滤器附带的x图标从搜索中排除该过滤器。

4.电台

这会将每个过滤器显示为单选按钮。

如果选择单选按钮选项，则可以访问与下拉显示模式相同的设置：

• 选择一个/任何选项
• 第一项
• 最后一项
• 根据定义

增强您的搜索：创建自定义过滤器

除了其默认过滤器之外，Ajax Search Pro插件还允许您创建自定义过滤器，这些过滤器可以为您的网站添加强大而独特的过滤功能。

显示过滤器时，可以从以下布局中选择：

• 单选按钮
• 下拉菜单
• 复选框
• 滑条
• 范围滑块-例如，您的在线商店的价格范围滑块
• 日期过滤器-例如，如果您已经创建了在线票务系统，并且想按日期过滤事件

您可以为WordPress的标准页面和帖子创建过滤器，但是我将使用此功能来开发自定义搜索引擎，该引擎根据产品类别过滤我网站的Amazon Affiliate产品，类似于该部门的过滤器在Amazon.com上的功能。 这将需要我创建一个自定义字段（ smarthome_category ），该字段将应用于商店中的所有智能家居产品，然后为每个产品分配一个值，例如Thermostat ， Lock Cylinder或Water Detector 。

请注意，出于本教程的目的，我已经设置了WooCommerce并建立了我的Amazon Affiliates store 。

如果要为页面或帖子创建自定义过滤器，则步骤将大致相同。 例如，您可能希望允许访问者根据主题或发布内容的时间来过滤您的博客。

• 导航到您要使用自定义过滤器标记的页面，帖子或产品，然后将其打开以进行编辑。
• 滚动到“ 自定义字段”部分。 如果您的屏幕不包含此部分，请滚动到屏幕顶部，然后依次选择“ 屏幕选项”和“ 自定义字段” 。
• 要创建一个自定义字段，请单击Enter new ，然后键入要创建的字段的名称。 我正在命名自定义字段smarthome_category 。

我当前正在编辑的产品是Nest Learning Thermostat，因此在Values中，我将输入Thermostat 。 要创建此类别并将恒温器值分配给当前产品，请点击添加自定义字段 。 请注意，您需要为所有属于“ 恒温器”类别的产品手动输入该值，因此可能有助于记下该值，尤其是其确切的大小写和标点符号。

不要忘记通过单击更新保存更改。

现在，我们已经创建了一个自定义字段，因此我们可以将其应用于任何产品，页面或帖子。

• 导航到有问题的项目，然后将其打开以进行编辑。
• 滚动到“ 自定义字段” 。
• 打开“ 名称”下拉列表，然后选择刚刚创建的自定义字段，在我的实例中为smarthome_category 。
• 在“ 值”字段中，输入要分配给该项目的值。 我目前正在查看从亚马逊导入的Ring Video Doorbell 2产品，因此我将输入Home Security System 。
• 点击添加自定义字段 。
• 点击更新保存更改。
• 冲洗并重复使用自定义字段和值标记的每个项目。

配置搜索实例

接下来，我们需要配置搜索实例：

• 在WordPress的左侧菜单中，选择Ajax Search Pro 。
• 找到您要使用的搜索实例，然后单击其随附的“设置”图标。
• 选择“ 前端搜索设置”选项卡，然后选择“ 自定义字段”选项卡。

单击以将光标放在“ 搜索自定义字段...”框中，然后开始输入在上一步中创建的自定义字段的名称（在我的实例中为smarthome_category ）。 当正确的自定义字段出现时，选择它。

• 在标题标签字段中，为您的过滤系统提供一个描述性标题，您可以选择将其显示为过滤器对话框的一部分； 我正在使用Department 。
• 通过选择或取消选择“ 在前端显示标签”来确定是否要在过滤器对话框中显示标题标签？ 复选框。
• 打开“ 类型”下拉列表，然后选择想要如何显示自定义过滤器。 可用选项包括： Radio ， Dropdown ， Checkboxes ， Text ， DatePicker ， Slider和Range Slider。

默认情况下，“ 值”字段显示以下内容：

1. ||Any value**
2. sample_value1||Sample Label 1
3. sample_value2||Sample Label 2
4. sample_value3||Sample Label 3

这是您需要手动输入所有Values的地方 。 我们需要用唯一值替换每个sample_value1||Sample Label 1 。 例如，我使用了以下值： 锁芯 ， LED照明 ， 恒温器 ， 开关和调光器 ， 水检测器和监控摄像机 。

替换样本值后，我得出以下结论：

1. Lock Cylinders||Lock Cylinders
2. LED lighting||LED lighting
3. Thermostat||Thermostat
4. Switches & Dimmers||Switches & Dimmers
5. Water Detector||Water Detector
6. Surveillance Camera||Surveillance Camera

最后，您需要使用**字符让插件知道默认情况下应选择哪个值。 我希望默认选择锁芯 ，所以完成的“ 值”框如下所示：

1. Lock Cylinders||Lock Cylinders**
2. LED lighting||LED lighting
3. Thermostat||Thermostat
4. Switches & Dimmers||Switches & Dimmers
5. Water Detector||Water Detector
6. Surveillance Camera||Surveillance Camera

接下来，打开“ 运算符”下拉列表，它允许您指定在搜索字段中输入的值与结果的关系。 对于数字值，应使用数字运算符之一，例如Equals ， Not Equals或More Than ，但如果要处理文本值，则可以在Like和Exactly like之间进行选择。 我只想显示完全匹配的结果，所以我使用完全一样 。

对输入的信息满意后，点击添加 。 此时，您可以使用“ 显示/隐藏”框预览自定义过滤器在搜索对话框中的显示方式和功能。

如果确实需要更改自定义过滤器的外观或功能，请执行以下操作：

• 将鼠标悬停在您的自定义过滤器显示在灰色框中的位置上，然后会出现铅笔编辑图标。
• 单击此图标，您将能够编辑您的自定义过滤器。
• 当您对过滤器感到满意时，请通过保存所有标签来保存设置！ 点击。

结论

在本文中，我向您展示了如何使用Ajax Search Pro插件快速轻松地将实时搜索栏添加到WordPress网站。

掌握了默认搜索栏之后，我们研究了增强Ajax Search Pro的几种方法，包括将默认搜索变成可折叠的紧凑型搜索栏，并使用内置分类法添加过滤器。 最后，我向您展示了如何将搜索栏变成您自己的自定义搜索引擎，以及由您设计的过滤器。