在 wordpress 中自定义菜单

Question

我已经拥有一个使用 wp_nav_menu( $_menu_args ) 调用的菜单，其中

$_menu_args = ['theme_location' => $_theme_location,
       'menu_class'     => 'nav navbar-nav menu_top']; //custom theme

这会生成以下导航代码：

<div class="menu-menu_top_logged-container">
    <ul class="nav navbar-nav menu_top" id="menu-menu_top_logged">
        <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-340" id="menu-item-340">
            <a href="blablabla" title="By Celebration">By Celebration</a></li>
        <li class="menu-item menu-item-type-post_type menu-item-object-page current-page-ancestor menu-item-491 current-menu-item page_item" id="menu-item-491">
            <a href="blablabla" title="By Category">By Category</a></li>
        <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-487" id="menu-item-487">
            <a href="blablabla" title="My Profile">My Profile</a></li>
        <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-486" id="menu-item-486">
            <a href="blablabla" title="Help &amp; Support">Help &amp; Support</a></li>
    </ul?
</div>

我想在个人资料链接旁边添加一个通知文本，例如：

<a href="blablabla" title="My Profile"><span class="badge">2</span>My Profile</a>

我如何使用 wp_nav_menu 来实现这一点。需要有关如何自定义 wp_nav_menu 的帮助

谢谢

Answer 1

这将通过标题找到您的锚标记，并在文档加载时将徽章类添加到它。

<script>
$(document).ready(function(){
    $( 'a[title="My Profile"]').prepend('<span class="badge">2</span>');
})
</script>