Wordpress自定义子菜单布局

Question

如何完全改变WP子菜单的布局?通常WP生成的菜单为UL> LI> UL> LI。但我需要将其更改为:UL> LI> DIV>…>div> ul>…所以必须有额外的元素/包装子菜单。这些包装器还必须包含自定义CSS类。有没有办法做到这一点，通过一些挂钩或一些插件?

输出应该如下所示

<ul>
  <li>
    <a href="..."></a>
    <div class="sub">
      <div class="wrapper">
        <div class="section">
          <div class="title"><a href="..."></a></div>
          <ul>
            <li><a href="..."></a></li>
            ...
            <li><a href="..."></a></li>
          </ul>
        </div>
        <div class="section">
          <div class="title"><a href="..."></a></div>
          <ul>
            <li><a href="..."></a></li>
            ...
            <li><a href="..."></a></li>
          </ul>
        </div>
        ...
      </div>
    </div>
  </li>
  <li>
    <a href="..."></a>
    <div class="sub">
      <div class="wrapper">
        <div class="section">
          <div class="title"><a href="..."></a></div>
          <ul>
            <li><a href="..."></a></li>
            ...
            <li><a href="..."></a></li>
          </ul>
        </div>
        <div class="section">
          <div class="title"><a href="..."></a></div>
          <ul>
            <li><a href="..."></a></li>
            ...
            <li><a href="..."></a></li>
          </ul>
        </div>
        ...
      </div>
    </div>
  </li>
  ...
</ul>

谢谢

Answer 1

编辑显示菜单的模板(可能是header.php)，并找到wp_nav_menu函数。像这样添加或更新参数items_wrap、before和after:

wp_nav_menu(array(
    'menu' => 'your menu',
    // [...] existing menu options
    'items_wrap' => '<div><ul id="%1$s" class="%2$s">%3$s</ul></div>', // will put a div on ul
    'before' => '<div>', // before the link
    'after' => '</div>' // after the link
));

看到https://codex.wordpress.org/Function_Reference/wp_nav_menu参数