为什么自定义导航菜单在列表项上生成这么多类?我能设法做到这一点吗?

时间:2010-08-11 作者:Ray Gulick

下面是一个示例。每个项目附带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 个回复
最合适的回答,由SO网友:onetrickpony 整理而成

在这一点上,我反对大多数人:)

是的,把它去掉是个好主意。就我个人而言,我只保留current-xxx 键入类并将其替换为active ,及active-parent (对于活动父项或父项) 为什么

  • 在网络上,active已成为活动菜单项的标准类(除此之外,WP在自己的类名之间有不一致的类命名约定)
    // 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的支持)。使用子选择器(>) 您可以根据需要有效地设置活动父对象和活动子对象的样式

SO网友:Dan Gayle

所有这些类都是为了将javascript与superfish之类的东西挂钩,而不仅仅是因为IE6

同样,没有一个类,比如current_page_item, 您将无法在导航栏中突出显示当前页面

灵活性是关键。添加所有类,为列表中的唯一项添加唯一类,为最终设计师提供很大的样式灵活性。但我确实同意,这是一堆课程。作为一名优秀的HTML程序员,设计师可以用更少的代码完成同样的工作

编辑:让我的意思更清楚,没有不尊重的意思

SO网友:Ryan Gibbons

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

如果你看看source 它正在构建LI元素的位置(start\\u el()函数);您可以看到它正在使用filter nav_menu_css_类;过滤器将获取您给它的数组(字符串),并使用它来构建类标记

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

SO网友:Nicholas Turbanov

从一个技巧小马的代码修改而来,因为它不适用于我当前版本的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));
}
SO网友:EAMann

我不建议你把它删掉。是的,标记可能看起来很臃肿,但如果你想让你的网站在IE6中看起来不错,这是唯一一种缩小样式范围的方法。请记住,IE6本机不支持多个选择器(即li.menu-item.current将中断并默认为li.current),因此如果您正在制作任何花哨的CSS并希望它与IE6配合使用,最好有大量可用的类选择器,而不是不够

因此,实际上,您可以将列表缩减为class=“menu item”。。。但是如果你想拥有一个包含多个post类型的菜单,你需要menu-item-type-post\\u type。。。如果你想做更有趣的过滤,你也会从菜单项-##类中受益

请记住,没有人可能会看到您站点背后的实际代码,定义多个类不会有任何影响

SO网友:MikeSchinkel

@雷·古力克:我不喜欢潜水,但我同意《丹·盖尔》、《伊曼》和《疯狂5902》。“膨胀”不会造成任何可能的问题,并使设计师能够以多种灵活的方式为菜单设置主题

我很好奇为什么“膨胀”会困扰你?我知道它不漂亮,但几乎没有人会看到它。如果它是一个性能问题,那就是数百个other things to address first 例如减少HTTP请求和缩小图像大小,后者可能会带来更大的好处

结束

相关推荐