Question

我在我的主题中使用了三个主要导航，并且我尝试在所有主导航中使用自定义ID放置菜单的最终链接。

这就是我想要的：

<nav id="menu" role="navigation" class="menu-primary">
  <ul id="nav" class="menu">
    <li id="menu-item-418" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-418"><a href="#">About</a></li>
    <li id="menu-item-474" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-474"><a href="#">Work</a></li>
    <li id="menu-item-463" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-463"><a href="#">Blog</a></li>
    <li id="menu-item-416" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-416"><a href="#">Contact</a></li>
    <li id="back" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-491"><href="#header">back</a></li>
  </ul>
</nav>

如您所见，最终的li的ID为“返回”。知道如何在不使用js的情况下实现这一目标吗？我可以看到我如何改变课程，但不能改变ID。我这样做是为了CSS目的。

任何帮助将不胜感激！

Answer 1

您可以最后插入/注入另一个id作为自定义菜单项，而不是更改menu item/li

add_filter( 'wp_nav_menu_items', 'your_custom_menu_item');
function your_custom_menu_item ($items)
{
    $items .= '<li id="back" class="what-ever"><a href="#">Back</a></li>';
    return $items;
}

只需将代码段粘贴到functions.php中，它就会在您的菜单中添加自定义menu item。希望这会有所帮助。

还有另一种方法可以使用自定义menu和here is a nice example更改walker。

Answer 2

如果您使用wp_nav_menu，那么最好的方法是使用Wordpress提供的类。我认为没有办法在菜单项中添加特定的ID。

除非你用jQuery做到这一点......

Answer 3

您将需要使用JS / jQuery来执行此操作。 WordPress菜单是动态编写的，你不能只是进入主题文件并编辑li。

如果您的菜单不在同一页面上，那么您可以使用ID和第一个示例。您需要将#nav更改为每个菜单的UL ID，并重复一行3次，每个菜单一次。

$(document).ready(function() {
   $('#nav li').last().attr('id', 'back');
});

如果您的菜单在同一页面上，则需要使用如下所示的课程。您需要将#nav更改为每个菜单的UL ID，并重复一行3次，每个菜单一次。除非所有菜单都在UL上有一个类，否则你可以使用$('#classNameHere li').last().addClass('back');。

$(document).ready(function() {
   $('#nav li').last().addClass('back');
});

Wordpress：在wp_nav_menu中为自定义ID添加自定义ID

3 个答案: