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中为每个菜单项添加一个类。转到“外观” - ＆gt;“菜单” - ＆gt;然后在屏幕选项面板中，单击复选框以激活“CSS类”。从那里，您可以为菜单项分配唯一的选择器，以便CSS定位。

将id添加到wp_nav_menu中的菜单项

2 个答案: