<nav>
<ul id="menu">
<li class="item_1"><a href="#">Item 1</a></li>
<li class="item_2"><a href="#">Item 2</a></li>
<li class="item_3"><a href="#">Item 3</a></li>
<li class="item_4"><a href="#">Item 4</a></li>
<li class="item_5"><a href="#">Item 5</a></li>
<li class="item_6"><a href="#">Item 6</a></li>
<li class="item_7"><a href="#">Item 7</a></li>
<li class="item_8"><a href="#">Item 8</a></li>
</ul>
我已经能够理解如何自定义
<ul>
标签,从而摆脱了自动<div>
标签。但是现在,我想自定义<li>
标签,以便能够分配不同的class
名称,以通过CSS控制特定行为。当我使用wp_nav_menu()
时,输出如下: <ul id="menu">
<li id="menu-item-111" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-111"><a href="http://mydomain.com/dummy/fashion/">Fashion</a></li>
<li id="menu-item-112" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-112"><a href="http://mydomain.comdummy/documentary/">Documentary</a></li>
<li id="menu-item-113" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-113"><a href="http://mydomain.com/dummy/events/">Events</a></li>
<li id="menu-item-114" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-114"><a href="http://mydomain.com/dummy/portraits/">Portraits</a></li>
</ul>
我想摆脱
id
标记中的<li>
并更改class
以反映名称我要链接的页面。基本上,我想输出与这篇文章的第一段代码相同的东西。之所以这样做,是因为我使用了由纯文本格式的CSS控制的自定义图像。
这可能吗?我应该使用什么策略来克服这个问题?
#1 楼
使用自定义的助行器,删除所有不需要的内容并添加课程。这是我用来获取带有清晰标记的列表的助行器:T5_Nav_Menu_Walker_Simple。您还可以过滤
'nav_menu_css_class'
或'wp_nav_menu_items'
。但是在我看来,步行者课更容易理解和控制。评论
感谢Toscho,我刚刚发现在新版本的Wordpress(3.3)中,我们可以为每个菜单项添加自定义类fir,从而可以解决我的问题。我尝试了您向我建议的脚本(T5_Nav_Menu_Walker_Simple),该脚本确实剥离了
–基督徒
2011-12-26 21:20
@Christian您可以根据需要更改助行器,这只是一个非常基本的示例。要查看可用的信息,请向每个li添加一个print_r($ item,TRUE)。然后决定如何处理。 :)
– fuxia♦
2011-12-26 22:44
这为我指明了正确的方向,我需要的是wp_nav_menu,但是我需要更改“ container_class”参数以适合我的特定用例,在某些情况下,我在某种情况下将主菜单换成了另一个菜单,但需要类要与CSS保持一致。
– D. Dan
18年1月25日在15:16
#2 楼
转到外观>菜单-选择所需的菜单-转到右上角的“屏幕选项”,选择“ css类”-向每个菜单项添加一个类。.#3 楼
根据引导程序4.3的需要,将<li>
类设置为nav-link
:function add_menu_link_class($atts, $item, $args)
{
$atts['class'] = 'nav-link';
return $atts;
}
add_filter('nav_menu_link_attributes', 'add_menu_link_class', 1, 3);
还可以在该数组中取消设置
id
属性。#4 楼
正如最后提到的那样,您可以通过外观>菜单添加自己的类,并在屏幕选项中勾选CSS类。在助行器中,您可以通过以下方式访问您在其中输入的内容:$item_output .= '<a'. $attributes .' class="'. $item->classes[0].'">';
我什至用它在菜单中添加了预先命名的图像-一点点,但可以。
<img src="theme/images/navigation/'.$item->classes[0].'" width="48" height="48">
评论
在这里您可以在ul> li> a sdtuts.com/wordpress-add-custom-class-in-wp_nav_menu-links中添加其他类