如何用WordPress Walker拆分下拉菜单为多列？含WP-Bootstrap-Navwalker方案

嘿，我来帮你搞定WordPress下拉菜单分栏的问题，不管是自定义Walker还是用WP-Bootstrap-Navwalker都有可行的方案，一步步来拆解：

核心思路是继承默认的Walker_Nav_Menu类，重写相关方法，在遍历菜单项时根据设定的规则（比如每3个项分一列）插入分栏的HTML结构（比如Bootstrap的row和col）。

步骤1：创建自定义Walker类 #

在你的主题functions.php里添加以下代码：

class Multi_Column_Walker extends Walker_Nav_Menu {
    // 记录当前列的项数
    private $column_count = 0;
    // 每列显示的项数
    private $per_column = 3;

    // 开始下拉菜单容器
    function start_lvl(&$output, $depth = 0, $args = null) {
        $this->column_count = 0;
        // 输出带row的下拉菜单容器
        $output .= '<ul class="dropdown-menu row">';
    }

    // 处理每个菜单项
    function start_el(&$output, $item, $depth = 0, $args = null, $id = 0) {
        $this->column_count++;
        // 如果是当前列的第一个项，添加col-md-4类
        $col_class = ($this->column_count % $this->per_column == 1) ? 'col-md-4' : '';
        
        $output .= '<li class="' . esc_attr($col_class) . '">';
        // 输出菜单项链接（复用默认逻辑）
        $output .= '<a class="dropdown-item" href="' . esc_attr($item->url) . '">' . esc_html($item->title) . '</a>';
    }

    // 结束菜单项
    function end_el(&$output, $item, $depth = 0, $args = null) {
        $output .= '</li>';
    }

    // 结束下拉菜单容器
    function end_lvl(&$output, $depth = 0, $args = null) {
        $output .= '</ul>';
    }
}

步骤2：调用自定义Walker #

在主题模板里（比如header.php）调用导航菜单时，指定使用这个Walker：

wp_nav_menu(array(
    'theme_location' => 'primary',
    'walker' => new Multi_Column_Walker(),
    'menu_class' => 'navbar-nav',
));

注意事项 #

• 可以调整$per_column的值来改变每列的项数，比如设为4就是4列
• 需要确保你的主题已经加载了Bootstrap的CSS，这样row和col-md-4类才能生效

如果你已经在用WP-Bootstrap-Navwalker，不需要完全重写，只需要修改它的部分逻辑，或者配合菜单后台的自定义类来实现。

步骤1：确保WP-Bootstrap-Navwalker已正确加载 #

先在functions.php里引入并注册：

require_once get_template_directory() . '/class-wp-bootstrap-navwalker.php';

register_nav_menus(array(
    'primary' => __('Primary Menu', 'your-theme'),
));

步骤2：修改Walker实现分栏逻辑 #

我们可以重写WP_Bootstrap_Navwalker的start_lvl和start_el方法，针对带有特定类的父菜单生成3列结构：

class WP_Bootstrap_Multi_Column_Navwalker extends WP_Bootstrap_Navwalker {
    private $column_count = 0;
    private $is_multi_column = false;

    function start_lvl(&$output, $depth = 0, $args = null) {
        // 检查父菜单项是否有dropdown-menu-3columns类
        $parent_class = !empty($args->menu_item_parent) ? get_post_meta($args->menu_item_parent, '_menu_item_classes', true) : array();
        $this->is_multi_column = in_array('dropdown-menu-3columns', $parent_class);
        
        $this->column_count = 0;
        // 如果是多列菜单，输出带row的容器
        $menu_class = $this->is_multi_column ? 'dropdown-menu row' : 'dropdown-menu';
        $output .= "<ul class=\"$menu_class depth_$depth\">";
    }

    function start_el(&$output, $item, $depth = 0, $args = null, $id = 0) {
        parent::start_el($output, $item, $depth, $args, $id);
        // 如果是多列菜单，给菜单项li添加col-md-4类
        if ($this->is_multi_column && $depth === 1) {
            $output = str_replace('<li', '<li class="col-md-4"', $output);
        }
    }
}

步骤3：在后台给父菜单添加类 #

进入WordPress后台「外观」→「菜单」，找到需要做成3列下拉的父菜单项，展开「CSS类」（如果没看到，点击右上角「屏幕选项」勾选「CSS类」），添加dropdown-menu-3columns类。

步骤4：调用修改后的Walker #

在header.php里调用菜单时使用这个自定义的Bootstrap Walker：

wp_nav_menu(array(
    'theme_location' => 'primary',
    'walker' => new WP_Bootstrap_Multi_Column_Navwalker(),
    'menu_class' => 'navbar-nav ms-auto',
));

样式调整（可选） #

如果下拉菜单的间距不合适，可以添加自定义CSS：

.dropdown-menu.row {
    padding: 1rem;
    width: 30rem; /* 调整下拉菜单宽度 */
}
.dropdown-menu.row .col-md-4 {
    margin-bottom: 0.5rem;
}

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