Products
GG网络技术分享 2025-03-18 16:05 10
无论您是在Google，YouTube，Amazon还是任何其他主要网站上键入搜索查询，实时搜索都已成为现代Web设计的基本要素。
实时搜索是当您看到建议的搜索字词列表时，这些搜索字词会随着您的输入而更新，并且可能是对任何网站的宝贵补充。 如今，许多用户只是希望每个网站都具有实时搜索功能，您可能会发现很少有人愿意手动搜索您的网站。
通过帮助访问者找到对他们而言重要的内容，您可以将它们保留在您的网站上更长的时间，提供更好的用户体验，甚至可以通过使访问者更容易发现相关的产品和服务而产生一些额外的收入。
在本文中，我将向您展示如何使用Ajax Search Pro插件用功能强大的搜索引擎替换标准WordPress搜索栏。 开箱即用，该实时搜索栏将能够搜索任何内容类型，包括WooCommerce内容。
第一步是购买可通过CodeCanyon获得的Ajax Search Pro插件。
如果尚未注册，请创建免费的Envato Market帐户 。 转到CodeCanyon网站 ，单击右上角的“ 登录”按钮，然后输入您的Envato帐户详细信息。
登录到帐户后，转到Ajax Search Pro列表 ，单击“ 立即购买” ，然后按照屏幕上的说明完成购买。 出现提示时下载插件。 解压缩Ajax插件； 随后的文件夹应包含ajax-search-pro zip文件，您需要将其上传到WordPress帐户。
下载Ajax Search Pro插件后，您需要安装它。
如果尚未登录，请登录到您的WordPress帐户。 从WordPress的左侧菜单中选择插件 ，然后选择添加新 。 选择上载插件 。
滚动到如果您有.zip格式的插件部分，然后选择选择文件 。 选择您刚刚下载的ajax-search-pro文件。 选择立即安装 。
现在，Ajax Search Pro插件将上传到您的WordPress帐户。 片刻之后，您应该会看到“ 插件已成功安装”消息； 选择随附的“ 激活插件”按钮。
假设插件已成功安装，那么在WordPress的左侧菜单中现在应该可以看到一个新的Ajax Search Pro项目。
首先，将Ajax Search Pro的默认搜索栏添加到我们的网站，这需要我们创建一个搜索实例：
现在单击添加按钮。 这会生成一个短代码，您可以使用该短代码将搜索栏放置在您的网站上。 点击保存 。
就是这样！ 您刚刚创建了一个基本的实时搜索栏，该功能完全可用并可以使用。
您可以通过几种不同的方式在网站上放置此搜索栏：
请注意，WordPress还提供了“ 将默认主题搜索替换为...”下拉列表，您可以使用该下拉列表选择Ajax搜索实例。 但是，此方法与所有WordPress主题均不兼容，因此在以下各节中将不进行介绍。
您可以使用标准的WordPress编辑器轻松快捷地将搜索栏添加到您的网站。 但是，此方法一次只能将搜索栏添加到一个页面或一个帖子中，如果要在整个网站上显示搜索栏，则可能很耗时，并且不允许您控制搜索的位置条出现在您选择的网页中。 如果这些因素中的任何一个都是破坏交易的因素，那么您可能会发现，使用以下各节中讨论的方法中的一种较为容易。
要使用WordPress编辑器插入搜索栏，请导航至要显示搜索栏的页面或帖子，然后将其打开以进行编辑。
在工具栏中，确保已选择“ 可视”选项卡。 选择新的ASP按钮。 如果此按钮未显示在WordPress工具栏的一部分中，请跳至以下部分以获取解决方法。
选择搜索框 ，然后选择刚刚创建的搜索实例的名称。 点击更新保存更改。
选择查看帖子 。 现在，搜索栏应显示在您选择的页面或帖子上。
如果要在任何其他网页上显示搜索栏，请重复上述步骤。
如果ASP按钮没有出现在WordPress工具栏中，则可能需要切换到WordPress经典编辑器。
为了更轻松地在经典编辑器和默认的块编辑器之间切换，我建议安装免费的经典编辑器 WordPress插件：
在WordPress的左侧菜单中，选择插件>添加新内容 。 搜索经典编辑器 。 当Classic Editor插件出现时，选择立即安装 。
WordPress工具栏现在应包含一个ASP按钮，您可以使用该按钮将搜索栏插入此页面或发布。 请注意，通过将鼠标悬停在要编辑的项目上，然后在出现时选择“ Classic Editor / Block Editor”链接，可以随时在Classic Editor和Block Editor之间切换。
如果需要精确控制搜索栏在单个网页上的显示位置，则可以生成一个简码，然后将其复制/粘贴到任何页面或帖子中。
这是显示搜索栏最灵活的方法之一，但是您需要手动将简码粘贴到希望显示搜索栏的每个位置，因此如果您需要显示搜索，此方法可能会变得很耗时。跨多个网页的栏。
生成简码：
您现在可以将此简码粘贴到网站上的任何位置； 我将其粘贴到我的Hello World主页中：
为了提供一致的用户体验，您可能希望在同一位置的多个网页上显示搜索栏，例如网站的侧边栏或页脚。
您可以使用Ajax Search Pro小部件将搜索栏添加到任何小部件区域，然后该搜索栏将出现在包含该小部件区域的每个网页上。 小部件是实现网站范围的搜索栏的一种简便方法，尽管它们不允许您自定义搜索栏在单个网页上的显示位置。
要将搜索栏添加到小部件区域：
花一些时间浏览您的网站，您应该注意到搜索栏现在显示在您选择的区域中，跨多个网页甚至整个网站中，这取决于您的WordPress主题。
最后，您可以将搜索栏作为菜单项添加到您的网站。
如果您已经有一个菜单，那么这可能是一种实现搜索栏而不破坏您网站内容或设计的方法。 如果在整个网站上都使用了菜单，那么这也是实现网站范围的搜索栏的快速简便的方法。
要将搜索实例添加到菜单，您需要复制该搜索实例的简码：
现在，我们准备将此搜索实例添加到菜单中：
打开您要编辑的菜单。 如果您以前尚未创建菜单，则可以通过在菜单名称字段中输入标题并选择创建菜单来创建一个菜单 。 然后，您可以使用“ 编辑”菜单选项卡将项目添加到此菜单，并使用“ 管理位置”选项卡指定此菜单应显示的位置 。 完成操作后，别忘了保存更改！
现在，在“ 添加菜单项”下 ，找到“ 自定义链接”部分，然后单击以展开。
. 字符。导航到显示此菜单的任何帖子或页面，搜索栏现在应作为该菜单的一部分出现。
如果您的WordPress主题已经包含搜索栏，则此时您可能具有多个网站范围的搜索栏。
要删除WordPress主题中包含的搜索栏，请执行以下操作：
到目前为止，我们已经集中于将Ajax Search Pro的默认搜索栏添加到您的网站的方法。 但是，根据您网站的主题，内容和总体布局，默认搜索栏可能不是最合适的。
也许您正在努力为默认的Ajax搜索栏找到足够的空间，或者它与您网站的外观冲突。 在这些情况下，可能有助于将默认搜索栏转换为紧凑的搜索栏，该搜索栏显示为一个小的放大镜图标。
当访问者单击此图标时，搜索栏将展开，他们将能够像往常一样在搜索栏中键入查询。
要将默认搜索栏转换为紧凑搜索栏：
这就是设置紧凑型搜索栏的全部操作，因此请转到显示搜索栏的任何网页-现在应该已经转换为紧凑型搜索栏。
如果需要，您可以更改精简搜索栏的对齐方式，使其显示在其指定空间的右侧或左侧。 请注意，根据您网站的主题和搜索栏的位置，更改对齐方式会产生戏剧性的效果，或者可能很难判断搜索栏是否已经完全移动！
要更改搜索栏的对齐方式：
现在，您可以导航到具有搜索栏的任何网页来检查更改。 如果您对它的新对齐方式不满意，则可以将搜索栏恢复到其原始位置：
在“ 紧凑框布局”屏幕上，您还可以使用“ 位置值”字段来更改紧凑搜索栏的大小。 您可以将其大小指定为父元素的百分比，尽管根据您的WordPress主题，这些百分比可能无法按预期工作。 如果更改百分比值对搜索栏的大小没有任何影响，则可以通过切换到像素（ px ）值来获得更好的结果。
对于许多网站而言，搜索栏对于帮助访问者找到有趣且相关的内容至关重要，但是您通常可以通过向标准搜索栏添加过滤器来改善用户体验。
默认情况下，Ajax Search Pro插件提供了许多内置过滤器，这些过滤器在WordPress用户界面中被称为分类法。
让我们从探索这些内置过滤器开始，然后继续创建自定义过滤器：
打开选择分类法下拉列表，然后从可用分类法中进行选择。 我以前曾使用WooCommerce创建Amazon Affiliate商店 ，所以我将为访客提供使用产品-pa_brand （产品品牌）分类法按品牌过滤产品的选项。
选择分类法后，将显示该分类法的所有术语。 您可以将这些术语中的任何一个用作过滤器，因此请抓住一个或多个术语并将其放入以下框中： 拖动要包括的术语！此时，您可以通过在屏幕底部显示的浮动窗口中单击“ 显示”按钮，预览使用当前设置配置的搜索栏的外观。
浮动窗口现在将展开为“ 预览”框； 单击刷新以查看当前设置应用于搜索栏。 对过滤器满意后，可以单击“ 保存所有标签”来发布它们！配置过滤器后，您可以指定它们是作为标准搜索对话框的一部分自动显示，还是在用户必须明确启动的菜单中显示。
要访问这些设置，请导航至Ajax Search Pro>前端搜索设置 ，并确保选择了“ 常规”选项卡。 在这里，您可以选择以下选项：
如果您已完成上述所有步骤，但您的过滤器仍未出现在您的网站上，则可能有助于切换显示搜索设置…复选框。
确保已保存对分类法设置所做的任何更改（通过单击“ 保存所有选项卡！”按钮），然后：
如果此解决方法不成功，那么您也可以通过切换前端的“ 显示搜索设置”开关来获得积极的结果。 开关，您会在屏幕顶部找到它。
添加一些过滤器后，您可能需要调整搜索栏的过滤功能，或更改其外观以更好地适合您的网站主题。
要自定义过滤器，请导航至Ajax Search Pro>前端搜索设置 ，然后选择“ 更改显示模式”按钮，这将弹出一个弹出窗口。
在此弹出窗口中，您可以进行以下更改：
您可以通过找到相关分类法，然后编辑其Box标头字段来更改出现在过滤器对话框中的分类法标头 。 例如，由于我使用的是Product Brand ，因此我将通过滚动到product-Product Brand（pa_brand）中的条款来自定义其标题，然后编辑Box标题字段中显示的文本。
默认情况下，Ajax Search Pro插件将其过滤器显示为复选框。 或者，您可以打开“ 显示为”下拉列表，然后从以下选项中进行选择：
这会将所有可用的过滤器显示为下拉菜单。
选择显示为：下拉菜单时 ，您将可以访问其他一些设置：
选择选择一个/任何选项 。 您可以使用此设置在下拉菜单顶部添加一些文本。 输入您要使用的文本，然后选择随附的复选框。
如果可能的过滤器列表很长，那么您的听众可能会喜欢按名称搜索过滤器的功能。
此设置允许您同时选择多个过滤器。 默认情况下，会选择每个过滤器，但用户可以通过单击该过滤器附带的x图标从搜索中排除该过滤器。
这会将每个过滤器显示为单选按钮。
如果选择单选按钮选项，则可以访问与下拉显示模式相同的设置：
除了其默认过滤器之外，Ajax Search Pro插件还允许您创建自定义过滤器，这些过滤器可以为您的网站添加强大而独特的过滤功能。
显示过滤器时，可以从以下布局中选择：
您可以为WordPress的标准页面和帖子创建过滤器，但是我将使用此功能来开发自定义搜索引擎，该引擎根据产品类别过滤我网站的Amazon Affiliate产品，类似于该部门的过滤器在Amazon.com上的功能。 这将需要我创建一个自定义字段（ smarthome_category ），该字段将应用于商店中的所有智能家居产品，然后为每个产品分配一个值，例如Thermostat ， Lock Cylinder或Water Detector 。
请注意，出于本教程的目的，我已经设置了WooCommerce并建立了我的Amazon Affiliates store 。
如果要为页面或帖子创建自定义过滤器，则步骤将大致相同。 例如，您可能希望允许访问者根据主题或发布内容的时间来过滤您的博客。
我当前正在编辑的产品是Nest Learning Thermostat，因此在Values中，我将输入Thermostat 。 要创建此类别并将恒温器值分配给当前产品，请点击添加自定义字段 。 请注意，您需要为所有属于“ 恒温器”类别的产品手动输入该值，因此可能有助于记下该值，尤其是其确切的大小写和标点符号。
不要忘记通过单击更新保存更改。
现在，我们已经创建了一个自定义字段，因此我们可以将其应用于任何产品，页面或帖子。
接下来，我们需要配置搜索实例：
单击以将光标放在“ 搜索自定义字段...”框中，然后开始输入在上一步中创建的自定义字段的名称（在我的实例中为smarthome_category ）。 当正确的自定义字段出现时，选择它。
默认情况下，“ 值”字段显示以下内容：
这是您需要手动输入所有Values的地方 。 我们需要用唯一值替换每个sample_value1||Sample Label 1 。 例如，我使用了以下值： 锁芯 ， LED照明 ， 恒温器 ， 开关和调光器 ， 水检测器和监控摄像机 。
替换样本值后，我得出以下结论：
最后，您需要使用**字符让插件知道默认情况下应选择哪个值。 我希望默认选择锁芯 ，所以完成的“ 值”框如下所示：
接下来，打开“ 运算符”下拉列表，它允许您指定在搜索字段中输入的值与结果的关系。 对于数字值，应使用数字运算符之一，例如Equals ， Not Equals或More Than ，但如果要处理文本值，则可以在Like和Exactly like之间进行选择。 我只想显示完全匹配的结果，所以我使用完全一样 。
对输入的信息满意后，点击添加 。 此时，您可以使用“ 显示/隐藏”框预览自定义过滤器在搜索对话框中的显示方式和功能。
如果确实需要更改自定义过滤器的外观或功能，请执行以下操作：
在本文中，我向您展示了如何使用Ajax Search Pro插件快速轻松地将实时搜索栏添加到WordPress网站。
掌握了默认搜索栏之后，我们研究了增强Ajax Search Pro的几种方法，包括将默认搜索变成可折叠的紧凑型搜索栏，并使用内置分类法添加过滤器。 最后，我向您展示了如何将搜索栏变成您自己的自定义搜索引擎，以及由您设计的过滤器。Demand feedback