wordpress多级菜单样式

WordPress多级菜单设置很简单,几乎所有的主题都会有菜单设置选项

但是,设置的多级菜单能利用CSS控制的样式,三级以上就不好控制,查看源码,二级及以上ul的class都是sub-menu,想要通过添加CSS来操作三级以上的菜单样式,是比较累的。好在可以通过Walker_Nav_Menu函数来控制ul的class样式,在function.php中插入以下函数

/**
 * Header_Menu_Walker类
 * 这类名当然你随意了
 */
class Header_Menu_Walker extends Walker_Nav_Menu {
 
    /**
     * start_lvl函数
     * 这函数主要处理ul,如果ul有一些特殊的样式,修改这里
     * 他这里面的$depth就是层级,一级二级三级
     * $args是上面wp_nav_menu()函数定义的那个数组
     *
     */
    function start_lvl( &$output, $depth = 0, $args = array() ) {
        $indent = ( $depth > 0  ? str_repeat( "\t", $depth ) : '' ); // 缩进
        $display_depth = ( $depth + 1); // 层级默认是0级,这里+1为了从1开始算
        $classes = array(
            'sub-menu', //ul是个子菜单的时候,添加这个样式
            ( $display_depth % 2  ? 'menu-odd' : 'menu-even' ), //子菜单奇数加样式menu-odd,偶数加样式menu-even
            ( $display_depth >=2 ? 'sub-sub-menu' : '' ),   //三级菜单的时候,添加这个样式
            'menu-depth-' . $display_depth, //这样式主要能看出当前菜单的层级,menu-depth-2是二级呗
        );
        $class_names = implode( ' ', $classes ); //用空格分割多个样式名
 
        $output .= "\n" . $indent . '
    ' . "\n"; //把刚才定义的,那么多的样式,写到ul里面 } /** * start_el函数 * 主要处理li和里面的a * $depth和$args同上 * * @param string $output Passed by reference. Used to append additional content. * @param object $item Menu item data object. * @param int $depth Depth of menu item. Used for padding. * @param array $args An array of arguments. @see wp_nav_menu() * @param int $id Current item ID. */ function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) { global $wp_query; $indent = ( $depth > 0 ? str_repeat( "\t", $depth ) : '' ); // 缩进 // 定义li的样式 $depth_classes = array( ( $depth == 0 ? 'main-menu-item' : 'sub-menu-item' ), //一级的li,就main-menu-item,其余全部sub-menu-item ( $depth >=2 ? 'sub-sub-menu-item' : '' ), //三级的li,添加这个样式 ( $depth % 2 ? 'menu-item-odd' : 'menu-item-even' ), //奇数加样式menu-item-odd,偶数加样式menu-item-even 'menu-item-depth-' . $depth, //层级同上 ); $depth_class_names = esc_attr( implode( ' ', $depth_classes ) ); $classes = empty( $item->classes ) ? array() : (array) $item->classes; $class_names = esc_attr( implode( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item ) ) ); //这句我没看懂,不知道是在干啥 // 把样式合成到li里面 $output .= $indent . '

另附一段显示菜单描述的函数

function start_el(&$output, $item, $depth, $args) {
        global $wp_query;
        $indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';
        $class_names = $value = '';
        $classes = empty( $item->classes ) ? array() : (array) $item->classes;
        $class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item ) );
        $class_names = ' class="' . esc_attr( $class_names ) . '"';
        $output .= $indent . '

这样,用css控制就比较好控制了,不同级别的ul样式class是不一样的!

End:感谢阅读,感谢打赏!

你也来说两句呗

电子邮件地址不会被公开。 必填项已用*标注