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(绿色)四款样式,以上样式仅供参考,望大家按自己喜欢样式进行修改!
1. 本站所有免费资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!
2. 本站不保证所提供下载的免费资源的准确性、安全性和完整性,免费资源仅供下载学习之用!如有链接无法下载、失效,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或技术教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
5. 加入前端开发QQ群:565733884,我们大家一起来交流技术!
码云笔记 » WordPress主题 ripro导航菜单增加文章数量统计和小圆点图标的方法
2. 本站不保证所提供下载的免费资源的准确性、安全性和完整性,免费资源仅供下载学习之用!如有链接无法下载、失效,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或技术教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
5. 加入前端开发QQ群:565733884,我们大家一起来交流技术!
码云笔记 » WordPress主题 ripro导航菜单增加文章数量统计和小圆点图标的方法