如何在没有插件的情况下添加 WordPress Ajax 搜索？

搜索功能是任何网站的重要组成部分，它允许访问者快速找到他们正在寻找的信息。 虽然 WordPress 提供了内置的搜索功能，但它可能并不总能满足所有用户的需求。 将 Ajax 搜索添加到您的 WordPress 站点可以通过提供实时搜索结果而无需刷新页面来显着增强用户体验。

虽然许多插件可用于添加 WordPress Ajax 搜索功能，但它们通常会降低您的网站速度，并且可能无法提供您需要的定制级别。 在本文中，我们将引导您完成有关如何在没有插件的情况下添加 WordPress Ajax 搜索的指南。 在文章的最后，我们还向您展示了另一种将实时搜索添加到 WordPress 的简单方法。 按照我们的分步流程，您将能够自定义搜索功能以满足您的需求，并为您的访问者提供更好的用户体验。

什么是 WordPress Ajax 搜索？

Ajax 搜索是一种搜索功能，它使用 Ajax（异步 JavaScript 和 XML）技术提供实时搜索结果，而无需刷新页面。 Ajax 允许在用户继续与页面交互时在后台将搜索查询发送到服务器。 然后将搜索结果动态加载到页面中，从而提供更无缝、更快速的用户体验。

在 WordPress 的上下文中，Ajax 搜索可用于改进内置搜索功能或将其完全替换为更强大和可自定义的搜索功能。 通过 Ajax 搜索，用户可以在输入查​​询时立即获得结果，从而更轻松、更快速地找到他们正在寻找的内容。 这对于包含大量内容或产品的网站尤其有用，在这些网站上，传统搜索功能可能需要更长的时间来加载或返回不相关的结果。

为什么要将实时 Ajax 搜索添加到您的 WordPress 网站？

以下是您应该将实时 Ajax 搜索添加到您的 WordPress 网站的一些主要原因。

• 改善用户体验：Ajax 搜索提供实时搜索结果，无需刷新页面，使用户更快、更高效地找到所需信息。
• 降低跳出率：如果用户无法快速找到他们正在寻找的内容，他们可能会离开您的网站。 Ajax 搜索可以通过立即提供相关结果来帮助防止这种情况发生，从而减少用户从您的网站跳出的可能性。
• 可自定义：使用 Ajax 搜索，您可以自定义搜索功能以满足您的特定要求，包括添加过滤器或调整搜索结果排名。
• 更准确的搜索结果：可以设置 Ajax 搜索以通过包含附加搜索条件或使用模糊搜索算法来提供更准确的搜索结果。
• 增强站点搜索功能：虽然 WordPress 提供了内置搜索功能，但它可能并不总能满足所有用户的需求。 添加 Ajax 搜索可以改进站点的搜索功能并提供更好的用户体验。

如何在没有插件的情况下添加 WordPress Ajax 搜索？

使用代码向您的 WordPress 网站添加实时 Ajax 搜索的优缺点

如果您考虑使用代码将实时 Ajax 搜索添加到您的 WordPress 站点，请仔细查看以下优缺点。

优点：

• 自定义：当您使用代码将实时 Ajax 搜索添加到您的 WordPress 站点时，您可以完全控制搜索功能的功能和设计。 您可以对其进行自定义以满足您的特定需求和偏好。
• 速度：基于代码的 Ajax 搜索比使用插件更快，因为插件代码没有额外的开销。
• 无依赖性：通过不依赖插件，您可以消除与其他插件的潜在冲突或与未来 WordPress 更新的兼容性问题。
• 学习机会：编写代码以在您的 WordPress 站点上实现 Ajax 搜索是了解更多有关 Web 开发和 Ajax 工作原理的绝好机会。

缺点：

• 所需技术知识：使用代码实现 Ajax 搜索需要一定的 Web 开发和 WordPress 技术知识。
• 耗时：编写代码以添加 Ajax 搜索可能非常耗时，尤其是在您不熟悉流程或需要调试任何错误的情况下。
• 错误风险：如果代码未正确编写或测试，可能会导致您的网站出现错误或安全漏洞。
• 有限支持：使用代码时，您必须维护和更新搜索功能，这可能需要额外的时间和资源。

总之，使用代码将实时 Ajax 搜索添加到您的 WordPress 站点可提供出色的自定义和控制。 尽管如此，它仍然需要技术知识和时间来实施和维护。 对于那些想更多地了解 Web 开发并愿意投入必要的时间和资源的人来说，这可能是一个不错的选择。

使用代码将 Ajax 搜索添加到您的 WordPress 站点时要注意什么？

在没有插件的情况下将实时 Ajax 搜索添加到您的 WordPress 网站时，请记住以下几点：

备份您的网站：在对您的网站进行任何更改之前，创建网站备份非常重要，以防出现问题。

代码定制：添加 Ajax 搜索功能需要一些编码知识，因此一定要对 HTML、CSS、JavaScript 和 PHP 有基本的了解。

彻底测试：确保在实施代码后彻底测试搜索功能，以确保其正常工作并提供预期结果。

未来更新：请记住，对主题或 WordPress 核心文件的任何更新都可能影响自定义 Ajax 搜索的功能。 请务必定期检查和更新代码，以确保与任何更新的兼容性。

主题兼容性：添加 Ajax 搜索的代码可能因您的主题而异。 请务必先在暂存站点上测试代码，以确保它适用于您的特定主题。 因此，在开始添加不带插件的 WordPress Ajax 搜索之前，您需要为您在网站上使用的当前主题创建一个子主题，并在您的网站上激活它。

使用代码手动将实时 Ajax 搜索添加到您的 WordPress 站点

按照下面的详细过程将实时 Ajax 搜索添加到您的 WordPress 站点。

• 第 1 步：访问主题文件编辑器

从您的 WordPress 仪表板，转到外观 > 主题文件编辑器

• 第二步：复制WordPress中显示Ajax搜索的主要代码

复制下面的代码。 在帖子查询中，您可以根据需要自定义 HTML。 此代码将与 HTML 交互，以帮助您创建无需插件的 WP Ajax 搜索。

 } // the ajax function add_action ( 'wp_ajax_data_fetch' , 'data_fetch' ); add_action ( 'wp_ajax_nopriv_data_fetch' , 'data_fetch' ); function data_fetch () { $the_query = new WP_Query ( array ( 'posts_per_page' => - 1 , 's' => esc_attr ( $_POST [ 'keyword' ] ), 'post_type' => array ( 'page' , 'post' ) ) ); if ( $the_query -> have_posts () ) : echo '<ul>' ; while ( $the_query -> have_posts () ): $the_query -> the_post (); ?> <li><a href= "<?php echo esc_url( post_permalink() ); ?>" > <?php the_title (); ?> </a></li> <?php endwhile ; echo '</ul>' ; wp_reset_postdata (); endif ; die (); }

• 第 3 步：将 Ajax 搜索代码添加到 functions.php 主题文件中。

在代码编辑页面上，从右侧菜单导航到functions.php 。 并将您复制的代码粘贴到代码编辑器区域。

• 第 4 步：保存更改

不要忘记单击底部页面上的“更新文件”按钮。

就是这样。 您已经在没有插件的情况下向 WordPress 引入了实时 Ajax 搜索。

它将为您的访问者提供即时搜索结果并提高综合浏览量。

如果您觉得它很复杂并希望尝试另一种方法，让我们下载并安装 Woostify 主题并使用 Woostify 的 Ajax Product Search 插件来完成。

如何使用 Woostify 的 Ajax 搜索插件将实时 Ajax 搜索添加到您的站点？

这就是在没有插件的情况下添加 WordPress Ajax 搜索的方法。 如果您发现很难向您的 WordPress 网站添加自定义代码，并且不想安装第三方插件以避免降低您的网站速度，您可以使用 Woostify 主题。

如您所知，要经营在线商店，您需要一个 WooCommerce 主题。 与其使用没有促销功能的简单 WordPress WooCommerce 主题，不如选择 Woostify。 Woostify WooCommerce 高级主题为您提供多种有用的功能来运行和开发您的电子商务网站。 Woostify 主题还为您提供了 Ajax Product Search 插件，无需安装外部插件即可更轻松地添加 WordPress Ajax 搜索。

立即安装 Woostify Pro

使用 Woostify 的 Ajax 搜索插件将实时 Ajax 搜索添加到您的 WordPress 网站的优缺点

Woostify 的 Ajax 搜索插件是一个插件，它使用 Woostify 主题向 WooCommerce 商店添加 Ajax 搜索功能。 该插件使用 Ajax 技术提供实时搜索结果，无需刷新页面，使用户能够更快、更高效地找到所需的产品。

这个 Ajax 搜索插件旨在与 Woostify 主题和 WooCommerce 插件无缝协作，提供高级搜索功能，例如产品图像显示、自动建议以及按产品 SKU、类别或标签进行搜索的能力。 该插件还包括自定义搜索栏布局、颜色和字体以匹配您网站设计的选项。

使用 Ajax 搜索插件可以增强 WooCommerce 商店的搜索功能，改善用户体验，并通过使客户更容易查找和购买产品来潜在地增加销售额。 该插件作为 Woostify Pro 软件包的一部分提供，其中包括额外的高级功能和支持。

这种方法的唯一缺点是您需要购买 Woostify 主题专业版，1 个站点每年的费用为 49 美元起。 当然，如果您使用 Woostify 主题，则您的 WordPress 站点上不需要任何其他主题。 而这个主题最适合实体网店。

使用 Woostify 的 Ajax 搜索插件将实时 Ajax 搜索添加到您的 WordPress 站点的详细过程

这是将实时 Ajax 搜索添加到您的 WordPress 网站的最简单方法，尤其是对于 WooCommerce 网站。

要使用 Woostify 的 Ajax 搜索插件在 WooCommerce 网站上实施 WordPress Ajax 搜索，您应该按照以下步骤操作。

• 第 1 步：启用 Woostify 的 Ajax 搜索插件

假设您已经在 WooCommerce 网站上安装了 Woostify theme pro。 所以第一步是启用 Woostify 的 Ajax 产品搜索插件。 从您的 WordPress 仪表板，转到Woostify 。

然后，从顶部菜单导航到“附加组件”选项卡。 之后，您将在此处看到一张 Woostify 高级附加组件表。

移动鼠标找到Ajax Product Search插件，然后打开启用按钮，使其变为绿灯，如下所示。

• 第 2 步：在您的 WooCommerce 网站上设置 Ajax 搜索。

要访问 Ajax Product Search 插件的设置页面，您应该点击方框一角的设置图标，如下所示：

现在您已到达设置页面，可以设置 Ajax Product Search 插件。

如您所见，在此部分中，您可以使用以下元素进行设置。

– 过滤器：如果要显示类别过滤器，请选中此选项。

– 搜索类别：如果您希望按类别显示搜索，请选中此选项。

– 搜索标签：如果您要在标签中显示搜索，请选中此框。

– 搜索属性：如果您希望在产品属性中显示搜索，请勾选此框。

– 在自定义字段中搜索：在此部分中，您可以选择要添加到搜索范围的自定义字段。

– 缺货产品：如果您想删除搜索结果中的缺货产品，请选中此选项。

– 限制结果：输入“-1”以显示所有搜索结果

–搜索方式：在此部分，您可以选择按产品标题/产品 SKU/产品描述/或产品简短描述进行搜索。 但是，我们建议您应该选择所有这些，以确保您的客户可以轻松地找到他们所想的任何商店中的产品。

– 突出显示颜色：您可以自定义搜索结果中文本的颜色。

– 索引数据：选中此框可让 Ajax 搜索插件为您的 WooCommerce 网站中的所有数据编制索引。

– 上次更新：这显示了设置的最新更新。

– 总产品指数：这显示了被索引的产品总数。

• 第 3 步：保存和预览

在最后一步中，记得点击保存按钮并访问您前面的商店以检查您的 ajax 搜索是否正常工作。

最后的话，

在没有插件的情况下将实时 Ajax 搜索添加到您的 WordPress 站点是增强用户体验并使访问者更容易免费找到他们正在寻找的内容的好方法。 虽然它确实需要一些编码知识，但自定义 Ajax 搜索的好处可能非常显着。 请记住备份您的网站，彻底测试，并在您的主题或 WordPress 核心文件的任何未来更新中更新您的代码。

或者，如果您不喜欢编码，您可以选择 Woostify 高级主题来设计您的网站，尤其是电子商务网站。 使用 Woostify 的 Ajax Product Search 插件，您可以使添加实时 Ajax 搜索的过程变得更加简单，但可以事半功倍地获得更好的结果。

如果您对如何在不使用插件的情况下添加 WordPress Ajax 搜索有任何疑问或建议，请在下方发表评论让我们知道。