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.css 在最下面添加以下 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（绿色）四款样式，以上样式仅供参考，望大家按自己喜欢样式进行修改！

以上关于WordPress主题 ripro导航菜单增加文章数量统计和小圆点图标的方法的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。