⚠️
秋叶资源网上的部份代码及教程来源于互联网,仅供网友学习交流,未经秋叶作者或上传书面授权,请勿作他用。
若您的权利被侵害,请联系站长 QQ: 550601163 或 点击右侧 私信:秋叶 反馈,我们将尽快处理。
低调朴实的双按钮引导卡片

秋叶资源网 by Qiuye

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

今天教大家给ripro主题二级导航栏添加文章数量统计(同样也适用于别的主题)wordpress美化 ripro主题美化 给二级导航菜单添加文章数量统计和美化小圆点-秋叶资源网

先看下效果图:

wordpress美化 ripro主题美化 给二级导航菜单添加文章数量统计和美化小圆点-秋叶资源网

教程开始:

1、找到riprofunctions.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、找到riproassetscssdiy.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、导航前面添加小圆点,在后台-菜单里设置,如下:

<i class="hongse"></i> //这里的"hongse"对应的是上面CSS样式,一共4个样式,根据自己的爱好可以作相应的调整

 

 

wordpress美化 ripro主题美化 给二级导航菜单添加文章数量统计和美化小圆点-秋叶资源网
ripro专题

【3月15日更新 适配ripro6.2】 ripro子主题全站美化包WordPress RiPro主题二开美化版(功能集成到后台)

2020-3-15 8:44:55

ripro专题

ripro美化 给ripro主题添加一个首页快讯公告栏模块 可随意调整位置

2020-3-21 16:58:14

⚠️
秋叶资源网上的部份代码及教程来源于互联网,仅供网友学习交流,未经秋叶作者或上传书面授权,请勿作他用。
若您的权利被侵害,请联系站长 QQ: 550601163 或 点击右侧 私信:秋叶 反馈,我们将尽快处理。
2 条回复 A文章作者 M管理员
  1. 这个美化很实用啊

  2. 学习一下方法不再求人

个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
有新消息 消息中心
搜索
WordPress美化 - Npcink