RIpro主题添加整站侧边导航条教程

RIpro主题添加整站侧边导航条教程-99源码屋
RIpro主题添加整站侧边导航条教程
此内容为付费阅读,请付费后查看
4积分
通过安全检测
支持游客购买
网盘极速下载
会员永久免费
付费阅读
已售 67

思来想去总感觉RIpro主题好像差点感觉,最终做了一个整站侧边悬浮导航菜单,带签到、客服、加群、风格切换、全屏等功能。

图片[1]-RIpro主题添加整站侧边导航条教程-99源码屋

教程开始:

  • 修改主题文件地址:/ripro/footer.php
  • 直接复制替换整个文件 并修改里面的”133201002″为您的客服qq号
  • 修改加群连接和微信二维码
</div><!-- end sitecoent --> 
 
 <?php
 $mode_banner = _cao('mode_banner');
 if (is_array($mode_banner) && isset($mode_banner['bgimg']) && _cao('is_footer_banner') ) : ?>
 
 <div class="module parallax">
  <img class="jarallax-img lazyload" data-srcset="<?php echo $mode_banner['bgimg']; ?>" data-sizes="auto" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" >
  <div class="container">
   <h4 class="entry-title">
    <?php echo wp_kses( $mode_banner['text'], array(
     'br' => array(),
    ) ); ?>
   </h4>
   <?php if ( $mode_banner['primary_text'] != '' ) : ?>
    <a<?php echo _target_blank(); ?> class="button" href="<?php echo esc_url( $mode_banner['primary_link'] ); ?>"><?php echo esc_html( $mode_banner['primary_text'] ); ?></a>
   <?php endif; ?>
   <?php if ( $mode_banner['secondary_text'] != '' ) : ?>
    <a<?php echo _target_blank(); ?> class="button transparent" href="<?php echo esc_url( $mode_banner['secondary_link'] ); ?>"><?php echo esc_html( $mode_banner['secondary_text'] ); ?></a>
   <?php endif; ?>
  </div>
 </div>
 <?php endif; ?>
 
 
 <footer class="site-footer">
  <div class="container">
   
   <?php if (_cao( 'is_diy_footer','true' ) ){
    get_template_part( 'parts/diy-footer' );
   }?>
   <?php if ( _cao( 'cao_copyright_text', '' ) != '' ) : ?>
     <div class="site-info">
       <?php echo _cao( 'cao_copyright_text', '' ); ?>
       <?php if(_cao('cao_ipc_info')) : ?>
       <a href="http://beian.miit.gov.cn" target="_blank" class="text"><?php echo _cao('cao_ipc_info')?><br></a>
       <?php endif; ?>
     </div>
   <?php endif; ?>
  </div>
 </footer>
 
 
<div class="float-box">
   <ul class="float-ul float-radius float-text">
      <li>
            <?php if (_cao('is_qiandao','1')) : ?>
            
                <?php if (_cao_user_is_qiandao()) {
                  echo '<a class="click-qiandao zzhuti_qd_1" href="javascript:void(0);" etap="to_top" title="您也签到"><i class="fa fa-calendar"></i><br/>已签';
                }else{
                  echo '<a class="click-qiandao zzhuti_qd_1" href="javascript:void(0);" etap="to_top" title="打卡签到"><i class="fa fa-calendar"></i><br/>签到';
                }
                ?>
                
                
           
            <?php endif; ?>
      
      
 </a>
  </li>
 </ul>
  
 <ul class="float-ul float-radius float-text">
  <li>
   <a class="qq float-border float-text" href="javascript:void(0);">
    <i class="iconfont icon-QQmian"></i><br/>客服    
    <div class="float-alert-box float-radius float-qq-box">
     <h6>工作时间</h6>
     <p>工作日:9:00 - 22:00<br/>节假日:9:00 - 18:00</p>
     <div class="float-qq-btn float-radius" onClick="window.open('https://wpa.qq.com/msgrd?v=3&uin=15001904&site=qq&menu=yes','_blank')">点击咨询客服</div>
    </div>
   </a>
  </li>
  <li>
   <a class="weixin float-border float-text" href="javascript:void(0);">
    <i class="iconfont icon-weixin"></i><br/>微信
    <div class="float-alert-box float-radius float-weixin-box">
     <p>扫一扫添加客服微信</p>
     <img src="https://bbs.5g110.cn/wp-content/themes/ripro/assets/images/hero/a.jpg" width="120" height="120" alt="微信二维码"/>
    </div>
   </a>
  </li>
  <li>
   <a class="weixin float-border float-text" href="javascript:void(0);">
    <i class="iconfont icon-weixin"></i><br/>技术
    <div class="float-alert-box float-radius float-weixin-box">
     <p>本站会员提供搭建服务</p>
     <img src="https://bbs.5g110.cn/wp-content/themes/ripro/assets/images/hero/a.jpg" width="120" height="120" alt="微信二维码"/>
    </div>
   </a>
  </li>
 </ul>
 <ul class="float-ul float-radius float-text">
    <li>
   <a class="fankui float-border float-text" href="https://wpa.qq.com/msgrd?v=3&uin=15001904&site=qq&menu=yes"target="_Blank">
    <i class="iconfont icon-fankui"></i><br/>反馈
   </a>
  </li>
  <li>
   <a class="float-border float-text" href="javascript:void(0);" etap="to_full" title="点击全屏">
    <i class="iconfont icon-quanping2"></i><br/>全屏
   </a>
  </li>
  <li>
   <a class="float-border float-text tap-dark" href="javascript:void(0);" etap="tap-dark" title="夜间模式">
    <i class="iconfont icon-rijianmoshi"></i><br/>切换
   </a>
  </li>
 
 </ul>
  <br/>
 <ul class="float-ul float-radius float-text">
      <li>
<a class="float-border float-text" href="javascript:void(0);" etap="to_top" title="返回顶部">
    <i class="iconfont icon-dingbu"></i><br/>
      
      
 </a>
  </li>
 </ul>
 
</div>
<script>
$(".qq").hover(function () {
 $(this).children(".float-qq-box").show()
},function() {
 $(this).children(".float-qq-box").hide()
});
$(".weixin").hover(function () {
 $(this).children(".float-weixin-box").show()
},function() {
 $(this).children(".float-weixin-box").hide()
});
</script>
<div class="dimmer"></div>
 
<?php if (!is_user_logged_in()) : ?>
    <?php get_template_part( 'parts/popup-signup' ); ?>
<?php endif; ?>
 
<?php get_template_part( 'parts/off-canvas' ); ?>
 
<?php if (_cao('is_console_footer','true')) : ?>
<script>
    console.log("version:<?php echo _the_theme_name().'_v'._the_theme_version();?>");
    console.log("SQL 请求数:<?php echo get_num_queries();?>");
    console.log("页面生成耗时: <?php echo timer_stop(0,5);?>");
</script>
 
<?php endif; ?>
 
<?php if (_cao('web_js')) : ?>
<?php echo _cao('web_js');?>
<?php endif; ?>
 
<?php wp_footer(); ?>
 <div class="waveHorizontals mobile-hide"> 
  <div id="waveHorizontal1" class="waveHorizontal"></div> 
  <div id="waveHorizontal2" class="waveHorizontal"></div> 
  <div id="waveHorizontal3" class="waveHorizontal"></div>
 </div>
</body>
</html>

主题CSS文件地址:/ripro/assets/css/diy.css

直接复制粘贴到diy.css文件最下面即可

------本页内容已结束,喜欢请分享------

感谢您的来访,获取更多精彩文章请收藏本站。

© 版权声明
THE END
喜欢就支持一下吧
点赞5 分享
评论 抢沙发

请登录后发表评论

服务支持

用心做更好的精品源码站,服务各个行业,让大家快速创建属于自己的网站 。

2000+
优质源码
8年+
开发经验
1200
注册用户
7*24
随时响应