向Wordpress wp_nav_menu添加不同的唯一类？

Question

我正在尝试在<img>生成的每个<li>中添加不同的wp_nav_menu()个标记。

意思是我希望wp_nav_menu生成这个：

<ul id="main-menu">
    <li id="menu-item-219" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-219">
        <a href="">
        <img id="icon-one" />
            Link One
        </a>
    </li>
    <li id="menu-item-220" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-220">
    <a href="">
        <img id="icon-two" />
        Link Two
        </a>
    </li>
</ul>

而不是这个（原始输出）：

<ul id="main-menu">
    <li id="menu-item-219" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-219">
        <a href="">
            Link One
        </a>
    </li>
    <li id="menu-item-220" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-220">
    <a href="">
        Link Two
        </a>
    </li>
</ul>

到目前为止，我正在尝试使用$link_before参数，但它会同时生成这两个参数，这意味着它在<img id="icon-one" /><img id="icon-two" />标记的中间执行<a>。

现在我正在寻找步行者，但我想知道是否有更清晰的方法去做，以及如何做？

Answer 1

我可能会使用纯CSS解决方案并将图像应用为背景图像。所以像这样：

#main-menu > li.menu-item:nth-child(1) > a {
    /* 1st background image here */
}
#main-menu > li.menu-item:nth-child(2) > a {
    /* 2nd background image here */
}

无需为了简单的显示问题而乱用PHP代码。

Answer 2

在WordPress菜单管理员中，可以为每个菜单项指定一个css类。这样，您可以使用background-image css属性来自定义每个菜单项。然后菜单呈现如下：

<ul id="main-menu">
    <li id="menu-item-219" class="icon-one menu-item menu-item-type-taxonomy menu-item-object-category menu-item-219">
        <a href="">
            Link One
        </a>
    </li>
    <li id="menu-item-220" class="icon-two menu-item menu-item-type-taxonomy menu-item-object-category menu-item-220">
    <a href="">
        Link Two
        </a>
    </li>
</ul>

你可以为CSS做这样的事情：

#main-menu .icon-one {
   background:url('../img/icon-one.jpg') no-repeat 0 0;
   padding: 0 0 0 50px; // depending on your icon
}

#main-menu .icon-two {
   background:url('../img/icon-two.jpg') no-repeat 0 0;
   padding: 0 0 0 50px; // depending on your icon
}

注意：如果您在菜单项admin块中没有看到css选项，请在右上角的选项面板中查看。