方法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;
}