html - Wordpress 自定义子菜单布局

Question

我怎样才能完全改变WP中子菜单的布局？ 通常 WP 生成菜单为 UL > LI > UL > LI。但我需要将其更改为:UL > LI > DIV > ... > DIV > UL > ... 所以子菜单必须有额外的元素/包装。这些包装器还必须包含自定义 CSS 类。 有没有办法通过一些 Hook 或一些插件来做到这一点？

输出应该是这样的

<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