3

我在 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，以便我可以设置它的样式。

4

2 回答 2

6

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

于 2013-08-16T18:39:54.737 回答
6

对于a标签，您可以通过在主题的 function.php 文件中写入 function 来添加 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);
于 2013-08-16T15:19:02.453 回答