如何將搜索字段添加到 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 的特色圖片