ripro美化教程提到给导航菜单栏添加角标文字,今天教大家给ripro主题二级导航栏添加文章数量统计(同样也适用于别的主题)
先看下效果图:
教程开始:
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、导航前面添加小圆点,在后台-菜单里设置,如下图:
<i class="hongse"></i> //这里的"hongse"对应的是上面CSS样式,一共4个样式,根据自己的爱好可以作相应的调整
1. 本站所提供的源码模板(主题/插件)等资源仅供学习交流,若使用商业用途,请购买正版授权,否则产生的一切后果将由下载用户自行承担,有部分资源为网上收集或仿制而来,若模板侵犯了您的合法权益,请来信通知我们(Email: admin@suzhouw.cn),我们会及时删除,给您带来的不便,我们深表歉意!
2. 分享目的仅供大家学习和交流,请不要用于商业用途!
3. 如果你也有好源码或者教程,可以到用户中心发布投稿,分享有金币奖励和额外收入!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务 请大家谅解!
5. 如有链接无法下载、失效或广告,请联系站长,可领回失去的金币,并额外有奖!
6. 如遇到加密压缩包,默认解压密码为"www.suzhouw.cn",如遇到无法解压的请联系管理员!
本站部分文章、资源来自互联网,版权归原作者及网站所有,如果侵犯了您的权利,请及时联系我站删除。免责声明
小飞博客 » wordpress美化 ripro主题美化 给二级导航菜单添加文章数量统计和美化小圆点
2. 分享目的仅供大家学习和交流,请不要用于商业用途!
3. 如果你也有好源码或者教程,可以到用户中心发布投稿,分享有金币奖励和额外收入!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务 请大家谅解!
5. 如有链接无法下载、失效或广告,请联系站长,可领回失去的金币,并额外有奖!
6. 如遇到加密压缩包,默认解压密码为"www.suzhouw.cn",如遇到无法解压的请联系管理员!
本站部分文章、资源来自互联网,版权归原作者及网站所有,如果侵犯了您的权利,请及时联系我站删除。免责声明
小飞博客 » wordpress美化 ripro主题美化 给二级导航菜单添加文章数量统计和美化小圆点