• demo
      默认颜色
      主色调
      基础白
      灰度0
      灰度1
      灰度2
      灰度3
      灰度4
      灰度5
      灰度6
      灰度7
      灰度8
      灰度9
      暗色模式
      主色调
      基础白
      灰度0
      灰度1
      灰度2
      灰度3
      灰度4
      灰度5
      灰度6
      灰度7
      灰度8
      灰度9
TSYBLOG.COM

RiPro 主题美化教程（头像下拉美化菜单，两种样式）【一】

8587
Ripro主题美化 · Wordpress · Wordpress美化 · 2020年3月10日

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

%title插图%num

首先根据以下步骤进行基础改造！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 文件，添加如下样式

此区域内容需评论后可见

第一种样式：

%title插图%num

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 主题美化教程（头像下拉美化菜单，两种样式）【一】》
本文链接：https://tsyblog.com/5301.html
喜欢本文？
文章阅读
上一篇 ripro主题美化VIP引导界面，滚动条，头像滚动，LOGO流光效（二期）
下一篇 Ripro主题幻灯片，搜索框，添加统计模块，添加VIP角标，修改首页五列布局（三）
随机文章

WordPress 所有 hook 钩子

2020年6月17日 20:48:07

WordPress CDN-修改https协议问题教程

2020年6月17日 21:20:01

WordPress部署SSL，全站开启https访问

2020年6月17日 21:21:19

WordPress防御cc攻击代码，禁F5频繁刷新！

2020年6月17日 21:21:51
常见问题
免费下载或者VIP会员专享资源能否直接商用？
提示下载完成但无法解压？
投稿及掉连解决方法：

本站均测试后上架，保证所提供下载的资源的准确性、安全性和完整性。

如有链接无法下载、失效或广告，下方评论区留言，或联系客服处理，看到处理！

如果您也有好的资源或教程，您可以投稿发布，所得成本报酬归发布方所有！

7条回应

  1. eroslp2022-1-1 22:48

    谢谢分享

  2. 39462072022-1-14 19:58

    谢谢分享

    转载请注明来源: https://tsyblog.com/5301.html

  3. jgh2022-2-16 23:07

    谢谢分享

  4. meng123652022-4-13 21:13

    感谢分享

  5. 1232022-6-15 3:44

    谢谢分享

  6. 伟大的2023-5-25 22:52

    你好

  7. 伟大的2023-5-25 22:53

    时代