如何在wordpress自带的目录导航中添加active跟随

技术论点 221 阅读 1

现在很多网站都采用了active跟随导航栏,能提升用户对于网站内容的熟悉,也能让用户熟悉自己现在在哪个分类下面。

所以,我这边在新模板上也打算实现这个功能。

原本打算使用js来实现的,可是找了不少的js代码都是有问题的,所以我就找了wordpress添加active的方式。

这次找的内容是有用的,但还是有一点小毛病,我这里用了复杂的代码给处理掉了。现在能失效我所希望的那样了。

上效果图:

如何在wordpress自带的目录导航中添加active跟随

源代码是子类归子类,父类归父类,我在这个添加了一下判断,如果这个父类下面有子类,那么点击子类的时候,active跟随父类而不是跟随子类。

上代码:

add_filter('nav_menu_css_class' , 'special_nav_class' , 10 , 2); 
function special_nav_class($classes, $item){ 
    //这里我添加了一个判断,有子分类则把active添加到父级上
    if(!empty(in_array('menu-item-has-children',$classes))){
        if(in_array('current_page_parent', $classes)){ 
            $classes[] = 'active '; 
           } 
    }else{
        if(in_array('current-menu-item', $classes)){ 
            $classes[] = 'active '; 
           } 
    }
return $classes; 
} 

怎么使用:

先在你的主题目录functions.php 这个文件里面粘贴上面的代码,之后打开首页刷新一下看看有没有效果,如果没有效果你就改一下导航栏的名字,还没有效果就检查一下你的主题css里面有没有定义active的样式,如果没有,则定义一个就行了。

Tags:

版权声明:若无特殊注明,本文皆为《燕闻墨香博客》原创,转载务必保留文章来源。

本文链接:如何在wordpress自带的目录导航中添加active跟随 & https://www.mxooo.cn/1014/

推荐阅读
发表评论 取消回复
表情 图片 链接 代码

  1. 跨境电商物流理论与实务

    NIce。学习了。。。。

分享