丽水公司网站设计：如何将搜索字段添加到Divi的辅助菜单中

2019.05.15 丽水公司网站设计

197

在今天的Divi教程中，我们丽水公司网站设计将向您展示如何将搜索字段添加到辅助菜单中。二次菜单也被称为你的网页的标题和地方，你试图融入一些关于你的网站或公司的实际信息。向它添加一个搜索字段可能是您从客户端收到的请求，或者是您对自己网站的需要。无论哪种方式，我们都将向您展示如何在使用Divi主题时轻松地将这个搜索字段集成到您的辅助导航中。

结果

在我们深入研究不同的步骤之前，您必须采取不同的步骤才能到达那里；提前向您展示结果可能会很有趣。通过遵循POST中的步骤并添加CSS外观更改，您将在默认的辅助菜单上获得以下结果：

丽水公司网站设计

为什么在辅助菜单中添加搜索字段

添加搜索的可能性到你的辅助菜单是你可能会尝试做的事情之一。但是与主菜单不同的是，头在WordPress中没有一个单独的页面，它可以帮助您手动添加内容，而不必将PHP代码行添加到网站的Header.php文件中。

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

从一开始就为您的访问者提供搜索的可能性。

你的网站上有各种各样的访问者。他们中的一些人希望探索事物并花些时间，而另一些人则想马上找到具体的信息。通过将搜索字段添加到辅助菜单中，您将确保正在寻找特定内容的访问者能够立即完成此操作。因为第二个菜单位于页面的顶部，所以匆忙中的访问者将欣赏改进他们的用户体验的努力。

从搜索字段保存主菜单

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

强调搜索字段而没有华丽的主菜单

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

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

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

<?php get_search_form(); ?>

继续复制这个PHP代码行，然后转到WordPress仪表板。在你的WordPress仪表板，转到出现>编辑器>Header.php。

丽水公司网站设计

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

search field

设置搜索字段的样式

默认情况下，搜索字段看起来有点过时。你可能会想要改变一些东西，只是为了让它看起来像你想要的样子，并使它适合你的其他网站的外观和感觉。您可能需要更改以下三件事情：搜索标签、搜索输入和按钮输入。

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

search field

这显然不是我们想要达到的最终结果。幸运的是，我们可以对这个领域做尽可能多的修改。在这篇文章的下一部分中，我们将向您展示如何修改搜索字段的所有元素，我们还将共享CSS代码行以获得以下结果：

丽水公司网站设计

删除/修改搜索标签

搜索字段的第一个元素是搜索标签。这是出现的文本，向人们解释，他们可以搜索网站上的任何东西使用该字段。但是，这个标签是不必要的。现在每个人都知道搜索字段是如何工作的。通过在标签的CSS中添加“Display：None；”，始终可以使搜索标签消失。或者，您可以更改标签的外观。

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

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

输入搜索的样式

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

input#s
{

}

输入按钮的样式

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

input#searchsubmit
{
}

我们的示例所需的CSS代码

search field

完成PHP修改后，丽水公司网站设计可以立即通过WordPress仪表板>Divi>主题选项>General>并将下列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;
}}

search field

结果

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

search field

最后思想

在本教程中，我们丽水公司网站设计向您展示了如何将搜索字段添加到辅助菜单中。此外，我们还向您展示了如何修改该搜索字段中的元素，并向您提供了一个CSS代码行示例，您可以复制和粘贴这些代码行供自己使用。如果您有任何问题或建议，请在下面的评论部分留下评论！


相关推荐
分享： 1 2 3

关键词

手机网站制作手机网站建设企业网站建设做网站价格医疗网站建设营销网站建设网站建设哪家好网站制作方案企业网站制作如何制作网站江门网站优化专业网站建设网站制作公司

热门分享

最新文章

随机推荐

最新案例

寒枫总监

来电咨询

18868949445

微信咨询

寒枫总监
TOP