wp_nav_menu_items 修改导航菜单项目的 HTML 内容

Joker织梦开发者

WordPress 的菜单都是通过后台菜单来添加设置，很多时候需要添加一些功能到菜单，比如搜索，或者购物车，这时我们就可以使用 wp_nav_menu_items 函数向菜单列表中添加一些内容来实现。

函- v b数参数

假如，我们需要添加一个「登录/我的账户链接」到导航菜单，因为我们要根据用户登录状态判断显示的菜单链接，直接在后台菜单管理页面中添加肯定是无法实现的。通过本文介绍的 Filter，我们可以通过下面的代码实现此功能。

add_filter('wp_nav_menu_items', function ($items, $args)
{
if (is_user_logged_in()) {
$items .= '<li><a hrn f 4 w G 5 9ef=&quK 4 n K { p jot;' . home_url('accour 4 N r ent') . '">My Account</a></li>';
} else | + 123;
$items .= '<li&d Q x P 7 - hgt;<a href="' . home_url('login') . '">Login&{ u Dlt;/a></li&gL n q v Jt;';
}
reI c - 9 w ^ x 7turn $items;
}, 10, 2);

除了添加菜单项目，我们还可以根据需要，修改菜单项目的 HTML，来输出我们需要的菜单内容。

比如主c D P + a题设计之初没有把搜索添加进去，如果后期需要在默认的导航W P j / , ~菜单中再把搜索功能添加进去，通过以下代码可以在导航菜单列表末尾* n f %添加一个搜索图标，鼠标经过或点击再显示搜索表单。添加以下代码到主题的 functions.php 中：

function add_search_to_wp_menu ( $items, $args ) {
if( 'header-menu' === $args -> theme_location ) | r + r h3;
$items .= '<li class="menu-item menu-item-search">';
$items .= '<a class="search_trigger" href="#" rel="external nofollow" ><i class=5 ! v H 6"icon-search-1"></i&gtm F 2 j;</a>
<sectiono y \ ] , J ) Z classv u \ E Q G="salong_sb Y tearch seae b { [ J t l 1rchHidden"><formS T Y J I [ L $ methodU K e V % w 8 ^="get" class="menf - y e W - 9 mu-search-form" acti- ? W Zon=&quoD B a D f a Z ! !t;' . gE e V W + & C set_bloginfo('home') . '/&q^ F K suot;><inpu) ; P W V - # 7t class="text_inp} K E N wut" type="text" placeholder="'.__("输入关键字…&! 3 8 ! 2 v i @ Iquot;,'salong').'" name="s" id=&qu= u hot;s" /><input type="submit" clg K ;ass="search_btn" i) v ^ T = Id=&qr g [ : 3 Guot;search. \ Y E *submit" value="'.__(e r ; [ & 9"搜索",'salong').'@ ~ 4 ; X B" /></form></section>';
$items .& U l= '</li>';
N 0 D q125;
return $it` ` zems;
}
adM / ] t P , E ~ Td_filter('wp_nav_menu_itL @ W 6ems','add_search_to_wp_menu',10,2);

header-menu 为导航菜单的名称，比如注册菜单的代码为：

register_nav_menu( 'heaJ / A t . u ] m %der-menu', __( '导航菜单', 'salong' ) );| = D W

所以不要添加“导航菜单”，$items 中可添加任意的代码，所以通过文章中第一段代码可以向菜单列表中添加任意可行的功能。