阅读本文大约需要:17 分钟

本次美化教程基于“会员引导”功能制作,需与导航添加“开通会员”按钮,不然美化后按钮错位。

首先根据以下步骤进行基础改造!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

转载请注明来源:RiPro 主题美化教程(头像下拉美化菜单,两种样式)【一】