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

作者 : 刺猬源码 本文共1914个字,预计阅读时间需要5分钟 发布时间: 2020-04-15 共1.63K人阅读

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

找到\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>
<i class=”lanse”></i>
<i class=”huangse”></i>
<i class=”lvse”></i>

一共分为:hongse(红色) lanse(蓝色) huangse(黄色) lvse(绿色)四款样式,望大家按自己喜欢样式进行修改!

 


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

刺猬QQ交流群号多少?
363432

发表评论