使用新的wp_nav_菜单系统,可以添加一个类别作为菜单项,因此在我的示例中,我有一个“news”类别,它是“About”的子菜单项。
关于(第页)
--新闻(类别)
--历史(第页)
--联系我们(第页)
突出显示CSS的菜单从当前菜单父菜单和当前菜单父菜单中选取,因此当我在子菜单部分时,当我访问“新闻”时,顶级菜单项(例如“关于”)将突出显示。
这很好,除了当我访问“新闻”类别中的帖子时,它与is_single()和in_类别(“新闻”)相匹配。
就我在Firebug中所看到的,“当前菜单父”和“当前菜单祖先”应用于“新闻”菜单项,但是它没有应用于“关于”顶层菜单项。
我在设置菜单时有什么遗漏吗?我试过使用一个定制的助行器,但是似乎初始菜单设置不正确?
似乎我唯一的解决方案(不诉诸讨厌的JQuery黑客)是创建一个“新闻”页面来查询新闻帖子,而不是指向新闻“类别”。
有什么想法吗?
谢谢,丹
更新代码样本09/09/2010
目前的方式,查看新闻类别中的单个页面http://www.example.com/2010/09/top-news-did-you-know/:
关于我们
<li id="menu-item-71" class="menu-item menu-item-type-taxonomy"><a href="http://www.example.com/category/events/">Events</a></li>
<li id="menu-item-70" class="menu-item menu-item-type-taxonomy current-post-ancestor current-menu-parent current-post-parent current-menu-parent"><a href="http://www.example.com/category/news/">News & views</a></li>
<li id="menu-item-88" class="menu-item menu-item-type-post_type"><a href="http://www.example.com/contact-us/">Contact Us</a></li>
所以您可以看到,“About Us”没有任何CSS类来表示它是当前查看页面的父级。
我认为它应该如何工作(老实说,如果它不这样做,那么它是一个由于缺乏实现而导致的错误):
关于我们
<li id="menu-item-71" class="menu-item menu-item-type-taxonomy"><a href="http://www.example.com/category/events/">Events</a></li>
<li id="menu-item-70" class="menu-item menu-item-type-taxonomy current-post-ancestor current-menu-parent current-post-parent current-menu-parent"><a href="http://www.example.com/category/news/">News & views</a></li>
<li id="menu-item-88" class="menu-item menu-item-type-post_type"><a href="http://www.example.com/contact-us/">Contact Us</a></li>
它将当前菜单上级当前菜单上级当前页面上级当前页面上级CSS类附加到顶级菜单项。它以这种方式适用于每一个其他页面,甚至在查看类别本身时也是如此,只是类别中没有一个页面。
我也有同样的问题。我找不到php黑客,所以我使用了javascript黑客:
function findAncestor(){
var currentParentLi = document.getElementsByClassName("current-menu-parent");
if(currentParentLi){
var currentAncestorLi = currentParentLi[0].parentNode.parentNode;
if(currentAncestorLi && currentAncestorLi.tagName=="LI"){
currentAncestorLi.className += " current-menu-ancestor";
}
}
}
把上面的代码放在一个文件夹中。js文件,然后在页面头部引用它,并在窗口上调用findAncestor()函数。空载,即:
<script type="text/javascript">
<!--
window.onload = function() {
findAncestor()
}
//-->
</script>
我已经尝试生成上面的问题,并且我能够获得类“current\u page\u parent”,因此现在您可以基于上面的内容应用CSS
您可能可以使用过滤器来实现这一点。我还没有测试过这个,但从逻辑上讲它应该可以工作。
function add_parent_class_to_nav( $atts, $item, $args ) {
$about_id = 12345; // Enter ID of about menu item
if ( in_category( 'news' ) ) {
if ( $item->ID === $about_id ) {
$atts['class'] = 'current-page-parent'; // Add the class needed to make the parent highlight
}
}
return $atts;
}
add_filter( 'nav_menu_link_attributes', 'add_parent_class_to_nav', 10, 3 );