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#Parameters