WordPress：将空列表项添加到导航菜单

Posted 2023-03-05

【中文标题】WordPress：将空列表项添加到导航菜单

【英文标题】：WordPress: Add empty list-item to navigation menu

【发布时间】：2013-09-10 14:31:27

【问题描述】：

<ul id="menu-primary">
    <li></li>
    <li></li>
    <li></li><li class="stretcher"></li> /* add adjacent to the last menu item */
</ul>

我需要将<li class="stretcher"></li> 与显示的最后一个菜单项完全相同，添加到带有id="menu-primary" 的菜单中。

（原因是为了去掉部分浏览器产生的空格。类似于本题第一个答案：Fluid width with equally spaced DIVs）

【参考方案1】：

我会用过滤器添加它：

add_filter('wp_nav_menu_items', 'add_stretcher', 10, 2);
function add_stretcher($items, $args) 
  if ($args->theme_location == 'primary') 
    $items .= '<li class="stretcher"></li>';
  
  return $items;

【讨论】：

它不工作。没有看到任何添加到菜单中。这不是注册到主题的主菜单，如果有区别，我只是将菜单名称命名为“primary”。

暂时尝试去掉“if”，只使用$items .= '<li class="stretcher"></li>'; return $items;作为函数体。我只是添加了这个，所以担架 li 不会添加到每个菜单中。

现在我看到了，但它与标记中的最后一个菜单项（如上所示）不相邻。

有趣——也许尝试$items = rtrim($items) . '<li class="stretcher"></li>'; 而不是$items .= '<li class="stretcher"></li>'; 以消除现有项目上的任何空格/换行符等？

现在剩下的就是针对这个特定的菜单，但我可以没有它。

【参考方案2】：

您可以使用 jQuery 使用以下代码添加它

<script>
   jQuery(document).ready(function()
      jQuery("#menu-primary li").last().before("<li class="stretcher"></li>");                             
   );
</script>