如何实现WordPress子菜单每4个<li>标签自动换行

我来帮你搞定这个菜单分组换行的需求！核心思路是给目标子菜单项加个计数器，每输出4个就闭合当前的菜单容器并重新开启一个，这样前端就能按照4个一组的方式换行显示了。

修改后的完整PHP代码 #

<ul class="rd-navbar-nav">
<?php $count = 0; $submenu = false; foreach( $menuitems as $item ): $link = $item->url; $title = $item->title; // item does not have a parent so menu_item_parent equals 0 (false) if ( !$item->menu_item_parent ): // save this id for later comparison with sub-menu items $parent_id = $item->ID; ?>
<li>
<a href="<?php echo $link; ?>" class="title">
<?php echo $title; ?>
</a>
<?php endif; ?>
<?php if ( $parent_id == $item->menu_item_parent ): ?>
<?php if ( !$submenu ): $submenu = true; $sub_item_count = 0; // 初始化子菜单项计数器 ?>
<ul class="rd-navbar-megamenu">
<?php endif; ?>
<li>
<ul class="rd-megamenu-list">
<a href="<?php echo $link; ?>" class="title"><?php echo $item->title; ?></a>
</ul>
</li>
<?php $sub_item_count++; // 每输出一个子项，计数器加1 ?>
<?php 
// 检查是否达到4个，且下一个item仍属于当前父菜单，触发换行
if ($sub_item_count % 4 == 0 && isset($menuitems[$count+1]) && $menuitems[$count+1]->menu_item_parent == $parent_id): 
?>
</ul><!-- 关闭当前行的菜单容器 -->
<ul class="rd-navbar-megamenu"><!-- 开启新行的菜单容器 -->
<?php endif; ?>
<?php if ( $menuitems[ $count + 1 ]->menu_item_parent != $parent_id && $submenu ): ?>
</ul>
<?php $submenu = false; endif; ?>
<?php endif; ?>
<?php if ( $menuitems[ $count + 1 ]->menu_item_parent != $parent_id ): ?>
</li>
<?php $submenu = false; endif; ?>
<?php $count++; endforeach; ?>
</ul>

关键修改点说明 #

• 初始化计数器：在第一次打开rd-navbar-megamenu容器时，新增$sub_item_count = 0;，用于统计当前组内的子菜单项数量。
• 递增计数器：每输出一个目标<li><ul class="rd-megamenu-list">...</ul></li>标签后，执行$sub_item_count++;更新计数。
• 触发换行逻辑：当计数器是4的倍数，且下一个菜单项仍属于当前父菜单时，闭合当前的rd-navbar-megamenu容器，同时开启一个新的容器，实现分组换行。

修改后生成的HTML示例（以"Ostali proizvodi"菜单为例） #

<li>
<a href="http://localhost:8080/company/ostali-proizvodi/" class="title"> Ostali proizvodi </a>
<ul class="rd-navbar-megamenu">
<li>
<ul class="rd-megamenu-list">
<a href="http://localhost:8080/company/profilisani-limovi/" class="title">Profilisani limovi</a>
</ul>
</li>
<li>
<ul class="rd-megamenu-list">
<a href="http://localhost:8080/company/profilisani-limovi/" class="title">Vijčana roba</a>
</ul>
</li>
<li>
<ul class="rd-megamenu-list">
<a href="http://localhost:8080/company/profilisani-limovi/" class="title">Komunalna oprema</a>
</ul>
</li>
<li>
<ul class="rd-megamenu-list">
<a href="http://localhost:8080/company/profilisani-limovi/" class="title">Profili za suhu gradnju</a>
</ul>
</li>
</ul>
<ul class="rd-navbar-megamenu">
<li>
<ul class="rd-megamenu-list">
<a href="http://localhost:8080/company/profilisani-limovi/" class="title">Ostali</a>
</ul>
</li>
</ul>
</li>

这样你的子菜单就会自动按4个一组拆分到不同的rd-navbar-megamenu容器中，前端只需要保证这个容器是块级显示（或者用flex等布局），就能实现每4个换行的效果啦！

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