如何将搜索字段添加到 Divi 的二级菜单

在今天的 Divi 教程中，我们将向您展示如何向二级菜单添加搜索字段。 二级菜单也称为页面的标题，也是您尝试放入有关您的网站或公司的一些实用信息的位置。 向其中添加搜索字段可能是您从客户那里收到的请求或您对自己网站的需要。 无论哪种方式，当您使用 Divi 主题时，我们都会向您展示如何轻松地将此搜索字段集成到您的辅助导航中。

结果

在我们深入探讨不同的步骤之前，您必须采取哪些步骤才能到达那里； 提前向您展示结果可能会很有趣。 按照帖子中的步骤并添加 CSS 外观更改，您将在默认二级菜单上获得以下结果：

为什么要在二级菜单中添加搜索字段

向二级菜单添加搜索可能性是您可能尝试做的事情之一。 但与主菜单不同的是，标题在 WordPress 中没有单独的页面来帮助您手动添加内容，而无需将 PHP 代码行添加到您网站的 header.php 文件中。

但是，在二级菜单中添加搜索功能可能是一件有趣的事情。 让我们来看看为什么要添加一个的一些原因。

从一开始就为您的访问者提供搜索机会

您的网站上有各种各样的访问者。 他们中的一些人希望探索事物并慢慢来，而另一些人则希望立即找到特定信息。 通过将您的搜索字段添加到二级菜单，您可以确保正在寻找特定内容的访问者能够立即执行此操作。 由于二级菜单位于页面顶部，匆忙的访问者会欣赏改善用户体验的努力。

从搜索字段保存主菜单

当然，您可以做的另一件事是将搜索字段添加到主菜单。 但在某些情况下，您可能不想这样做。 例如; 如果您想将注意力集中在菜单项上，或者您不想将菜单项与搜索字段混合在一起。 另一个原因可能是您已经有相当多的菜单项使您的主菜单看起来很忙，并且您不想在其上添加搜索字段。

在没有华丽主菜单的情况下强调搜索字段

大多数人倾向于保持他们的主菜单清醒并让他们的二级菜单流行。 主要是因为他们想显示两个菜单之间的明显区别。 其次，因为二级菜单通常有一些他们想要强调的东西（例如社交媒体图标）。 当您决定将搜索字段也集成到二级菜单中时，它也会自动突出显示，它会刺激您的访问者进行搜索并准确找到他们正在寻找的内容。

如何将搜索字段添加到 Divi 的二级菜单

订阅我们的 YouTube 频道

将搜索字段添加到头 PHP 文件

现在，要将搜索字段实际添加到您的标题中，如下图所示，您首先必须向您网站的 header.php 文件添加一些内容。 您需要的代码行如下：

<?php get_search_form(); ?>

继续并复制此 PHP 代码行并转到您的 WordPress 仪表板。 在您的WordPress 仪表板中，转到外观 > 编辑器 > header.php。

您现在可以将代码行放置在您希望搜索栏出现的任何位置。 由于我们希望它出现在社交媒体图标旁边，因此我们将向您展示在代码中放置它的确切位置。 我们需要将它放在二级菜单、容器和顶部标题关闭之前。

为您的搜索字段设置样式

默认情况下，搜索字段看起来有点过时。 您可能想要更改一些内容，只是为了让它看起来像您想要的样子，并使其与您网站其余部分的外观和感觉相适应。 您可能希望更改以下三项内容：搜索标签、搜索输入和按钮输入。

如果您不对搜索字段进行任何 CSS 修改，默认情况下，它在您的二级菜单中将如下所示：

这显然不是我们想要达到的最终结果。 幸运的是，我们可以根据需要对该字段进行尽可能多的修改。 在本文的下一部分中，我们将向您展示如何修改搜索字段的所有元素，我们还将分享 CSS 代码行以实现以下结果：

删除/修改搜索标签

作为搜索字段一部分的第一个元素是搜索标签。 这是显示的文本，向人们解释他们可以使用该字段在网站上搜索任何内容。 但是，此标签不是必需的。 现在每个人都知道搜索字段是如何工作的。 您始终可以通过添加 'display:none;' 使搜索标签消失到该标签的 CSS。 或者，您可以更改标签的外观。

您需要对搜索标签进行任何修改的类是“.screen-reader-text”。 如下例所示，您可以禁用它的出现。

.screen-reader-text {
display: none;
}

为您的搜索输入设置样式

您可能想要设置样式的下一件事是搜索输入。 要对此输入进行任何调整，请将所有 CSS 代码行放在以下括号之间：

 input#s
{

}

设置按钮输入样式

最后，我们还有按钮样式。 要对搜索字段的这一部分进行任何修改，请将 CSS 代码行放在以下括号之间：

input#searchsubmit
{
}

我们的示例所需的 CSS 代码

进行 PHP 修改后，您可以通过转到WordPress 仪表板 > Divi > 主题选项 > 常规 > 并将以下 CSS 代码行添加到自定义字段中，立即获得如上所示的结果：

.screen-reader-text {
display: none;
}

input#s {
border-radius: 5px;
}

input#searchsubmit {
border: 1px solid #000000;
color: #FFFFFF;
background-color: #000000;
border-radius: 5px;
}

form#searchform {
float: right;
}
@media screen and (min-width: 480px) {
#top-header .container {
padding-bottom: 5px;
}

#et-secondary-menu .et-social-icons {
margin-top: 6px;
}}

结果

现在我们已经完成了所有步骤，让我们再看看你的标题应该是什么样子：

最后的想法

在本教程中，我们向您展示了如何向二级菜单添加搜索字段。 除此之外，我们还向您展示了如何修改该搜索字段中的元素，并向您展示了一个 CSS 代码行示例，您只需复制和粘贴即可供您自己使用。 如果您有任何问题或建议，请随时在下面的评论部分发表评论！

请务必订阅我们的电子邮件通讯和 YouTube 频道，这样您就不会错过重大公告、有用提示或 Divi 免费赠品！

D Line/shutterstock.com 的特色图片