RiPro用户小工具美化添加会员用户消费排行榜

  • 正文内容
  • 相关推荐

分享下RiPro用户小工具美化和添加用户消费排行榜效果图如下:

RiPro用户小工具美化添加用户消费排行榜教程:

隐藏的内容

用户小工具美化:

1. ripro – > inc -> codestar-framework -> options -> widgets.theme.php 文件,查找“ // 用户信息小工具 ”,将本栏目内“ ob_start(); ?> ”到“ <?php echo ob_get_clean(); ”内的内容替换为如下代码

  1. <div class="author-card_content">
  2. <div class="authorinfo-header-title">
  3. <div class="authorinfo-codesign-single">
  4. <?php echo get_avatar($current_user->user_email); ?>
  5. </div>
  6. <div class="author-info-vip-single">
  7. <div class="authorinfo-header">
  8. <?php echo $current_user->display_name;?>
  9. </div>
  10. <?php if ($CaoUser->vip_status()) {
  11. echo '<span class="label label-default" style="padding-left:0px;padding-top:0px;">'.$CaoUser->vip_end_time().'</span>';
  12. }else{
  13. echo '<span class="label label-default" style="padding-left:0px;padding-top:0px;">未开通</span>';
  14. }?>
  15. </div>
  16. <div class="author-qiandao-single">
  17. <?php if (_cao('is_qiandao','1')) : ?>
  18. <?php if (_cao_user_is_qiandao()) {
  19. echo '<button type="button" class="btn btn--secondary disabled ripro-qiandao"><i class="fa fa-check"></i> 今日已签到</button>';
  20. }else{
  21. echo '<button type="button" class="click-qiandao btn btn--secondary ripro-qiandao">今日签到可领<span>'._cao('qiandao_to_money','5').'</span><span>'.$site_money_ua.'</span></button>';
  22. }?>
  23. <?php endif; ?>
  24. </div>
  25. </div>
  26. <div class="author-fields">
  27. <div class="ripro-author-fields">
  28. <span class="ripro-author-yue" style="color:#fff"><?php echo $CaoUser->get_balance();?></span>
  29. <span style="color:#bcb7a9"><?php echo $site_money_ua;?>余额</span>
  30. </div>
  31. <div class="ripro-author-fields">
  32. <span class="ripro-author-yue" style="color:#fff"><?php echo $CaoUser->get_consumed_balance();?></span>
  33. <span style="color:#bcb7a9">消费<?php echo $site_money_ua;?></span>
  34. </div>
  35. </div>
  36. </div>

2. ripro -> assets -> css-> diy.css 添加如下样式

  1. .widget-userinfo{background:url(../images/user.png);background-repeat:no-repeat;background-size:100% 100%;box-shadow:0 34px 10px -24px rgba(136,161,206,0.34);}
  2. .authorinfo-header-title{margin-bottom:1.5rem;margin-top:1.5rem;display:flex!important;}
  3. .authorinfo-codesign-avatar{width:45.6px;height:45.6px;display:flex;flex-shrink:0;cursor:pointer;border-radius:50%;overflow:hidden;}
  4. .author-info-vip{margin-left:1rem;flex-shrink:0;border-radius:500px;cursor:pointer;}
  5. .authorinfo-header{font-size:0.9rem !important;font-weight:400;line-height:1.5;color:#fff;}
  6. .authorinfo-header-time,.label-default{font-size:0.7rem !important;color:#dedbd2;font-weight:400;line-height:1.5;background-color:rgba(0,0,0,0)}
  7. .authorinfo-codesign-single{width:40px;height:40px;display:flex;flex-shrink:0;cursor:pointer;border-radius:50%;overflow:hidden;}
  8. .author-info-vip-single{margin-left:0.4rem;flex-shrink:0;border-radius:500px;cursor:pointer;}
  9. .author-qiandao-single{padding:0px;padding-top:0px;height:40px;line-height:40px;right:-15px;position:absolute;}
  10. .author-qiandao-single button{border-radius:50px;background-image:linear-gradient(60deg,#777777 60%,#ffd1ff 100%);}
  11. .ripro-author-fields{background-color:rgba(0,0,0,0)!important;color:#fff;}
  12. .ripro-author-yue{font-size:23px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;white-space:normal;}

3. 附上所需图标,请自行下载,放入 ripro -> assets -> images 目录下

添加用户消费排行榜:

1. ripro – > inc -> codestar-framework -> options -> widgets.theme.php 文件,在最后添加如下代码

  1. // 用户消费排行榜
  2. CSF::createWidget('cao_widget_userspay', array(
  3. 'title' => 'RIPRO-用户消费排行榜',
  4. 'classname' => 'widget-userspay',
  5. 'description' => '用于展示用户消费排行榜,制作:天罩小山',
  6. 'fields' => array(
  7.  
  8. array(
  9. 'id' => 'title',
  10. 'type' => 'text',
  11. 'title' => '标题',
  12. 'default' => '消费排行榜',
  13. ),
  14. array(
  15. 'id' => 'limit',
  16. 'type' => 'text',
  17. 'title' => '显示数量',
  18. 'default' => '6',
  19. ),
  20.  
  21. ),
  22. ));
  23. if (!function_exists('cao_widget_userspay')) {
  24. function cao_widget_userspay($args, $instance)
  25. {
  26. if (_cao('close_site_shop','0')) {
  27. return false;
  28. }
  29.  
  30. echo $args['before_widget'];
  31. if ( ! empty( $instance['title'] ) ) {
  32. echo $args['before_title'] . apply_filters( 'widget_title', $instance['title'] ) . $args['after_title'];
  33. }
  34. // start
  35. $limit = $instance['limit'];
  36. $outer = isset($instance['outer']) ? $instance['outer'] : 0;
  37. $output = '';
  38. //查询用户
  39. $arg = array(
  40. 'meta_key' => 'cao_consumed_balance',
  41. 'meta_query' => array(),
  42. 'orderby' => 'meta_value_num',
  43. 'order' => 'DESC',
  44. 'number' => $limit,
  45. 'count_total' => false,
  46. );
  47. $users = get_users($arg);
  48. $site_money_ua = _cao('site_money_ua');
  49. if(!empty($users)){
  50. foreach($users as $key => $search_user){
  51. $CaoUser = new CaoUser($search_user->ID);
  52. $output .= '<li>';
  53. $output .= '<span class="index num-'.($key+1).'">'.($key+1).'</span>';
  54. $output .= '<span class="avatar">'.get_avatar($search_user->user_email).'</span>';
  55. $output .= '<span class="name">'.$search_user->display_name.'</span>';
  56. $output .= '<span class="credits"><span class="num">'.(int)$CaoUser->get_consumed_balance().'</span>'.$site_money_ua.'</span>';
  57. $output .= '</li>';
  58. }
  59. }
  60. echo '<ul>' . $output . '</ul>';
  61. // end
  62. echo $args['after_widget'];
  63. }
  64. }

2. ripro -> assets -> css-> diy.css 添加如下样式


之后主题选项那保存下主题,就在小工具里看到了,添加上吧

  1. /*消费排行榜*/
  2. .widget-userspay li{position:relative;display:flex;margin-bottom:10px;}
  3. .widget-userspay li span{font-size:14px;}
  4. .widget-userspay li .index{color:#080808;font-size:18px;width:20px;line-height:30px;font-weight:600;}
  5. .widget-userspay li .index.num-1{color:#F44336;}
  6. .widget-userspay li .index.num-2{color:#4CAF50;}
  7. .widget-userspay li .index.num-3{color:#FFC107;}
  8. .widget-userspay li .index.num-4{color:#00BCD4;}
  9. .widget-userspay li .index.num-5{color:#2196F3;}
  10. .widget-userspay li .index.num-6{color:#E91E63;}
  11. .widget-userspay li .index.num-7{color:#34495e;}
  12. .widget-userspay li .index.num-8{color:#f4e3ab;}
  13. .widget-userspay li .avatar{width:40px;}
  14. .widget-userspay li .avatar img{width:30px;height:30px;border-radius:50%;overflow:hidden;display:block;}
  15. .widget-userspay li .name{flex:1;line-height:30px;-webkit-line-clamp:1;-webkit-box-orient:vertical;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  16. .widget-userspay li .credits{min-width:80px;line-height:30px;-webkit-line-clamp:1;-webkit-box-orient:vertical;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#cac8ff;}
CTRL+D快速收藏,欢迎常来喔

本文标签:这篇文章木有标签

本文标题: RiPro用户小工具美化添加会员用户消费排行榜

本文链接: https://www.zyoua.com/Website/1387.html

版权声明:若无特殊注明,本文皆为《 有啊 》原创,转载请保留文章出处。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

允许邮件通知
既然没有吐槽,那就赶紧抢沙发吧!