wp_nav_menu 函数输出去除div,ul,li

在定制主题的时候,想去除一些 wp_nav_menu 函数输出的html代码,下面是一些解决方法。

去掉li多余的css

1
2
3
4
5
6
7
8
9
10
11
12
13
add_filter('nav_menu_css_class', 'rm_css_attributes_filter', 100, 1);
add_filter('nav_menu_item_id', 'rm_css_attributes_filter', 100, 1);
add_filter('page_css_class', 'rm_css_attributes_filter', 100, 1);
function rm_css_attributes_filter($var) {
return is_array($var) ? array() : '';
}

如果你需要保留其中一些css,只需要简单修改一下即可。


function rm_css_attributes_filter($var) {
return is_array($var) ? array_intersect($var, array('current-menu-item', 'current-menu-parent')) : '';
}

去除菜单没有设置时候的默认值

fallback_cb 参数设置为 false 即可。

去除div

去除 div 标签最简单,只需要配置一个参数container为false即可。

去除ul

去除外层的 ul 标签,需要借助 items_wrap 参数,通过查看源代码:wp-includes/nav-menu-template.php,发现 items_wrap 的默认值是:

1
2
3
4
5
<ul id="%1$s" class="%2$s">%3$s</ul>

我们通过参数即可去掉

'items_wrap' => '%3$s'

注意:如果菜单是多级的,子菜单仍然有ul,如果这个也想去掉可以参考下面的去li的方法

去除li

这里需要用php的函数strip_tags(),trip_tags() 函数可以剥去字符串中的 HTML、XML 以及 PHP 的标签

这里我们先设置echo为false,然后获取到菜单的内容,例如:

1
2
3
4
5
$footer_menu = wp_nav_menu( array( 
'echo' => false,
'container' => false,
'fallback_cb' =>false,
'theme_location' => 'footer_menu' ) );

然后通过strip_tags函数过滤掉一些标签

1
echo strip_tags( $footer_menu , '<a>' );

第二个参数是保留的标签,可以写多个标签例如:

1
echo strip_tags( $footer_menu , '<a><span>' );

通过 Walker_Nav_Menu 控制

这次在定制主题的时候,最终想要的是这样的:

1
2
<a class="list-group-item" target="_blank" href="http://www.baidu.com/">Baidu</a>
<a class="list-group-item" target="_blank" href="http://www.google.com/">Google</a>

a 标签里有默认的样式,而且target默认为 blank。

div和ul是通过上面的方式处理的,li和a的处理是通过扩展Walker_Nav_Menu实现的,具体代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
class wp_link_navwalker extends Walker_Nav_Menu {

function start_el(&$output, $item, $depth, $args) {
$attributes = ' class="list-group-item"';
$attributes .= ' target="_blank"';
$attributes .= empty($item->attr_title) ? '' : ' title="'.esc_attr($item->attr_title).'"';
$attributes .= empty($item->url) ? '' : ' href="'.esc_attr($item->url).'"';

$item_output .= '<a'. $attributes .'>';
$item_output .= apply_filters( 'the_title', $item->title, $item->ID );
$item_output .= '</a>';

$output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
}

function end_el(&$output, $item, $depth, $args) {
$output .= '';
}
}

输出

1
2
3
4
5
6
7
8
9
<?php
wp_nav_menu(array(
'container' => false, // 去除最外层的div
'items_wrap' => '%3$s', // 去除ul
'fallback_cb' => false,
'walker' => new wp_link_navwalker(),
'theme_location'=> 'friend_link_menu'
));
?>
分享到