[英]Wordpress: Add custom ID to final li in wp_nav_menu
我在我的主題中使用了三個主要導航,我試圖在所有主要導航中使用自定義 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 的目的。
任何幫助將不勝感激!
您可以最后插入/注入另一個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;
}
只需將代碼片段粘貼到您的functions.php
,它就會在您的菜單中添加一個自定義menu item
。 希望這可以幫助。
還有另一種使用自定義walker
更改menu
方法, 這是一個很好的示例。
如果您使用wp_nav_menu
,那么最好的方法是使用 Wordpress 提供的類。 我認為沒有辦法將特定的 id 添加到菜單項。
除非你用jQuery來做這件事......
您將需要使用 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');
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.