如何将搜索栏添加到 WordPress 网站

搜索栏是网站的基本元素，没有人会不同意。 这是因为网站通过主页、产品页面、博客页面、定价页面等包含大量信息。这就是为什么将搜索栏添加到 WordPress 网站至关重要。

如果您需要一些存在于不同页面上的信息，您将如何找到它们？ 您是否会发现他们单独访问这些页面？ 当然，你不会喜欢这样做。 并不是说您不会以这种方式找到所需的信息。 但它既费时又令人作呕。 这就是向您的网站添加搜索栏的地方。

为什么要在您的网站中添加搜索栏？

假设您的网站上没有搜索栏。 在这种情况下，当访问者访问您的网站时，他们将很难找到所需的信息。 结果，他们将离开您的网站，而您让他们进入网站的整个目的将徒劳无功。

让我介绍一些您可以在下面的网站中添加搜索栏的主要好处 -

• 减轻客户查找信息的工作量
• 简化用户体验
• 提高参与度
• 降低跳出率
• 使用一些关键字显示必要的项目或信息，从而减少工作量

使用 WordPress 默认搜索小部件在菜单上添加搜索栏：

您可以使用 WordPress 默认搜索小部件在菜单上添加搜索栏吗？ 不，你不能。 因为 WordPress 只允许您在小部件就绪区域添加搜索栏。

如果您想在菜单上添加搜索栏，则必须利用网站不同区域（包括页眉和页脚）中的其他插件或小部件。

这就是为什么我将在本教程中向您介绍在您的 WordPress 网站上添加搜索栏的 3 种不同方法。

现在，让我们看看如何通过 WordPress 默认小部件将搜索栏添加到您的网站。

使用 WordPress 默认搜索小部件添加搜索栏：

将搜索栏注入您的网站的最简单和最方便的方法是通过您的 WordPress 仪表板。 怎么做？ 让我们来看看-

从仪表板导航到小部件：

首先，转到管理面板的仪表板并找到外观。 从外观下的项目列表中导航并单击小部件。

仪表板 > 外观 > 小部件

从可用小部件中添加搜索小部件：

这将带您进入一个包含不同页面部分的新页面。 现在，点击“添加块”按钮（带有 + 号）查看所有现有的小部件。

向下滚动以找到搜索小部件，或者您可以在搜索字段上写“搜索”以找到搜索小部件。

单击您希望搜索栏显示的部分，然后点击搜索小部件。 或者，您也可以将搜索小部件拖放到您想要的部分。

进行必要的调整：

搜索栏现在将显示在所选部分下。 您可以对搜索栏对齐、按钮位置、文本颜色等不同元素进行所需的更改。

您还可以根据需要向搜索栏添加自定义标签。 最后，单击更新按钮。

查看页面中的搜索栏：

现在，如果您访问任何已发布的页面或帖子，您会注意到搜索栏或搜索框出现在主侧边栏上。

使用 ElementsKit 搜索小部件添加搜索栏：

现在，我将向您介绍另一种在您的 WordPress 网站中添加搜索栏的简单方法。 这是通过 ElementsKit 的 Header Search 小部件实现的。 通过 ElementsKit 添加搜索框超级简单。

废话不多说，一起来看看吧~

从仪表板导航到您现有的任何帖子或页面：

首先，转到仪表板并查找帖子或页面。 在这里，我将展示 ElementsKit 小部件如何与名为“Hello World！”的帖子一起使用。

转到“帖子”，然后选择“所有帖子”以显示所有帖子。 从那里，您可以选择要添加搜索栏的帖子。 如果您没有任何现有的帖子或页面，则必须添加新的帖子或页面。

仪表板 > 帖子 > 所有帖子 > 您的帖子

切换到 Elementor 窗口：

现在，单击顶部中间的“使用 Elementor 编辑”。 这将带您进入 Elementor 窗口。

拖放标题搜索小部件：

在 Elementor 窗口中，您将可以访问大量小部件。 在搜索字段中键入“标题搜索”小部件以查找小部件。 或者，您也可以向下滚动并找到小部件。

找到小部件后，将其拖放到指定区域以显示搜索栏。 不要忘记在帖子文本上方添加该部分，因为它是标题搜索栏。

设置搜索栏的参数：

一旦搜索栏出现在页面上，就可以根据您的喜好设置栏的参数了。 在内容选项卡下，您将有一个标题搜索部分，您可以在其中放置一个占位符文本，选择一个搜索图标，然后调整字体大小。

在样式选项卡下，您将有 2 个部分 - 标题搜索和搜索容器。 在标题搜索部分，您可以调整搜索栏的背景颜色、边框类型、搜索框阴影、边距等参数。

在搜索容器部分，您可以选择背景类型并设置占位符文本和边框颜色。

最后，你很高兴！

完成设置后，您就可以检查和查看帖子前端的搜索栏了。 如果您对搜索框的外观不满意，您可以再次从管理面板进行修改。

添加带有 CSS 代码的搜索框：

您可以使用另一种方法在您的网站中添加搜索栏，即使用 CSS 代码。 虽然，您需要一些技术知识才能做到这一点，但这不是火箭科学。 我将在这里向您展示该过程，之后将非常容易。

转到主题编辑器：

首先，从仪表板单击“外观”并导航到“主题编辑器”。

打开 header.php 或 sidebar.php 文件：

这样，您将默认移至 style.css 文件。 从那里，根据您希望搜索栏显示的位置打开header.php或sidebar.php文件。

添加搜索栏功能：

现在，添加这个函数<?php get_search_form(); ?>在您的 header.php 或 sidebar.php 文件代码中。 我在 header.php 文件代码中添加了该函数。

查看您网站上的搜索栏：

最后，打开任何已发布的页面，您会注意到搜索栏出现在顶部。 如果您在 sidebar.php 文件中添加该功能，搜索栏将出现在侧边栏上。

清盘：

就是这个！！！ 我已经向您介绍了向您的 WordPress 网站添加搜索栏的 3 种超级简单的技术。 根据您的要求，您可以选择其中任何一个。 但是，如果您使用 ElementsKit 的标题搜索小部件添加搜索栏，您将获得额外的好处。

那是什么？ 无底的自定义选项！！！ 因此，如果您喜欢自定义，请使用 ElementsKit 的标题搜索小部件。 有了它，你可以给你的搜索栏一个迷人的外观。