方法1:插件實現
插件地址:Add Search To Menu
後台安裝並啟用搜索菜單插件,進入插件管理,設置 添加搜索到菜單頁面,將搜索欄配置到菜單中。選擇要添加搜索欄的菜單,此菜單列表是WordPress默認的菜單。如果更改網站主題,那麼該列表將自動使用主題中的可用菜單。
可以定義搜索帖子類型,搜索表單樣式,搜索菜單標題,管理移動顯示來進行搜索。這些設置可以幫助用戶改善搜索的結果和樣式。
同時也可以將搜索欄添加其他菜單中,只需要在插件設置中勾選要顯示的菜單即可
方法2:通過funcitons.php為導航菜單添加一個搜索框
如下實現添加一個搜索框到導航菜單(未測試)。
打開你的functions.php文件,並粘貼以下代碼,保存。之後當你啟用自定義導航菜單後就會自動添加一個搜索框。
add_filter('wp_nav_menu_items','add_search_box', 10, 2);
function add_search_box($items, $args) {
ob_start();
get_search_form();
$searchform = ob_get_contents();
ob_end_clean();
$items .= '<li>' . $searchform . '</li>';
return$items;
}
WordPress的菜單都是通過後台菜單來添加設置,很多時候需要添加一些功能到菜單,比如搜索,或者購物車,這時我們就可以使用wp_nav_menu_items函數向菜單列表中添加一些內容來實現。
添加以下代碼到主題的functions.php中
function add_search_to_wp_menu ( $items, $args ) {
if( 'header-menu' === $args -> theme_location ) {
$items .= '<li class="menu-item menu-item-search">';
$items .= '<a class="search_trigger" href="#"><i class="icon-search-1"></i></a>
<section class="salong_search searchHidden"><form method="get" class="menu-search-form" action="' . get_bloginfo('home') . '/"><input class="text_input" type="text" placeholder="'.__("輸入關鍵字…",'salong').'" name="s" id="s" /><input type="submit" class="search_btn" id="searchsubmit" value="'.__("搜索",'salong').'" /></form></section>';
$items .= '</li>';
}
return $items;
}
add_filter('wp_nav_menu_items','add_search_to_wp_menu',10,2);
header-menu為導航菜單的名稱,比如註冊菜單的代碼為:
register_nav_menu( 'header-menu', __( '導航菜單', 'salong' ) );
所以不要添加“導航菜單”
WordPress菜單非常棒。拖放界面使WordPress主題開發人員和用戶都非常容易。在過去,我們向您展示了如何在WordPress中添加自定義菜單以及如何設置自定義菜單的樣式。菜單的可視界面限制的一件事是您只能添加鏈接(頁面,類別或自定義鏈接)。如果要將自定義項添加到WordPress菜單,該怎麼辦?也許您想在WordPress菜單中添加搜索欄,登錄/註銷鏈接,今天的日期或其他任何內容。僅僅因為沒有可視化界面,並不意味着它是不可能的。在本文中,我們將向您展示如何利用wp_nav_menu_items鉤子將自定義項添加到所有或特定的WordPress菜單。
注意:本教程適用於WordPress主題開發人員,因此您需要了解基本的html / css以及對WordPress主題如何工作的公平理解。
顯然,您需要在主題中啟用自定義菜單,然後才能繼續。
讓我們從基礎開始。我們需要添加您自己的過濾器wp_nav_menu_items鉤。一個例子如下:
add_filter( "wp_nav_menu_items", "your_custom_menu_item", 10, 2 );
function your_custom_menu_item ( $items, $args ) {
if (is_single() && $args->theme_location == "primary") {
$items .= "<li>Show whatever</li>";
}
return $items;
}
現在如您所見,您可以將條件語句與參數theme_location一起使用。這使您可以根據需要定位特定菜單位置。如果您不想要條件語句,則不必使用它。只需將其添加到特定菜單位置,反之亦然。
現在您已經看到了一個基本示例,讓我們向您展示一些如何工作的具體示例。
將登錄/註銷鏈接添加到特定的WordPress菜單
如果您想讓您的用戶能夠登錄/退出,那麼您可以在自定義菜單中添加鏈接。下面的代碼段會在菜單位置顯示適當的用戶登錄/註銷鏈接:primary。如果需要,您可以更改菜單位置。
add_filter( "wp_nav_menu_items", "add_loginout_link", 10, 2 );
function add_loginout_link( $items, $args ) {
if (is_user_logged_in() && $args->theme_location == "primary") {
$items .= "<li><a href="". wp_logout_url() ."">Log Out</a></li>";
}
elseif (!is_user_logged_in() && $args->theme_location == "primary") {
$items .= "<li><a href="". site_url("wp-login.php") ."">Log In</a></li>";
}
return $items;
}
將搜索欄添加到特定菜單
想要在特定菜單中添加搜索欄?好吧,不要再看了。您可以通過粘貼以下代碼段來完成此操作:
add_filter("wp_nav_menu_items","add_search_box_to_menu", 10, 2);
function add_search_box_to_menu( $items, $args ) {
if( $args->theme_location == "primary" )
return $items."<li class="menu-header-search"><form action="http://example.com/" id="searchform" method="get"><input type="text" name="s" id="s" placeholder="Search"></form></li>";
return $items;
}
將今天的日期添加到特定的WordPress菜單
下面的代碼段會將今天的日期添加到您的WordPress菜單中。如果需要,您可以使用我們今天的日期手冊來調整代碼。
add_filter("wp_nav_menu_items","add_todaysdate_in_menu", 10, 2);
function add_todaysdate_in_menu( $items, $args ) {
if( $args->theme_location == "primary") {
$todaysdate = date("l jS F Y");
$items .= "<li>" . $todaysdate . "</li>";
}
return $items;
}