子页面上的导航突出显示（wordpress）

Question

当您单击此网页上的导航时，导航元素会保持突出显示状态。如果您导航到其中一个内页，突出显示就会消失。我们如何才能在该页面的子页面上保持突出显示？

http://www.allinsure.ca/services/ - 尝试点击子页面；服务上的灰色突出显示不再存在。适用于所有带有子页面的页面。

关于如何解决这个问题的任何想法？我还注意到面包屑不会直接返回到前一页——而是链接到投资组合类别。

也许有一种方法可以说“选择此页面后，突出显示此导航项”。

我们正在使用 Cherry 框架。那和wordpress都是最新的。

谢谢大家！

Answer 1

当您在子页面上时，请查看 wordpress 为您的主导航设置的“current-page-ancestor”类。

所以你可以用纯 css 解决这个问题。

只需将 main-style.css 中的这一部分更改为：

.header .nav__primary .sf-menu li.current-menu-item a, 
.header .nav__primary .sf-menu .sfHover a,     
.header .nav__primary .sf-menu .current-menu-parent a{
   background: none repeat-x scroll 0 0 #58585a;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
   color: #fff;
}

到：

.header .nav__primary .sf-menu li.current-menu-item a, 
.header .nav__primary .sf-menu .sfHover a,     
.header .nav__primary .sf-menu .current-menu-parent a,
.header .nav__primary .sf-menu li.current-page-ancestor a{
   background: none repeat-x scroll 0 0 #58585a;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
   color: #fff;
}

我刚刚注意到“current-page-ancestor”类仅适用于页面类型，但不适用于自定义类型。当您在产品组合条目上时，要突出显示“服务”页面，这有点复杂。您可以使用过滤器 nav_menu_css_class 来实现它。

function _nav_menu_css_class($classes)
{
    switch (get_post_type()){
    case 'portfolio':

        $idOfServicePage = 1;

        if (in_array('menu-item-'.$idOfServicePage, $classes)){
            $classes[] = 'current-menu-item'; // or current-page-ancestor
        }

        break;

    }
    return $classes;
}
add_filter('nav_menu_css_class', '_nav_menu_css_class');

抱歉，我现在无法检查我的代码，但我遇到了类似的问题，可以使用 nav_menu_css_class 过滤器解决它。