- 资源介绍
- 更新记录
- 安装教程
RiPro主题美化-添加文章开启关闭侧边栏功能
好久没有做RiPro主题美化的教程了,RiPro主题优化今天就做一个单独的功能送给需要的使用,实现的功能很简单就是添加文章侧边栏开关!

教程开始
1.首先打开ripro/子主题的parts文件夹下single-header.php文件23行下添加以下代码
<span class="bianlan"> <span class="close-sidebar" title="关闭侧边栏" ><a href="javascript:;"><i class="fa fa-toggle-off fa-lg"></i></a></span>
<span class="show-sidebar" title="开启侧边栏" style="display: none;"><a href="javascript:;"><i class="fa fa-toggle-on fa-lg"></i></a></span> </span>
2.在diy.css或者app.css里面添加一下css样式
/*侧边栏*/
@media (max-width:767px) {
.bianlan {
display: none
}
}
3.添加JS代码,两种方法
第一种添加到全局可以调用的js文件或者自定义的js文件内
第一种添加到全局可以调用的js文件或者自定义的js文件内
/*隐藏侧边JS代码*/
jQuery(document).ready(function($) {
$(‘.close-sidebar’).click(function() {
$(‘.close-sidebar,.sidebar-column’).hide();
$(‘.show-sidebar’).show();
$(‘.article-content’).animate({
width: “1410px”
},
0);
});
$(‘.show-sidebar’).click(function() {
$(‘.show-sidebar’).hide();
$(‘.close-sidebar,.sidebar-column’).show();
$(‘.article-content’).animate({
width: “1016.8px”
},
0);
});
});
第二种添加到footer.php下面
<script>
/*隐藏侧边JS代码*/
jQuery(document).ready(function($) {
$(‘.close-sidebar’).click(function() {
$(‘.close-sidebar,.sidebar-column’).hide();
$(‘.show-sidebar’).show();
$(‘.article-content’).animate({
width: “1410px”
},
0);
});
$(‘.show-sidebar’).click(function() {
$(‘.show-sidebar’).hide();
$(‘.close-sidebar,.sidebar-column’).show();
$(‘.article-content’).animate({
width: “1016.8px”
},
0);
});
});
</script>
大功告成刷新缓存或重启服务器查看前台效果吧!
猜你在找
- 2021-04-25Hi,初次和大家见面了,请多关照!
最后编辑:2021-04-25



