Wordpress:将自定义 ID 添加到 wp_nav_menu 中的最终 li

Posted

技术标签:

【中文标题】Wordpress:将自定义 ID 添加到 wp_nav_menu 中的最终 li【英文标题】:Wordpress: Add custom ID to final li in wp_nav_menu 【发布时间】:2012-11-18 22:43:32 【问题描述】:

我在我的主题中使用了三个主要导航,并尝试在所有主要导航中放置一个带有自定义 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 为“back”。知道如何在不使用 js 的情况下完成此操作吗?我可以看到如何更改课程,但不能更改 ID。我这样做是为了 CSS 目的。

任何帮助将不胜感激!

【问题讨论】:

我是否正确地说您正在尝试将相同的 id 应用于三个菜单中的最后一个链接?一个 id 只能使用一次,如果一个类被分配了 3 次,则应该使用它。如果你不是通过 JS 引用它,那你为什么需要它作为一个 id? 【参考方案1】:

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

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;

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

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

【讨论】:

【参考方案2】:

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

除非你用 jQuery 来做这件事……

【讨论】:

【参考方案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:将自定义 ID 添加到 wp_nav_menu 中的最终 li的主要内容,如果未能解决你的问题,请参考以下文章

php 将自定义WP图像大小添加到“媒体库设置”

将自定义JavaScript从帖子添加到

将自定义类添加到 WordPress 导航中的锚标记

将自定义 css 添加到 wordpress 中的页面模板

php 将自定义链接添加到使用wp_nav_menu()函数的菜单的末尾

PHP 将自定义帖子类型添加到rss feed [WordPress]