1

我试图<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>

现在我正在研究步行者，但我想知道是否有更清晰的方法，以及如何做到这一点？

4

2 回答 2

2

我可能会使用纯 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 代码。

于 2013-05-14T18:36:54.217 回答
1

菜单编辑中的选项面板

在此处输入图像描述

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

<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
}

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

于 2013-05-14T21:06:06.607 回答