提问者:小点点

如何让我的wp_nav_menu单一类别页面突出显示父页面?


使用新的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 &#038; 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 &#038; 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类附加到顶级菜单项。它以这种方式适用于每一个其他页面,甚至在查看类别本身时也是如此,只是类别中没有一个页面。


共3个答案

匿名用户

我也有同样的问题。我找不到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 );