为什么自定义NAV菜单在列表项目上产生这么多类？我可以以某种方式管理这个吗？

https://wordpress.stackexchange.com/questions/23

menus

16-10-2019
|

题

以下是一个示例。除当前项目外，每个项目都附上3个类别。

<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>

解决方案

我将在这一项方面反对大多数:)

是的，剥离它可能是个好主意。就我个人而言，我只保留 current-xxx 输入类并用 active~~, ，和 active-parent （用于活跃的父母或祖先项目）。~~

为什么？

在网络周围， 积极的 已成为活动菜单项的标准类（除了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支持）。使用子选择器（>）您可以以任何想要的方式有效地设计活跃的父母和活跃的孩子。

其他提示

这 wp_nav_menu 功能使您能够修改容器和菜单的ID和类。但不是李元素。

如果您看一下资源它正在构建LI元素（start_el（）函数）;您可以看到它正在使用过滤器nav_menu_css_class;该过滤器将带动您（字符串）的数组，并使用它来构建类标签。

注意：根据我在代码中看到的内容，如果将其传递给一个空数组。 WordPress仍将包含LI元素的类属性，它将只是空的。

所有这些课程都用于将JavaScript挂入诸如Superfish之类的东西中，而不仅仅是因为IE6。

另外，没有诸如 current_page_item, ，您将无法突出显示导航中的当前页面。

灵活性是关键。添加所有类，唯一的列表中唯一项目，使最终设计师在样式方面具有很大的灵活性。但是我确实同意，这是一系列课程。设计师是一个不错的HTML程序员，可以用更少的代码来完成同等的操作。

编辑：使我的意思更清楚，没有任何不尊重的意思

从一个技巧小马的代码中进行了修改，因为它使用当前版本的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));
}

我不建议将其削减。是的，标记看起来可能肿，但这是只要如果您希望自己的网站看起来不错，例如，您可以真正缩小样式的方式。请记住，IE6不本地支持多个选择器（即li.menu-item.current会破裂并默认为li.current），因此，如果您正在做任何花哨的CSS，并且希望它与IE6一起使用，则更好拥有很多课堂选择器，而不是不够的。

所以，实际上，你可以将列表添加到class =“菜单” ...但是，如果您要有一个以上的帖子类型的菜单，则需要菜单属性型post_type ...并且如果您想要进行更奇特的过滤，您也会从菜单项目 - ##类中受益。

请记住，没有人可能会看到您网站后面的实际代码，并且有多个类别的定义不会伤害任何东西。

@Ray Gulick：我讨厌潜水，但我同意@dan Gale，@eamann和 @insanity5902。 “膨胀”不会引起任何坦率的问题，并使设计师能够以许多灵活的方式将菜单主题。

我很好奇为什么“膨胀”困扰您？我知道这不是很漂亮，但几乎没有人会看到它。如果是数百个表演问题首先要解决的其他事情例如减少HTTP请求并剃光图像的尺寸，后者可能会有更大的好处。

许可以下： CC-BY-SA 和归因

不隶属于 wordpress.stackexchange