繁体   English   中英

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

[英]Adding different unique classes to Wordpress wp_nav_menu?

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

意思是我想要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>标签。

现在我正在看步行者,但我想知道是否有更清晰的方法来做,以及如何?

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

菜单编辑中的选项面板

在此输入图像描述

在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选项,请在右上角的选项面板中进行检查。

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM