在进行WordPress二开的时候会经常用到wp_nav_menu函数,而为了减少自己写css,我们大多数都会使用第三方css框架,比如bs的。
描述
在进行WordPress二开的时候会经常用到wp_nav_menu函数,而为了减少自己写css,我们大多数都会使用第三方css框架,比如bs的。
在BS中菜单代码如下:
<div class="header-menu-wrapper header-menu-wrapper-left" id="kt_header_menu_wrapper"> <div id="kt_header_menu" class="header-menu header-menu-left header-menu-mobile header-menu-layout-default"> <!--begin::Header Nav--> <ul class="menu-nav"> <li class="menu-item"> <a href="javascript:;" class="menu-link menu-toggle"> <span class="menu-text">Dashboard</span> </a> </li> </ul> <!--end::Header Nav--> </div> <!--end::Header Menu--> </div>
从上面的代码中我们可以看出,li标签是有class的,但是WordPress函数wp_nav_menu的参数中并没有给li添加class的代码,常规如下:
<?php $args['menu'] = 'menu-1'; $args['menu_class'] = 'menu-nav'; $args['container'] = 'div'; $args['container_class'] = 'header-menu header-menu-left header-menu-mobile header-menu-layout-default'; $args['container_id'] = 'kt_header_menu'; wp_nav_menu($args) ?>
如果我们这样直接使用,输出的li标签是没有BS的class的,这时候就得按照BS的菜单重写css样式,那么如果添加自定义class呢?
开始
一、添加自定义hook
function add_additional_class_on_li($classes, $item, $args) { if(isset($args->add_li_class)) { $classes[] = $args->add_li_class; } return $classes; } add_filter('nav_menu_css_class', 'add_additional_class_on_li', 1, 3);
二、重写调用菜单函数如下:
<?php $args['menu'] = 'menu-1'; $args['menu_class'] = 'menu-nav'; $args['container'] = 'div'; $args['container_class'] = 'header-menu header-menu-left header-menu-mobile header-menu-layout-default'; $args['container_id'] = 'kt_header_menu'; $args['add_li_class'] = 'menu-item'; wp_nav_menu($args) ?>
其中与之前代码不一样的是:
$args['add_li_class'] = 'menu-item';
实现思路
调用WordPress的nav_menu_css_class hook,从传给wp_nav_menu的参数中得到 add_li_class ,之后插入li 的class中。