ripro主题美化二级导航菜单添加文章数量统计和美化小圆点

废话不多说,请看效果图。

ripro主题美化二级导航菜单添加文章数量统计和美化小圆点-58源码

 

1、找到\ripro\functions.php 文件,在最下面添加以下代码:
//导航菜单增加文章统计
function wt_get_category_count($cat_ID) {
    $category = get_category($cat_ID);
    return $category->count;
}
function lanmitu_nav_items_num( $items,$args ) {
    if(isset($args->theme_location) && $args->theme_location == 'menu-1') {
        foreach ( $items as $key=>$item ) {
            if($item->object == 'category') {
                //$cat = get_category_by_slug($slug);
                $catID = isset($item->object_id) ? $item->object_id : false;
                if($catID && $item->post_parent!=0) {
                    $a=wt_get_category_count($catID);
                    $items[$key]->title.= '<span class="num">'.$a.'</span>';
                }
            }
        }
    }
    return $items;
}
add_filter( 'wp_nav_menu_objects', 'lanmitu_nav_items_num',10,2 );
  • 2、找到\ripro\assets\css\diy.css 在最下面添加以下CSS样式:
/**二级菜单文章统计**/
.num {
	position: absolute;
	top: 8px;
	left: 68%;
	color: #555;
	border-radius: 8px;
	text-align: center;
	font-family: Calibri;
	background: #eee;
	font-size: 12px;
	min-width: 32px;
}
/***二级导航前面小圆点***/
.lanse {
    box-sizing: border-box;
    content: '';
    width: 12px;
    height: 12px;
    border-radius: 50%;
    position: absolute;
    top: 50%;
	margin-left: 10px;
    margin-top: -6px;
    left: 0;
	border-color: #61e1b9;
	border: 3px solid #7a99f2;
}

.lvse {
    box-sizing: border-box;
    content: '';
    width: 12px;
    height: 12px;
    border-radius: 50%;
    position: absolute;
    top: 50%;
	margin-left: 10px;
    margin-top: -6px;
    left: 0;
	border-color: #61e1b9;
	border: 3px solid #70d7cf;
}
.huangse {
    box-sizing: border-box;
    content: '';
    width: 12px;
    height: 12px;
    border-radius: 50%;
    position: absolute;
    top: 50%;
	margin-left: 10px;
    margin-top: -6px;
    left: 0;
	border-color: #61e1b9;
	border: 3px solid #f5c745;
}
.hongse {
    box-sizing: border-box;
    content: '';
    width: 12px;
    height: 12px;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    margin-left: 10px;
    margin-top: -6px;
    left: 0;
    border-color: #61e1b9;
    border: 3px solid #f1787f;
}
/***二级导航前面小圆点结束***/
  • 3、导航前面添加小圆点,在后台-菜单里设置,如下图:

ripro主题美化二级导航菜单添加文章数量统计和美化小圆点-58源码

<i class="hongse"></i> <i class="lanse"></i> <i class="huangse"></i> <i class="lvse"></i>
一共分为:hongse(红色) lanse(蓝色) huangse(黄色) lvse(绿色)四款样式,大家可以按照自己喜欢的样式进行修改!

1、升级本站永久VIP,仅需【88】元即可升级 ! ! ! (升级后永久享受整站资源全部免费下载)

2、站内下载币均可通过签到等任务进行免费兑换。

3、站内资源均来源于网络公开发表文件或网友投稿发布,如侵犯您的权益,请联系管理员处理。

4、本站所分享的源码、模板、软件工具等其他资源,都不包含技术服务,请大家谅解!

5、所有资源均收集于互联网仅供学习、参考和研究,请理解这个概念,所以不能保证每个细节都符合你的需求,也可能存在未知的BUG与瑕疵,因本站资源均为可复制品,所以不支持任何理由的退款兑现(特殊情况可退积分),请熟知后再支付下载!


58源码 » ripro主题美化二级导航菜单添加文章数量统计和美化小圆点
  • 2020年6月26日Hi,初次和大家见面了,请多关照!

发表评论

  • 87会员总数(位)
  • 1251资源总数(个)
  • 67本周发布(个)
  • 0 今日发布(个)
  • 128稳定运行(天)

58源码下载站58DIR.CN,专为草根站长提供建站服务的平台

开通VIP 本站模板