最新RiPro 主题美化教程(第一章)

作者 : 黑域吧 本文共19840个字,预计阅读时间需要50分钟 发布时间: 2020-02-9 共36.99K人阅读

注:本次美化教程基于“会员引导”功能制作,需与导航添加“开通会员”按钮,不然美化后按钮错位。1。
主题目录:parts-> navbar.php文件,在“ <div class =”操作”>”后添加如下代码

<div title="加入VIP,免费下载全站素材" class="menu-head_you-container">
   <ul id="menu-head_you" class="menu">
      <li id="menu-item-967" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-967">
         <a href="vip"><i class="fa fa-diamond"></i> 开通会员</a>
      </li>
   </ul>
</div>

2.主题目录:parts-> navbar.php文件,在右侧“ global $ current_user;”后面添加如下代码

$CaoUser = new CaoUser($current_user->ID);

注:第2步必须添加,否则报错

3. 主题目录:assets -> css -> diy.css 文件,添加如下样式

/*nav设置开始*/
.navbar{height:72px;}
.header-gap{height:72px;}
.navbar .hhnavwarp:hover .Huserxiala{display:block;}
.navbar .menu-item&gt;a{font-weight:400;}
.ripro-dark .navbar .menu-item&gt;a{color:rgba(255,255,255,1);}
.sub-menu:before{content:'';width:20px;height:20px;border-radius:1px;background-color:#fff;-webkit-transform:rotate(45deg);transform:rotate(45deg);position:absolute;top:-5px;left:40px;z-index:0;}
.navbar .user-pbtn{height:80px;}
.navbar .user-pbtn:hover span{color:#f9b015;}
.navbar .login-btn{margin:0 20px;color:#4d555d;background-color:#ffffff00;font-size:14px;}
.navbar .actions&gt;div+div{font-weight:700}
.navbar .actions&gt;div+div{margin-left:5px;font-weight:700;}
.navbar .navbar-button,.off-canvas .canvas-close{background-color:#f7f7ff;border:1px solid #f7f7ff;color:#f9b015;background-image:none;-webkit-animation:none;}
.burger{background-color:#f7f7ff;border:1px solid #f7f7ff;color:#f9b015;}
.burger:before,.burger:after{background-color:#f9b015;}
.actions .burger:before,.actions .burger:after{content:none;}
.menu-head_you-container li a{margin:0 10px;color:#333;font-size:14px;}
.sub-menu li&gt;a:hover:before,.sub-menu li.current_page_item&gt;a:before,.sub-menu li.current-menu-item&gt;a:before,.sub-menu li.current_page_ancestor&gt;a:before,.sub-menu li.current-menu-ancestor&gt;a:before,.sub-menu li.current-menu-parent&gt;a:before{opacity:1;}
.sub-menu li&gt;a:hover,.sub-menu li.current_page_item&gt;a,.sub-menu li.current-menu-item&gt;a,.sub-menu li.current_page_ancestor&gt;a,.sub-menu li.current-menu-ancestor&gt;a{color:#f9b015;padding-left:1.75rem;opacity:1;}
.sub-menu li a{font-size:.875rem;padding:.5rem 1rem .5rem 1.5rem;position:relative;-webkit-transition:all .3s ease;-moz-transition:all .3s ease;-ms-transition:all .3s ease;-o-transition:all .3s ease;transition:all .3s ease;}
.sub-menu li a:before{content:'';height:1px;width:10px;background-color:#f9b015;opacity:0;-webkit-transition:all 300ms linear 0ms;-khtml-transition:all 300ms linear 0ms;-moz-transition:all 300ms linear 0ms;-ms-transition:all 300ms linear 0ms;-o-transition:all 300ms linear 0ms;transition:all 300ms linear 0ms;position:absolute;left:.75rem;top:50%;-webkit-transform:translate(0%,-50%);-khtml-transform:translate(0%,-50%);-moz-transform:translate(0%,-50%);-ms-transform:translate(0%,-50%);-o-transform:translate(0%,-50%);transform:translate(0%,-50%);}
@media (min-width:750px){.module.slider .post{height:400px;}
.menu-head_you-container{display:block !important;}
.site-header .burger,.site-header .search-open,.site-header .login-btn,.site-header .tap-dark{margin-top:25px!important;}}
/*nav设置结束*/

美化样式一教程:

1. 主题目录:parts -> navbar.php 文件,替换“<!– user –>”到“<!– user end –>”中间的内容为如下代码

2. 主题目录:assets -> css -> diy.css 文件,添加如下样式

美化样式二教程:

1. 主题目录:parts -> navbar.php 文件替换“<!– user –>”到“<!– user end –>”中间的内容为如下代码

<?php if (is_user_logged_in()) : ?> <div class="header-dropdown header__group header__group_user header__style_user"> <div class="header__cat"> <a class="user-pbtn" href="<?php echo esc_url(home_url('/user')) ?>"><?php echo get_avatar($current_user->user_email); ?> <?php if(!_cao('is_navbar_ava_name','0')){ echo '<span>'.$current_user->display_name.'</span>'; }?> </a> </div> <div class="header__dropdown"> <div class="header-box"> <div class="refresh-header-top"> <div class="header-top"> <?php echo get_avatar($current_user->user_email); ?> <div class=""><span> <a class="user-names" href="<?php echo home_url('/user') ?>/user"><?php echo $current_user->display_name; ?></a> <?php if ($CaoUser->vip_status()) { echo '<i class="wp wp-VIP"> '.$CaoUser->vip_name().' </i><i class="group-name">'.$CaoUser->vip_end_time().'</i></span>'; echo '<p id="buy-vip" rel-vipid="3">多一点理解,担一份责任,献一抹光亮,度一段艰辛</p>'; }elseif(in_array( 'administrator', $current_user->roles )){ echo '<i class="wp wp-VIP"> 管理员 </i>'; echo user_registered_date().'</span>'; echo '<p id="buy-vip" rel-vipid="3">只有比别人更早,更勤奋的努力,才能尝到成功的滋味</p>'; }else{ echo '<i class="wp wp-VIP"> 注册用户 </i>'; echo user_registered_date().'</span>'; echo '<p id="buy-vip" rel-vipid="3">谁也不能随随便便成功,它来自彻底的自我管理和毅力</p>'; }?> </div> <a href="<?php echo wp_logout_url(home_url()); ?>" class="logout">退出</a> </div> </div> <div class="header-center"> <div class="md-l"> <span class="md-tit">我的钱包</span> <span class="jinbi"><i></i>余额:<?php echo $CaoUser->get_balance();?> </span> <span class="dou"><i></i>已消费:<?php echo $CaoUser->get_consumed_balance();?></span> <a href="/user?action=charge" class="pay-credit" id="buy-credit" rel-vipid="2" rel-moey="38">充值</a> </div> <div class="md-r"> <div class="md-t"> <?php if ($CaoUser->vip_status()) { echo '<span>VIP会员</span><p>升级为永久VIP享终身特权</p><a href="/user?action=vip" class="pay-vip" id="buy-vip" rel-vipid="3">升级</a>'; }else{ echo '<span>非会员</span><p>开通VIP,享VIP特权</p><a href="/user?action=vip" class="pay-vip" id="buy-vip" rel-vipid="3">开通</a>'; }?> </div> <div class="md-b"> <span>永久会员</span> <p>限时开放,仅限99名</p> <a href="/user?action=vip" class="pay-vip" id="buy-vip" rel-vipid="100">开通</a> </div> </div> </div> <div class="header-bottom"> <ul> <li><a href="/user?action=index"><i class="fa fa-user-secret"></i> 个人信息</a></li> <li><a href="/user?action=mypay"><i class="fa fa-file-text"></i> 订单中心</a></li> <li><a href="/user?action=charge"><i class="fa fa-paypal"></i> 充值中心</a></li> <li><a href="/user?action=ref"><i class="fa fa-paper-plane"></i> 推广佣金</a></li> <?php if(in_array( 'administrator', $current_user->roles )): ?> <li><a href="<?php echo home_url('/wp-admin/index.php') ?>" target="_blank"><i class="fa fa-unlock-alt"></i> 登陆后台</a></li> <?php else : ?> <li><a href="<?php echo home_url('user?action=mypost') ?>/" class=""><i class="fa fa-file-text"></i> 我的文章</a></li> <?php endif; ?> </ul> </div> </div> </div> </div> <?php else: ?> <div class="login-btn navbar-button"><i class="mdi mdi-account"></i> 登录</div> <?php endif; ?>

2. 主题目录:assets -> css -> diy.css 文件,添加如下样式

.header__group{position:relative} .header__group:before,.header__group:after{background:transparent;bottom:-5px;height:16px;width:16px} .header__group:before{border-bottom-right-radius:8px;box-shadow:6px 6px 0 #FFF;left:-16px} .header__group:after{border-bottom-left-radius:8px;box-shadow:-6px 6px 0;right:-16px} .header__group.active:before,.header__group.active:after{content:''} @media only screen and (max-width: 767px){.header__group_cats{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(35,35,35,0.82);z-index:20} .header__group_cats.visible{display:block}} .header__group_cats.active:before{content:none} @media only screen and (max-width: 767px){.header__group_cats .header__cat{display:none}} .header__group_cats .header__dropdown{border-top-right-radius:8px;width:262px} @media only screen and (max-width: 767px){.header__group_cats .header__dropdown{top:0;left:auto;right:0;bottom:0;width:256px;overflow:auto}} .header__style_user .header__dropdown{left:inherit;right:-160px;border-radius:8px;width:400px;top:76px;} .header__group_user .header__dropdown .header__link &gt; a{color:#8495a0} .header__group_user .header__dropdown .header__link &gt; a:hover{color:#fff} .header__group_user.active:before{content:none} .header__group_notify{} .header__group_notify .header__dropdown{border-radius:8px;left:auto;right:-64px;width:372px} .ripro-dark .header__group.active .header__cat {background: #232425;} .header__group.active .header__cat{background:#FFF;box-shadow:0 5px 0 0 #FFF} .header__cat a{color: #adb7be;} .header__cat a:hover{color: #fff;} .header__cat .dian{background: #ff5780;width: 7px;height: 7px;border-radius: 50%;position: absolute;right: 13px;top: 26px;} .header__group.active .header__cat:after{display:none} .header__group.active .header__title{color:#fff} .header__group.active .header__dropdown{display:block} .header__group_cart.active:before,.header__group_cart.active:after{content:none !important} .header__group_cart.active .header__cat{background:none;box-shadow:none} .header__group_shift .header__dropdown{border-top-right-radius:8px;left:0;right:auto;width:664px} .header__group_shift.active::before {content: none} .header__group_shift .cards{margin:0;padding:20px;display:-ms-grid;display:grid;-ms-grid-columns:(302px)[2];grid-template-columns:repeat(2,302px);grid-gap:20px} .header__group_shift .cards .card{width:302px} .header__group_shift .cards .card.liked .likes{opacity:1;right:10px;transition-delay:0ms,0ms} .header__group_shift .cards .card.liked .likes a{color:#fb6666} .header__group_shift .cards .card.liked .likes svg{animation:bounce 250ms ease} .header__group_shift .cards .card-wrapper{margin:0} @media only screen and (max-width:767px){.header__group_user.active .header__cat{background:none;box-shadow:none}} @media only screen and (max-width:767px){.header__group_user.active .header__dropdown{display:none}} .ripro-dark .header__dropdown{background:#232425;} .header__dropdown{display:none;position:absolute;top:calc(100% + 0px);left:0;background:#FFF;border-radius:0 0 8px 8px;} .header-box{color:#00377e;} .header-box,.header__new{margin:0 20px;padding:15px 0;} .refresh-header-top{width:100%;} .header-box{color:#00377e;} .btn-cta-purple{position:relative;width:75px;height:28px;padding:0 8px;text-align:center;text-transform:uppercase;font-size:10px;font-weight:800;line-height:28px;border-radius:14px;color:#fff;background-color:none;background-image:linear-gradient(to bottom,#fb68d5 0,#7865ff 100%);margin-right:20px;cursor:pointer} .btn-cta-purple:hover{background-image:linear-gradient(to bottom,#ae68fb,#6652f3)} .header__new{border-bottom:1px solid #202020;box-shadow:0 1px 0 0 #353535;font-size:14px;color:#fff} .header-box,.header__new{margin:0 20px;padding:15px 0} .header-box{color:#343434;} .refresh-header-top{width:100%;} .header-top{position:relative;font-size:9pt;color:#fff;border-bottom:1px solid #ccc;box-shadow:0 1px 0 0 #f4f4f4;} .header-top img{float:left;width:45px;border-radius:50%;margin-top:2px;margin-right:10px} .header-top .logout{position:absolute;right:0;top:0;color:#8495a0;} .header-top .logout:hover{color:#0056ff;} .user-names{max-width:100px;overflow:hidden;display:block;word-wrap:break-word;text-overflow:ellipsis;white-space:nowrap;float:left;font-size:14px;} .header-top .group-name{background:linear-gradient(-125deg,#0295f9 0%,#2f49fd 100%);box-shadow:4px 3px 10px rgba(32,160,255,0.17);color:#FFF;padding:2px 8px;border-radius:10px;font-style:normal;font-size:12px;margin-left:10px;} .wp-VIP{background:linear-gradient(-125deg,#f8d930 0%,#fb7b92 100%);box-shadow:4px 3px 10px #ffc1072e;color:#FFF;padding:2px 8px;border-radius:10px;transition:transform 0.1s;font-size:12px;margin-left:10px;font-family:"wp" !important;font-style:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;} .wp .wp-VIP:hover{cursor:pointer;transform:translate(0,5px);} .header-top .group-name.vip-bg,.page-profile .inset-header .about-me .user-name small.badge.vip-bg{background:#ff5780;} .header-top .group-name.authors-bg,.page-profile .inset-header .about-me .user-name small.badge.authors-bg{background:#2aa461;} .header-top p{margin-top:7px;font-size:12px;color:#8495a0;cursor:pointer;} .header-center{display:flex;padding:15px 0} .header-bottom,.header-center{position:relative} .header-center .md-l{float:left;width:47%;border-radius:6px;padding:15px;margin-right:15px;transition:transform 0.1s;background-clip:padding-box,border-box;background-origin:padding-box,border-box;background-image:linear-gradient(135deg,#89f1fe,#63a8f6);box-shadow:3px 3px 10px #17161614;} .header-center .md-l:hover{cursor:pointer;transform:translate(0,-5px);} .header-center .md-tit{display:block;color:#fff;font-size:14px;margin-bottom:10px} .header-center .dou,.header-center .jinbi{display:block} .header-center .jinbi i{background:url(../images/jinbi.svg) no-repeat center;background-size:cover;} .header-center .dou i,.header-center .jinbi i{width:16px;height:16px;display:-webkit-inline-box;position:relative;top:4px;margin-right:5px} .header-center .dou i{background:url(../images/dou.svg) no-repeat center;background-size:cover;} .header-center .pay-credit{position:absolute;bottom:25px;background:linear-gradient(-180deg,#ffffff 2%,#ffffff 98%);padding:1px 10px;border-radius:20px;color:#0a79ed;box-shadow:3px 4px 10px #17161617;} .header-center .md-r{float:left;width:50%} .header-center .md-t{padding:9px;margin-bottom:5px;border-radius:5px;position:relative;transition:transform 0.1s;background-clip:padding-box,border-box;background-origin:padding-box,border-box;background-image:linear-gradient(135deg,#fe89c0,#f44069);box-shadow:3px 3px 10px #17161614;} .header-center .md-t:hover{cursor:pointer;transform:translate(0,-5px);} .header-center .md-t span{color:#fff;display:block;margin-bottom:5px;font-size:14px} .header-center .md-t p{font-size:11px} .header-center .md-t a{position:absolute;right:10px;top:5px;background:linear-gradient(-180deg,#f6f6f6 2%,#f6f6f6 98%);padding:1px 10px;border-radius:20px;color:#ec2546;box-shadow:3px 4px 10px #17161617;} .header-center .md-b{padding:9px;position:relative;border-radius:5px;background-clip:padding-box,border-box;background-origin:padding-box,border-box;transition:transform 0.2s;background-image:linear-gradient(135deg,#fee11b,#fe8e06);border:2px transparent solid;} .header-center .md-b:hover{cursor:pointer;transform:translate(0,5px);} .header-center .md-b span{color:#fff;padding-bottom:5px;display:block;font-size:14px} .header-center .md-b p{font-size:11px} .header-center .md-b a{position:absolute;right:10px;top:5px;background:linear-gradient(to bottom,#fff 0,#fff 100%);padding:1px 10px;border-radius:20px;color:#feb609;box-shadow:3px 4px 10px #17161617;} .header-bottom .my-home{display:block;font-size:14px;margin-bottom:10px;} .header-bottom ul{padding:1px;display:flex;text-align:center;margin:auto;} .header-bottom li{float:left;width:20%;cursor:pointer;list-style-type:none;} .header-bottom li i{width:40px;height:40px;display:block;border-radius:50%;margin:5px auto;transition:transform 0.2s;background-position:center;background-repeat:no-repeat;background:linear-gradient(-125deg,#0295f9 0%,#2f49fd 100%);box-shadow:0 6px 16px -5px rgba(0,0,0,0.3);border-radius:16px;padding:4px 11px;font-size:15PX;line-height:2;color:#fff;text-align:center;white-space:nowrap;vertical-align:baseline;} .label-warning{background-color:#ffdfe0;color:#f6f6f6;border:0px solid #fff;box-shadow:0 6px 16px -5px rgba(0,0,0,0.3);border-radius:16px;background:linear-gradient(-125deg,#0295f9 0%,#2f49fd 100%);box-shadow:0 8px 10px rgba(32,160,255,.3);} .header-bottom li i:hover{cursor:pointer;transform:translate(0,-5px);} .header__custom .icon.max{font-size:18px;} .header-top p{margin-top:10px;font-size:12px;color:#8495a0;cursor:pointer;} .header-dropdown{font-size:12px;} .header-center p{margin:auto;} .header__cat{box-sizing:border-box;display:-webkit-box;display:-ms-flexbox;display:flex;padding-left:10px;border-radius:8px 8px 0 0;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;cursor:pointer;padding-top:0;}

 

3.主题目录:functions.php在最后面添加如下代码

/** * [getTime 获取用户注册时间] * @Author Dadong2g * @DateTime 2019-05-28T12:25:26+0800 * @return [type] [description] */ function user_registered_date(){ $userinfo=get_userdata(get_current_user_id()); $authorID= $userinfo->id; $user = get_userdata( $authorID ); $registered = $user->user_registered; echo '<i class="group-name"> '.date( 'Y年m月d日', strtotime( $registered ) ).'</i>'; }

4.主题目录:footer.php在“ </ body>”前插入如下代码

jQuery(".header-dropdown").hover(function() { jQuery(this).addClass('active'); }, function() { Query(this).removeClass('active'); });

5. 主题目录:assets -> images 放入如下图片(附上链接,自行下载)

https://img.fanli28.cn/svg/jinbi.svg https://img.fanli28.cn/svg/dou.svg
提示:
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!邮箱:(332547532@qq.com)
2. 分享目的仅供大家学习和交流,请不要用于商业用途!QQ群: 10563080
3. 如果你也有好源码或者教程,可以到审核区发布,分享有金币奖励和额外收入!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务 请大家谅解!
5. 如有链接无法下载、失效或广告,请点击右下方联系站长,可领回失去的金币,并额外有奖!
6. 如遇到加密压缩包,默认解压密码请在"下载框架提示方寻找",如遇到无法解压的请联系管理员!
黑域吧资源网 » 最新RiPro 主题美化教程(第一章)

常见问题FAQ

本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
邮箱:(332547532@qq.com)

发表评论