it-swarm.cn

为什么Custom Nav Menus会在列表项上生成这么多类?我能以某种方式管理这个吗?

以下是一个例子。每个项目附加3个类别,当前项目除外,其中有6个。我可以以某种方式减少这个吗?

<ul id="menu-global-nav" class="sf-menu">
<li id="menu-item-63" class="menu-item menu-item-type-post_type current-menu-item page_item page-item-5 current_page_item menu-item-63"><a href="#">Home</a></li>
<li id="menu-item-30" class="menu-item menu-item-type-post_type menu-item-30"><a href="#">Services</a>
   <ul class="sub-menu">
   <li id="menu-item-39" class="menu-item menu-item-type-post_type menu-item-39"><a href="#">Case Studies</a></li>
   <li id="menu-item-38" class="menu-item menu-item-type-post_type menu-item-38"><a href="#">Story Discovery</a></li>
   </ul>
</li>
<li id="menu-item-32" class="menu-item menu-item-type-post_type menu-item-32"><a href="#">Company</a></li>
<li id="menu-item-29" class="menu-item menu-item-type-post_type menu-item-29"><a href="#">Why Case Studies?</a></li>
<li id="menu-item-28" class="menu-item menu-item-type-post_type menu-item-28"><a href="#">Case Study Showcase</a></li>
<li id="menu-item-27" class="menu-item menu-item-type-post_type menu-item-27"><a href="#">Resources</a></li>
<li id="menu-item-26" class="menu-item menu-item-type-post_type menu-item-26"><a href="#">Online Store</a></li>
<li id="menu-item-25" class="menu-item menu-item-type-post_type menu-item-25"><a href="#">Contact Us</a></li>
</ul>
6
Ray Gulick

我在这一个上反对多数:)

是的,将它剥离是一个好主意。就个人而言,我只保留current-xxx类型类并用active替换它们active-parent(用于活动父项或祖先项)。

为什么?

  • 在网络上,active已成为活动菜单项的标准类(除此之外WP之间有不一致的类命名约定它的'自己的类名)。
  • 你可以编写更少的CSS规则;您节省的带宽可能不多,但它确实使CSS文件更具可读性

更新的代码:

// for custom menus 
add_filter('nav_menu_css_class', 'normalize_wp_classes', 10, 2);

// for the page menu fallback (wp_list_pages)
add_filter('page_css_class', 'normalize_wp_classes', 10, 2);

/**
 * @param  $classes array
 * @param  $item object
 * @return array
 */
function normalize_wp_classes(array $classes, $item = null){

  // old classes to be replaced with 'active'
  $replacements = array(
    'current-menu-item',
    'current-menu-parent',
    'current-menu-ancestor',
    'current_page_item',
    'current_page_parent',
    'current_page_ancestor',
  );

  // if any of the classes above are present,
  // return an array with a single class ('active')
  return array_intersect($replacements, $classes) ? array('active') : array();
}

更新:对于使用此代码的任何人,不再需要active-parent类(除非您仍需要IE 6支持)。使用子选择器(>),您可以以任何方式有效地为活动父级和活动子项设置样式。

7
onetrickpony

修改了One Trick Pony的代码,因为它对我的当前版本的WP(3.5.1)不起作用。

添加了虚线类WP现在包括页面层次结构类的下划线和虚线版本。

更改array_diff - > array_intersect作为diff返回所有类而不是筛选列表。

// for custom menus
add_filter('nav_menu_css_class', 'normalize_wp_classes', 10, 2);

// for the page menu fallback (wp_list_pages)
add_filter('page_css_class', 'normalize_wp_classes', 10, 2);

/**
 * @param  $classes array
 * @param  $item object
 * @return array
 */
function normalize_wp_classes($classes, $item){

  // old class => new class
  $replacements = array(
    'current-menu-item'     => 'active',
    'current-menu-parent'   => 'active-parent',
    'current-menu-ancestor' => 'active-parent',
    'current_page_item'     => 'active',
    'current_page_parent'   => 'active-parent',
    'current_page_ancestor' => 'active-parent',
    'current-page-item'     => 'active',
    'current-page-parent'   => 'active-parent',
    'current-page-ancestor' => 'active-parent'
  );

  // do the replacements above
  $classes = strtr(implode(',', $classes), $replacements);
  $classes = explode(',', $classes);

  // remove any classes that are not present in the replacements array,
  // and return the result

  return array_unique(array_intersect(array_values($replacements), $classes));
}
4
Nicholas Turbanov

所有这些类都是为了有用的挂钩到像超级鱼这样的东西,不仅仅是因为IE6。

此外,如果没有current_page_item之类的类,您将无法突出显示导航中的当前页面。

灵活性是关键。添加所有类,列表中唯一项的唯一类,为最终设计师提供了很多样式的灵活性。但我确实同意,这是一个很重要的课程。一个体面的HTML程序员,设计师可以用更少的代码做同样的事情。

编辑:更明确我的意思,没有不敬的意图

4
Dan Gayle

wp_nav_menu 函数使您能够修改容器和菜单的ID和类。但不是LI元素。

如果你看一下它在构建LI元素(start_el()函数)的 ;您可以看到它正在使用过滤器nav_menu_css_class;过滤器将获取您给它的数组(字符串)并使用它来构建类标记。

注意:从我在代码中看到的,如果你传递一个空数组。 Wordpress仍然会包含LI元素的class属性,它只是空的。

4
Ryan Gibbons

我不建议把它削减。是的,标记可能看起来很臃肿,但这是唯一方式,如果你希望你的网站看起来很好,你可以真正缩小样式,比如说,IE6。请记住,IE6本身不支持多个选择器(即li.menu-item.current将中断并默认为li.current),所以如果你正在做任何花哨的CSS并希望它与IE6一起工作,那么它会更好有很多类选择器可用而不是。

所以,实际上,你可以将列表缩减为class =“menu-item”...但是如果你将要有一个菜单有多个帖子类型,你需要menu-item-type-post_type ...如果你想进行更好的过滤,你也可以从菜单项 - ##类中受益。

请记住,没有人可能会看到您网站背后的实际代码,并且定义了多个类不会对任何事情造成伤害。

2
EAMann

@Ray Gulick:我讨厌潜入,但我同意@Dan Gale,@ EAMann和@Insanity5902。 “臃肿”不会导致任何难以理解的问题,并使设计师能够以很多灵活的方式对菜单进行主题化。

我很好奇为什么“膨胀”困扰你?我知道它不漂亮,但旁边没有人会看到它。如果它的性能问题是数百个 其他要解决的问题 ,例如减少HTTP请求和削减图像的大小,后者可能会有一个数量级更多的好处。

2
MikeSchinkel