Question

如何完全更改WP中子菜单的布局？通常，WP生成菜单为UL＆gt; LI> UL>李。但我需要将其更改为：UL＆gt; LI> DIV＆gt; ...＆gt; DIV＆gt; 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

Wordpress自定义子菜单布局

1 个答案: