[英]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.