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>

大功告成刷新缓存或重启服务器查看前台效果吧！