home icon首页 / wordpress / wp_nav_menu（），如何更改<li>类？

wp_nav_menu（），如何更改<li>类？

    • vote up icon 17 vote down icon
    • translation icon
    • view icon70949 calendar icon2011-12-26

    我正在为我的网站构建菜单.静态看起来像这样:

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

    我想摆脱<li>标记中的<li>,并更改class以反映页面名称我想链接到.基本上,我想输出与这篇文章的第一段代码相同的东西.

    之所以这样做,是因为我使用了由纯文本CSS所控制的自定义图像.

    这可能吗?我应该使用什么策略来克服这个问题?

    theme-development menus navigation
    • 在这里您可以在ul> li> a中添加其他类 https://sdtuts.com/wordpress-add-custom-class-in-wp_nav_menu-links/

4  个回答

  • 投票数
    • accept answer icon
    • translation icon
    • calendar icon 2011-12-26

    使用自定义助行器,删除不需要的所有内容,然后添加课程.这是我用来获得带有清晰标记的列表的助行器: T5_Nav_Menu_Walker_Simple .

    您还可以过滤'nav_menu_css_class'或'wp_nav_menu_items'.但是在我看来,步行者课更容易理解和控制.

    • 感谢Toscho,我刚刚发现在新版本的Wordpress(3.3)中,我们可以为每个菜单项添加自定义类fir,以解决我的问题.我尝试了您向我建议的脚本(T5_Nav_Menu_Walker_Simple),该脚本确实删除了
    • 中的所有内容,我们如何控制要保留的元素?
  • @Christian您可以根据需要更改助行器,这只是一个非常基本的示例.要查看可用的信息,请向每个`li`添加一个`print_r($item,TRUE)`.然后决定如何处理.:)
  • 这为我指明了正确的方向,我需要的是** wp_nav_menu **,**但是**我需要更改'container_class'参数,以适合我的特定用例,在某些情况下,我会交换主菜单中的另一个菜单,但需要使类与CSS保持一致.
    • translation icon
    • calendar icon 2012-09-22

    转到外观>菜单-选择所需的菜单-转到右上角的"屏幕选项",选择" css类"-向每个菜单项添加一个类.

    • translation icon
    • calendar icon 2019-04-22

    根据引导程序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属性.

    • translation icon
    • calendar icon 2013-06-13

    作为最后提到的张贴者,您可以通过 appearance>菜单添加自己的类,并在屏幕选项中勾选CSS类.在助行器中,您可以通过以下方式访问您在此处输入的内容:

     $item_output .= '<a'. $attributes .' class="'. $item->classes[0].'">';

    我什至用它在菜单中添加了预先命名的图像-一点点的胡扯,但它可以工作.

     <img src="theme/images/navigation/'.$item->classes[0].'" width="48" height="48">