为什么自定义NAV菜单在列表项目上产生这么多类?我可以以某种方式管理这个吗?
-
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请求并剃光图像的尺寸,后者可能会有更大的好处。