本次美化教程基于“会员引导”功能制作,需与导航添加“开通会员”按钮,不然美化后按钮错位。
首先根据以下步骤进行基础改造!1. 主题目录:parts -> navbar.php 文件,在“<div class=”actions”>”后添加如下代码
<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 文件,添加如下样式
第一种样式:
1. 主题目录:parts -> navbar.php 文件,替换“<!– user –>”到“<!– user end –>”中间的内容为如下代码
<?php if (is_user_logged_in()) : ?> <div class="hhnavwarp"> <a class="user-pbtn Hhhover" 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 class="Huserxiala"> <div class="Hinfo"> <div class="Hleft"><?php echo get_avatar($current_user->user_email); ?></div> <div class="Hright"> <a href="<?php echo esc_url(home_url('/user'))?>"><?php echo $current_user->display_name;?></a> <?php if ($CaoUser->vip_status()) { echo '<span class="label label-warning"><i class="fa fa-diamond"></i> '.$CaoUser->vip_name().'用户</span>'; }else{ echo '<span class="label label-default"><i class="fa fa-user"></i> '.$CaoUser->vip_name().'用户</span>'; }?> <p><span class="Hxiaofei">余额:<?php echo $CaoUser->get_balance();?></span><span class="Hxiaofei">已消费:<?php echo $CaoUser->get_consumed_balance();?></span></p> </div> </div> <div class="Hinfolist"> <ul> <li><a href="<?php echo home_url('/user?action=index') ?>"><i class="fa fa-user-secret"></i> 个人信息</a></li> <li><a href="<?php echo home_url('/user?action=mypay') ?>"><i class="fa fa-file-text"></i> 订单中心</a></li> <li><a href="<?php echo home_url('/user?action=charge') ?>"><i class="fa fa-paypal"></i> 充值中心</a></li> <li><a href="<?php echo home_url('/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; ?> <li><a class="Hexit" href="<?php echo wp_logout_url(home_url()); ?>"><i class="fa fa-sign-out"></i> 退出登录</a></li> </ul> </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 文件,添加如下样式
.Huserxiala .Hinfo .Hright{float:left;} .Huserxiala .Hinfo .Hright a{font-weight:bold;color:rgba(8,18,28,1);line-height:48px;} .ripro-dark .Huserxiala .Hinfo .Hright a{font-weight:bold;color:rgba(255,255,255,1);line-height:48px;} .Huserxiala .Hinfo .Hright p{font-size:12px;font-weight:bold;color:rgba(147,153,159,1);line-height:18px;} .Huserxiala .Hinfo .Hright .Hxiaofei{flaot:left;margin-right:5px;} .Huserxiala .Hinfolist{width:100%;height:auto;position:relative;top:8px;} .Huserxiala .Hinfolist ul li .Hhoutai{color:#666;background:none;font-size:14px;padding-top:0px;} .Huserxiala .Hinfolist ul li .Hhoutai .showguanliyuanrenzheng{font-size:14px} .Huserxiala .Hinfolist ul li .Hhoutai:hover{background:none;color:#333;} .Huserxiala .Hinfolist ul li{width:50%;float:left;list-style:none;width:128px;padding:0 10px 10px 0} .Huserxiala .Hinfolist ul li a:hover{border-radius:2px;color:#fff;background:linear-gradient(-125deg,#f9b015 0%,#f7b832 100%);-webkit-box-shadow:0 8px 10px rgba(32,160,255,.3);} .Huserxiala .Hinfolist ul li a{border-radius:2px;background:rgba(242,244,247,0.85);color:#343d46;display:block;padding:8px 10px;} .Huserxiala .Hinfolist ul li .Hexit{background:none;font-size:14px;color:rgba(178,175,174,1);padding-top:10px} .Huserxiala .Hinfolist ul li .Hhoutai{background:none;font-size:14px;color:rgba(178,175,174,1);padding-top:10px} .Huserxiala .Hinfolist ul li .Hexit:hover{background:none;-webkit-box-shadow:none;color:#0295f9;} .Huserxiala .Hinfolist ul li .Hhoutai:hover{background:none;-webkit-box-shadow:none;color:#0295f9;} .navbar .main-menu li a .shownew2{color:rgb(249,176,21);display:inline-block;position:relative;top:-9px;left:3px;} .Huserxiala{width:307px;height:264px;right:0;background:rgba(255,255,255,1);border-radius:0px 0px 10px 10px;position:absolute;top:72px;box-shadow:0 8px 16px 0 rgba(7,17,27,0.2);display:none;} .ripro-dark .Huserxiala{width:307px;height:264px;right:0;background:rgba(35,36,37,1);border-radius:0px 0px 10px 10px;position:absolute;top:72px;box-shadow:0 8px 16px 0 rgba(7,17,27,0.2);display:none;} .Huserxiala .Hinfo{padding:25px;width:100%;height:auto;} .Huserxiala .Hinfo .Hleft{width:84px;float:left} .Huserxiala .Hinfo:before{border-color:transparent transparent #f9b015 transparent;position:absolute;top:-9px;right:153px;display:block;content:'';width:0;height:0;border-style:solid;border-width:0 5.5px 6px} .Huserxiala .Hinfo:after{position:absolute;top:-3px;display:block;content:'';right:0;left:0;margin:0 auto;width:100%;height:3px;background-color:#f9b015} .Huserxiala .Hinfo .Hleft img{border-radius:50%;width:78px;height:78px;}
第二种样式:
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 文件,添加如下样式
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://www.rishouru.com/wp-content/themes/ripro/assets/images/svg/jinbi.svg https://www.rishouru.com/wp-content/themes/ripro/assets/images/svg/dou.svg
谢谢分享
谢谢分享
转载请注明来源: https://tsyblog.com/5301.html
谢谢分享
感谢分享
谢谢分享
你好
时代