思来想去总感觉RIpro主题好像差点感觉,最终做了一个整站侧边悬浮导航菜单,带签到、客服、加群、风格切换、全屏等功能。
![图片[1]-RIpro主题添加整站侧边导航条教程-99源码屋](https://tu.99yiz.com/2021/12/20211230112957841.gif?imageView2/0/format/webp/q/75)
教程开始:
- 修改主题文件地址:/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
请登录后发表评论
注册
社交帐号登录