使用wp_nav_menu时如何通过CSS为li分组加div实现2+1列布局

优先推荐：纯CSS实现视觉效果 #

不需要修改任何现有DOM结构、不需要添加自定义类，仅需追加以下CSS即可实现你要的布局：

/* 可选：确保盒模型计算一致，避免内边距/边框撑宽元素 */
ul li {
  box-sizing: border-box;
}
/* 选中第三个顶级菜单项，设置宽度100%触发换行 */
ul li:nth-child(3) {
  width: 100%;
}

实现原理 #

你原本的ul已经开启了flex换行，前两个li设置了flex-grow:1和width:33%，会自动平分第一行的剩余空间，各占50%宽度；第三个li宽度设为100%后会自动换到第二行，占满整行宽度，完全匹配你需要的「第一行2个、第二行1个」的显示效果。

若需DOM层面添加div包裹的实现方案 #

CSS无法直接修改DOM结构，如果你确实需要生成你给出的期望DOM结构（用于特殊交互或样式需求），可以选择以下两种方案：

方案1：WordPress自定义Walker修改菜单输出 #

将以下代码添加到主题的functions.php文件中：

class Custom_Nav_Walker extends Walker_Nav_Menu {
  function start_el( &$output, $item, $depth = 0, $args = null, $id = 0 ) {
    static $top_count = 0;
    if ($depth === 0) $top_count++;

    // 第一个顶级菜单项前插入col-2容器开头
    if ($depth === 0 && $top_count === 1) {
      $output .= '<div class="col-2">';
    }
    // 第三个顶级菜单项前闭合col-2，插入col-4容器开头
    if ($depth === 0 && $top_count === 3) {
      $output .= '</div><div class="col-4">';
    }
    parent::start_el($output, $item, $depth, $args, $id);
  }

  function end_el( &$output, $item, $depth = 0, $args = null ) {
    parent::end_el($output, $item, $depth, $args);
    static $end_count = 0;
    if ($depth === 0) $end_count++;
    // 最后一个顶级菜单项后闭合col-4容器
    if ($depth === 0 && $end_count === 3) {
      $output .= '</div>';
    }
  }
}

在调用wp_nav_menu的位置指定walker参数即可：

wp_nav_menu([
  'theme_location' => '替换为你的菜单注册位置',
  'walker' => new Custom_Nav_Walker()
]);

方案2：JS动态修改DOM #

如果不想修改PHP代码，可通过前端JS动态包裹元素：

const topMenuItems = document.querySelectorAll('ul > li');
if (topMenuItems.length >= 3) {
  // 包裹前两个菜单项
  const col2 = document.createElement('div');
  col2.className = 'col-2';
  topMenuItems[0].before(col2);
  col2.append(topMenuItems[0], topMenuItems[1]);
  // 包裹第三个菜单项
  const col4 = document.createElement('div');
  col4.className = 'col-4';
  topMenuItems[2].before(col4);
  col4.append(topMenuItems[2]);
}

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