WordPress导航菜单适配Bootstrap下拉导航的代码修改方法

问题原因 #

• wp_nav_menu 默认输出结构与 Bootstrap 导航要求不匹配
• 原代码中使用的 my_menu_li_class、my_menu_a_class 是 WordPress 不支持的自定义参数，不会生效
• 原代码中 theme-location 参数名书写错误（正确为 theme_location，下划线分隔），会导致菜单无法正确匹配已注册的菜单位置

实现步骤 #

1. 添加自定义导航 Walker 类 #

将以下代码添加到主题的 functions.php 文件中，该类会重写导航输出逻辑，完全匹配 Bootstrap 规范：

class Bootstrap_Walker_Nav_Menu extends Walker_Nav_Menu {
    // 重写子菜单起始输出，替换默认sub-menu为Bootstrap下拉容器
    public function start_lvl( &$output, $depth = 0, $args = null ) {
        $indent = str_repeat( "\t", $depth );
        $output .= "\n$indent<div class=\"dropdown-menu\">\n";
    }

    // 重写子菜单结束输出
    public function end_lvl( &$output, $depth = 0, $args = null ) {
        $indent = str_repeat( "\t", $depth );
        $output .= "$indent</div>\n";
    }

    // 重写单个菜单项输出
    public function start_el( &$output, $item, $depth = 0, $args = null, $id = 0 ) {
        $item_classes = empty( $item->classes ) ? array() : (array) $item->classes;
        $li_classes = array( 'nav-item' );

        // 有子菜单的顶级li自动加dropdown类
        if ( in_array( 'menu-item-has-children', $item_classes ) ) {
            $li_classes[] = 'dropdown';
        }
        // 当前菜单项/父菜单项自动加active类
        if ( in_array( 'current-menu-item', $item_classes ) || in_array( 'current-menu-parent', $item_classes ) ) {
            $li_classes[] = 'active';
        }
        $output .= '<li class="' . esc_attr( implode( ' ', $li_classes ) ) . '">';

        // 组装a标签属性
        $attributes = '';
        $attributes .= ! empty( $item->attr_title ) ? ' title="' . esc_attr( $item->attr_title ) . '"' : '';
        $attributes .= ! empty( $item->target ) ? ' target="' . esc_attr( $item->target ) . '"' : '';
        $attributes .= ! empty( $item->xfn ) ? ' rel="' . esc_attr( $item->xfn ) . '"' : '';
        $attributes .= ! empty( $item->url ) ? ' href="' . esc_attr( $item->url ) . '"' : '';

        // 所有a标签统一加js-scroll-trigger，匹配原有需求
        $a_classes = array( 'js-scroll-trigger' );
        // 顶级a加nav-link类
        if ( $depth == 0 ) {
            $a_classes[] = 'nav-link';
            // 顶级有子菜单的a标签加下拉触发属性
            if ( in_array( 'menu-item-has-children', $item_classes ) ) {
                $a_classes[] = 'dropdown-toggle';
                $attributes .= ' data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"';
            }
        }
        // 子菜单内的a标签加dropdown-item类
        if ( $depth > 0 ) {
            $a_classes[] = 'dropdown-item';
        }
        $attributes .= ' class="' . esc_attr( implode( ' ', $a_classes ) ) . '"';

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

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

    // 重写菜单项结束输出，避免多余标签
    public function end_el( &$output, $item, $depth = 0, $args = null ) {
        $output .= "</li>\n";
    }
}

2. 替换原有wp_nav_menu调用代码 #

修正参数错误，传入自定义Walker实例，适配Bootstrap类名：

<?php 
wp_nav_menu(array(
    'theme_location' => 'header_menu', // 修正原参数名的横杠为下划线
    'menu_class' => 'nav nav-tabs', // 匹配Bootstrap导航类
    'container' => false, // 去掉默认的div包裹，如需保留可改为'container' => 'nav'
    'walker' => new Bootstrap_Walker_Nav_Menu()
)); 
?>

输出效果说明 #

最终生成的HTML结构会完全匹配你提供的Bootstrap官方示例：

• 普通菜单项：<li class="nav-item"><a class="nav-link js-scroll-trigger" href="#">链接文本</a></li>
• 带下拉的菜单项：父级li自动加dropdown类，a标签自动加下拉触发属性，子菜单替换为div.dropdown-menu容器，内部子链接自动加dropdown-item类
• 当前页面对应的菜单项会自动加上active类，无需手动维护

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