WordPress主题添加右侧悬浮导航

使用教程

设置前，请关闭[电脑端的“回到顶部”按钮，后台主题设置里面自己找一下

第一步：添加CSS代码

后台主题设置—>自定义代码—>自定义CSS样式，添加下面的CSS代码。

原代码

/*右侧导航栏*/.elevator_item .hd-time-limited{display: block; position: fixed; right: 5px; bottom: 450px; width: 40px; height: 140px; animation: vip-key 2.4s infinite; margin-top: 10px; border-radius: var(--main-radius);}@keyframes vip-key{0%{bottom: 442px;} 50%{bottom: 450px;} 100%{bottom: 442px;.elevator_item{font-weight:700; position: fixed; right: 5px; bottom: 150px; z-index: 10;}.elevator_item .feedback{width: 40px; height: 40px; background-color: #fff; color: #fa3c64; font-size: 12px; padding: 3px 6px; display: block; border-radius: 5px; text-align: center; margin-top: 10px; /* box-shadow: 0 1px 2px rgba(0, 0, 0, .35);*/ box-shadow: 0 0 10px var(--main-shadow); cursor: pointer;}.elevator_item .medium{position: relative; background-color: #fa3c64; color: #fff;}.elevator_item .medium .lf-box{display: none; position: absolute; right: 41px; top: -90px; width: 370px; height: 280px; padding-right: 10px;}.elevator_item .medium .sp-list{width: 360px; height: 280px; border-radius: 5px; background-color: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .35);}.elevator_item .medium .sp-list li:first-child{height: 70px; border-bottom: 1px solid #e5e5e5; padding: 20px 50px;}.elevator_item .medium li:first-child span{font-size: 14px; color: #383838;float: left; line-height: 30px;}.elevator_item .medium .btn-addGroup{width: 90px; height: 30px; border-radius: 8px; background: #fa3c64; color: #fff; line-height: 30px; text-align: center; float: left; margin-left: 14px;}.elevator_item .medium .spl-li{padding: 22px 34px 0;}.elevator_item .medium .spl-li span{display: block; font-size: 14px; color: #383838; margin-bottom: 8px;}.elevator_item .medium .spl-li img{width: 130px;}.elevator_item .feedback:hover .lf-box{display: block;}.fl{float: left;}.fr{float: right;}.graHover{position: relative; overflow: hidden;}.graHover:before{display: none; position: absolute; top: 0; left: 0; content: ''; width: 100%; height: 100%; background-color: rgba(255, 255, 255, .5);}.graHover:hover:before{display: block;}.clearfix{*zoom: 1;}.clearfix:after{visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0;}.wiiuii-why{background-color: var(--main-bg-color); width: 50px; height: 100%; position: fixed; right: 0; top: 0; z-index: 10; /*box-shadow: -2px 0px 4px 0px rgb(0 0 0 / 10%);*/ box-shadow: 0 0 10px var(--main-shadow);}@media screen and (max-width:768px){.wapnones{display:none;

美化后代码

.wiiuii-navigation-item .hd-time-limited{display: block; position: fixed;width: 40px; height: 140px; animation: vip-key 2.4s infinite; margin-top: 10px; border-radius: var(--main-radius);}
@keyframes vip-key{0%{bottom: 442px;} 50%{bottom: 450px;} 100%{bottom: 442px;
.wiiuii-navigation-item{font-weight:700; position: fixed; right: 5px; bottom: 150px; z-index: 10;}
.wiiuii-navigation-item .feedback{width: 40px; height: 40px; background-color: #fff; color: #fa3c64; font-size: 12px; padding: 3px 6px; display: block; border-radius:  var(--main-radius); text-align: center; margin-top: 10px; box-shadow: 0 0 10px var(--main-shadow); cursor: pointer;}
.wiiuii-navigation-item .medium{position: relative; background-color: #fa3c64; color: #fff;}
.wiiuii-navigation-item .medium .lf-box{display: none; position: absolute; right: 41px; top: -90px; width: 370px; height: 280px; padding-right: 10px;}
.wiiuii-navigation-item .medium .sp-list{width: 360px; height: 280px; border-radius: 5px; background-color: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .35);}
.wiiuii-navigation-item .medium .sp-list li:first-child{height: 70px; border-bottom: 1px solid #e5e5e5; padding: 20px 50px;}
.wiiuii-navigation-item .medium li:first-child span{font-size: 14px; color: #383838;float: left; line-height: 30px;}
.wiiuii-navigation-item .medium .btn-addGroup{width: 90px; height: 30px; border-radius: 8px; background: #fa3c64; color: #fff; line-height: 30px; text-align: center; float: left; margin-left: 14px;}
.wiiuii-navigation-item .medium .spl-li{padding: 22px 34px 0;}
.wiiuii-navigation-item .medium .spl-li span{display: block; font-size: 14px; color: #383838; margin-bottom: 8px;}
.wiiuii-navigation-item .medium .spl-li img{width: 130px;}
.wiiuii-navigation-item .feedback:hover .lf-box{display: block;}
.fl{float: left;}.fr{float: right;}
.wiiuii-Gra-Hover{position: relative; overflow: hidden;}
.wiiuii-Gra-Hover:before{display: none; position: absolute; top: 0; left: 0; content: ''; width: 100%; height: 100%; background-color: rgba(255, 255, 255, .5);border: 1px solid #a9a7a7; border-radius: var(--main-radius);}
.wiiuii-Gra-Hover:hover:before{display: block;}
.wiiuii-clearfix{*zoom: 1;}
.wiiuii-clearfix:after{visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0;}
.wiiuii-why{background-color: var(--main-bg-color); width: 50px; height: 100%; position: fixed; right: 0; top: 0; z-index: 10; box-shadow: 0 0 10px var(--main-shadow);}
@media screen and (max-width:768px){.wapnones{display:none;

第二步：添加HTML代码

后台主题设置—>自定义代码—>自定义底部HTML代码，添加下面的HTML代码。

原版

<!--右侧浮动 开始-->
<div class="wapnones wiiuii-why">
  <div class="elevator_item">
    <a class="hd-time-limited" href="#" style="background: url(https://img.wiiuii.cn/img/26666.png) no-repeat center;" target="_blank" rel="nofollow"></a>
    <a class="feedback graHover signin-loader" style="background-color: #44BBA1;color:#fff;" href="javascript:;" rel="nofollow">点击登陆</a>
    <a class="feedback medium signin-loader hover-show pay-vip" href="javascript:;"  style="background-color: #f2c69f;color:#383838;">活动专区
      <div class="lf-box">
        <ul>
         <li> 
           <!--若用我的图片一定要把图片下载到本地！-->
           <div style="padding-bottom: 5px;">
           <img style="border-radius: 8px;" src="https://img.wiiuii.cn/img/VVVSVIP.jpg">
             </div>
           <img style="border-radius: 8px;" src="https://img.wiiuii.cn/img/VVVIPS.jpg">
          </li>
        </ul>
      </div>
    </a>
    <a class="feedback graHover main-shadow toggle-theme" style="background-color: var(--key-color);color:var(--main-bg-color);" href="javascript:;" rel="nofollow">模式切换</a>
    <a target="_blank" class="feedback graHover" style="background-color: #3ba4f9;color:#fff;" href="https://www.wiiuii.cn/newposts" rel="nofollow">发布文章</a>
    <div class="feedback medium">官方客服
      <div class="lf-box">
        <ul class="sp-list">
          <li>
            <span>官方客服：1431258805</span>
            <a href="tencent://AddContact/?fromId=50&fromSubId=1&subcmd=all&uin=1431258805" target="_self" class="btn-addGroup graHover" rel="nofollow">一键联系</a></li>
          <li class="spl-li clearfix mobile-hide">
            <div class="fl">
              <span>微信公众号</span>
              <img src="https://www.wiiuii.cn/wp-content/uploads/2021/02/9ce98472f1e7.png" ></div>
            <div class="fr">
              <span>微信公众号</span>
              <img src="https://www.wiiuii.cn/wp-content/uploads/2021/02/0af9da361143.png" ></div>
          </li>
        </ul>
      </div>
    </div>
          <a class="feedback graHover main-shadow muted-2-color ontop radius8 fade" style="background-color: #1e6be3;color:#fff;display: block;" href="javascript:(scrollTo());" >返回顶部</a>
 </div>
</div>
  <!--右侧浮动 结束-->

美化版

<!--右侧浮动 开始-->
<div class="wapnones wiiuii-why">
  <div class="wiiuii-navigation-item">
    <a class="hd-time-limited" href="#" style="background: url(https://img.wiiuii.cn/img/cfxy.jpg) no-repeat center;" target="_blank" rel="nofollow"></a>
    <a class="feedback wiiuii-Gra-Hover signin-loader jb-yellow" style="color:#fff;" href="javascript:;" rel="nofollow">点击登陆</a>
    <a class="feedback medium jb-vip1 signin-loader hover-show pay-vip" href="javascript:;"  style="color:#383838;">活动专区
      <div class="lf-box">
        <ul>
         <li> 
           <!--若用我的图片一定要把图片下载到本地！-->
           <div style="padding-bottom: 5px;">
           <img style="border-radius: 8px;" src="https://img.wiiuii.cn/img/VVVSVIP.jpg">
             </div>
           <img style="border-radius: 8px;" src="https://img.wiiuii.cn/img/VVVIPS.jpg">
          </li>
        </ul>
      </div>
    </a>
    <a class="feedback wiiuii-Gra-Hover main-shadow toggle-theme" style="background-color: var(--key-color);color:var(--main-bg-color);" href="javascript:;" rel="nofollow">模式切换</a>
    <a target="_blank" class="feedback wiiuii-Gra-Hover jb-blue" style="color:#fff;" href="https://www.wiiuii.cn/newposts" rel="nofollow">发布文章</a>
    <div class="feedback medium jb-red">联系星语
      <div class="lf-box">
        <ul class="sp-list">
          <li>
            <span>星语企鹅：1431258805</span>
            <a class="btn-addGroup wiiuii-Gra-Hover" href="tencent://AddContact/?fromId=50&fromSubId=1&subcmd=all&uin=1431258805" target="_self" rel="nofollow">一键联系</a></li>
          <li class="spl-li wiiuii-clearfix mobile-hide">
            <div class="fl">
              <span>微信公众号</span>
              <img src="https://www.wiiuii.cn/wp-content/uploads/2021/02/9ce98472f1e7.png" ></div>
            <div class="fr">
              <span>星语微信号</span>
              <img src="https://www.wiiuii.cn/wp-content/uploads/2020/10/cfbf6f4c8292.png" ></div>
          </li>
        </ul>
      </div>
    </div>
          <a class="feedback wiiuii-Gra-Hover jb-purple main-shadow muted-2-color ontop radius8 fade" style="color:#fff;" href="javascript:(scrollTo());" >返回顶部</a>
 </div>
</div>
  <!--右侧浮动 结束-->

说明：

若需要上面的图片，自己下载保存。自己添加、修改代码。添加模块请自己修改CSS的“elevator_item”类里的“bottom：150px;”高度，不然很丑哦。蓝色的”星语的小木屋”图片大小是40×140。