如何在WordPress主题中用Bootstrap 5 Navwalker添加多级子菜单

要实现多级子菜单，核心是修改Navwalker类的递归渲染逻辑，配合自定义CSS适配Bootstrap的下拉结构，具体步骤如下：

1. 修改Bootstrap 5 Navwalker类的子菜单处理逻辑 #

默认Navwalker通常只支持一级子菜单，需要调整start_lvl和start_el方法，让它能递归渲染多层子菜单。替换或修改你的Navwalker类代码：

class Bootstrap_Navwalker extends Walker_Nav_Menu {
    // 保留原有其他方法...

    public function start_lvl( &$output, $depth = 0, $args = null ) {
        $t = "\t";
        $n = "\n";
        $indent = str_repeat( $t, $depth );

        // 根据层级定义子菜单容器类
        $classes = array( 'dropdown-menu' );
        if ( $depth > 0 ) {
            $classes[] = 'dropdown-submenu'; // 自定义类用于CSS定位
        }

        $class_names = join( ' ', apply_filters( 'nav_menu_submenu_css_class', $classes, $args, $depth ) );
        $class_names = $class_names ? ' class="' . esc_attr( $class_names ) . '"' : '';

        $output .= "{$n}{$indent}<ul$class_names>{$n}";
    }

    public function start_el( &$output, $item, $depth = 0, $args = null, $id = 0 ) {
        $t = "\t";
        $n = "\n";
        $indent = ( $depth ) ? str_repeat( $t, $depth ) : '';

        $classes = empty( $item->classes ) ? array() : (array) $item->classes;
        $classes[] = 'nav-item';
        $classes[] = 'menu-item-' . $item->ID;

        // 给带子女菜单的项添加对应类
        if ( in_array( 'menu-item-has-children', $classes ) ) {
            $classes[] = 'dropdown';
            if ( $depth > 0 ) {
                $classes[] = 'dropdown-submenu-item';
            }
        }

        $class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item, $args, $depth ) );
        $class_names = $class_names ? ' class="' . esc_attr( $class_names ) . '"' : '';

        $id = apply_filters( 'nav_menu_item_id', 'menu-item-'. $item->ID, $item, $args, $depth );
        $id = $id ? ' id="' . esc_attr( $id ) . '"' : '';

        $output .= $indent . '<li' . $id . $class_names . '>';

        $atts = array();
        $atts['title']  = ! empty( $item->attr_title ) ? $item->attr_title : '';
        $atts['target'] = ! empty( $item->target ) ? $item->target : '';
        $atts['rel']    = ! empty( $item->xfn ) ? $item->xfn : '';
        $atts['href']   = ! empty( $item->url ) ? $item->url : '';

        // 为带子女菜单的项添加下拉触发属性
        if ( in_array( 'menu-item-has-children', $item->classes ) ) {
            $atts['href'] = '#';
            $atts['class'] = 'nav-link dropdown-toggle';
            $atts['role'] = 'button';
            $atts['data-bs-toggle'] = 'dropdown';
            $atts['aria-expanded'] = 'false';
        } else {
            $atts['class'] = 'nav-link';
        }

        $attributes = '';
        foreach ( $atts as $attr => $value ) {
            if ( ! empty( $value ) ) {
                $value = ( 'href' === $attr ) ? esc_url( $value ) : esc_attr( $value );
                $attributes .= ' ' . $attr . '="' . $value . '"';
            }
        }

        $title = apply_filters( 'the_title', $item->title, $item->ID );
        $title = apply_filters( 'nav_menu_item_title', $title, $item, $args, $depth );

        $item_output = $args->before;
        $item_output .= '<a'. $attributes .'>';
        $item_output .= $args->link_before . $title . $args->link_after;
        $item_output .= '</a>';
        $item_output .= $args->after;

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

2. 调整WordPress菜单输出代码 #

在主题header.php中，确保wp_nav_menu参数正确调用修改后的Navwalker，并设置支持的最大层级：

wp_nav_menu( array(
    'theme_location' => 'primary',
    'depth' => 3, // 设置支持的最大菜单层级，比如3级
    'container' => 'nav',
    'container_class' => 'navbar navbar-expand-lg navbar-light bg-light',
    'menu_class' => 'navbar-nav me-auto mb-2 mb-lg-0',
    'walker' => new Bootstrap_Navwalker(),
) );

3. 添加自定义CSS适配多级下拉 #

Bootstrap 5默认不支持多级下拉，需要添加CSS控制子菜单的显示与定位：

/* 多级子菜单基础定位 */
.dropdown-submenu {
    position: relative;
}

.dropdown-submenu .dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -6px;
    margin-left: -1px;
    border-radius: 0 0.5rem 0.5rem 0.5rem;
    display: none;
}

/* 鼠标hover时显示子菜单 */
.dropdown-submenu:hover > .dropdown-menu {
    display: block;
}

/* 响应式菜单适配 */
@media (max-width: 991px) {
    .dropdown-submenu .dropdown-menu {
        left: auto;
        top: auto;
        margin-left: 1.5rem;
        border-radius: 0.5rem;
    }
}

4. 后台配置多级菜单 #

进入WP后台外观 -> 菜单，拖拽菜单项创建多级结构（将子项拖到父项下方形成缩进），保存后前端即可显示多级子菜单。

内容的提问来源于stack exchange，提问作者abdo nasr