Question

使用新的wp_nav_menu系统，可以将类别添加为菜单项，因此在我的示例中，我有一个“新闻”类别，它是“关于”的子菜单项。

关于（页面）

-新闻（类别）

-历史（页面）

-与我们联系（页面）

突出显示CSS的菜单是从current-menu-parent和current-menu-ancestor中拾取的，因此，当我进入子菜单部分时，访问“'时会突出显示顶层菜单项（例如'About'）。新闻”。

除了当我访问“新闻”类别中的匹配is_single（）和in_category（'news'）的帖子时，此方法还不错。

据我在Firebug中看到的那样，“当前菜单父级”和“当前菜单祖先”被应用于“新闻”菜单项，但是它不适用于“关于”顶层菜单项目。

设置菜单时是否缺少某些内容？我尝试使用自定义的助行器，但是似乎初始菜单祖先的设置不正确？

似乎我唯一的解决方案（不求助于讨厌的JQuery hack）是创建一个“新闻”页面来查询新闻，而不是指向新闻“类别”。

有什么想法吗？

谢谢，丹

使用代码示例更新09/09/2010

当前状态，在新闻类别http://www.example.com/2010/09/top-news-did-you-know/中查看单个页面：

About Us

<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类来表明它是当前查看页面的父级。

我认为它应该如何工作（老实说，如果不这样做，则由于缺乏实施，这是一个错误）：

About Us

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

这具有当前菜单祖先current-menu-parent current_page_parent current_page_ancestor CSS类附加到顶级菜单项。这种方式适用于所有其他页面，甚至在查看类别本身时，也不会在类别中的单个页面上起作用。

Answer 1

我也遇到了同样的问题。我找不到php hack，因此我使用了一个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文件中，然后在页面顶部引用它，并在window.onload上调用findAncestor（）函数，即：

<script type="text/javascript">
<!--
window.onload = function() {
    findAncestor()
}
//-->
</script>

Answer 2

您可能可以使用过滤器执行此操作。我还没有测试过，但是从逻辑上讲应该可以。

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

Answer 3

我尝试生成上述问题，并且能够获取“ current_page_parent”类，因此现在您可以基于上述应用CSS

如何获得wp_nav_menu单类别页面以突出显示父级？

3 个答案: