WordPress中wp_nav_menu的container_class不生效问题咨询

我在页面头部传入参数数组调用导航菜单，代码如下：

<nav class="header__social-menu"> 
  <?php 
    $args = array( 
      'theme_location' => 'social-menu', 
      'container' => 'ul', 
      'container_class' => 'header__social-list', 
      'link_before' => '<li class="header__social-item"><a href="#" class="header__social-link">', 
      'link_after' => '</a></li>', 
    ); 
    wp_nav_menu( $args ); 
  ?> 
</nav>

但作为容器的ul元素并未被赋予设置的header__social-list类，而是默认的menu类。请问是否可以修改该容器类以遵循BEM方法论？

嘿，这个坑我之前踩过！问题出在你对wp_nav_menu参数的理解上——当你设置container => 'ul'时，WordPress会把这个ul当成额外的外层容器，但它本身默认就会生成一个带menu类的ul作为菜单列表，这时候你其实得到了两层嵌套的ul，而你设置的container_class是给了外层那个你没注意到的ul，不是你想要的菜单列表本身。

当然可以修改成符合BEM规范的结构，给你两个实用方案：

方案1：取消额外容器，直接给菜单列表加类 #

如果你不需要多余的外层容器，只想让菜单的ul带上header__social-list类，这么改就行：

<nav class="header__social-menu"> 
  <?php 
    $args = array( 
      'theme_location' => 'social-menu', 
      'container' => false, // 关闭默认的外层容器
      'menu_class' => 'header__social-list', // 给菜单本身的ul设置BEM类
      'link_before' => '<li class="header__social-item"><a class="header__social-link">', // 去掉固定的href="#"，保留类名即可
      'link_after' => '</a></li>', 
    ); 
    wp_nav_menu( $args ); 
  ?> 
</nav>

这样生成的结构就是nav.header__social-menu > ul.header__social-list > li.header__social-item > a.header__social-link，完全贴合BEM的层级命名规则。另外注意我把link_before里的href="#"删掉了，不然会覆盖你在后台菜单里设置的真实链接哦。

方案2：保留外层容器（适合需要额外包裹的场景） #

如果你确实需要一个外层容器（比如想加个div做布局控制），可以调整参数区分外层容器和菜单列表：

<nav class="header__social-menu"> 
  <?php 
    $args = array( 
      'theme_location' => 'social-menu', 
      'container' => 'div', // 外层用div当容器
      'container_class' => 'header__social-wrapper', // 给外层容器加BEM类
      'menu_class' => 'header__social-list', // 给菜单ul加目标类
      'link_before' => '<li class="header__social-item"><a class="header__social-link">', 
      'link_after' => '</a></li>', 
    ); 
    wp_nav_menu( $args ); 
  ?> 
</nav>

这种结构下，外层容器和菜单列表的类名都是符合BEM规范的，能满足更复杂的布局需求。

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