将id添加到wp_nav_menu中的菜单项

Question

我在Wordpress中使用wp_nav_menu来创建我的导航

输出类似于此(我已删除href链接)

    <nav id="pageNav">
        <ul id="menu-headernav" class="menu">
          <li><a href="">Home</a></li>
        <li><a href="">About</a></li>
        <li><a href="">Services</a></li>
        <li><a href="">Work</a></li>
        <li><a href="">Contact</a></li>
      </ul>         
    </nav>

我需要分别设置每个链接的样式.

如何在菜单中为每个(li)或(a)添加一个id,以便我可以设置它的样式.

Answer 1

对于a标记,您可以通过在主题的function.php文件中写入函数来添加id属性并挂钩到nav_menu_link_attributes过滤器.

查看WordPress核心:http: //core.trac.wordpress.org/browser/tags/3.6/wp-includes/nav-menu-template.php#L89

function my_id_attribute ($atts, $item, $args) {
  //develop your anchor tag ID nomenclature I'll call it $id
  $atts['id'] = $id;
  return $atts;
  }
add_filter('nav_menu_link_attributes', 'my_id_attribute', 10, 3);

对于li标记,您可以使用nav_menu_item_id过滤器来修改id属性.

function my_li_id_handler ($id, $item, $args) {
 //the $item variable is a WP_Post instance...handy properties are $item->post_title, $item->post_name and $item->menu_order
 //do your id nomenclature work here.
 return $id;
}
add_filter('nav_menu_item_id','my_li_id_handler', 10, 3);

Answer 2

您可以在 wordpress 中为每个菜单项添加一个类。转到“外观”-->“菜单”--> 然后在屏幕选项面板中，单击复选框以激活“CSS 类”。从那里您可以为您的 CSS 目标的菜单项分配唯一的选择器。