WordPress主题 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="mybj_num">'.$a.'</span>';
}
}
}
}
return $items;
}
add_filter( 'wp_nav_menu_objects', 'lanmitu_nav_items_num',10,2 );
2、在样式文件修改路径 \ripro\assets\css\diy.css
在最下面添加以下CSS样式:
复制.mybj_num {
position: absolute;
top: 8px;
left: 66%;
color: #555;
border-radius: 8px;
text-align: center;
font-family: Calibri;
background: #eee;
font-size: 12px;
min-width: 32px;
}
小圆点图标的方法
ripro主题虽然支持二级导航菜单设置图标,但有的小伙伴菜单太多的话一时找不到合适的图标配置,但是又想配置一个图标,所以给菜单前面加一个小圆圈样式无非是一个明智的选择,如下图:
样式文件修改路径 \ripro\assets\css\diy.cs
s 在最下面添加以下CSS样式:
复制/***二级导航前面小圆点***/
.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;
} /***二级导航前面小圆点结束***/
导航前面添加小圆点,在后台-菜单里设置,如下图:
复制<i class="hongse"></i>
<i class="lanse"></i>
<i class="huangse"></i>
<i class="lvse"></i>
一共分为:hongse(红色) lanse(蓝色) huangse(黄色) lvse(绿色)四款样式,以上样式仅供参考,望大家按自己喜欢样式进行修改!
提供优质的网站源码大全,小程序、APP、H5、支付、游戏、区块链、商城、直播、影音、小说、公众号等源码下载。
33源码 » WordPress主题 ripro导航菜单增加文章数量统计和小圆点图标的方法
33源码 » WordPress主题 ripro导航菜单增加文章数量统计和小圆点图标的方法
