WordPress免插件:给文章添加隐藏/显示侧边栏

2020-01-14 17:41 阅读: 309 次 隐藏边栏


一般文章都是默认显示侧边栏,为了提高阅读体验,很多博客都会添加一个"隐藏/显示侧边栏 "功能,点击“关闭侧边栏”,右侧侧边栏消失,左侧文章主体部分完全显示,并且导航内的文字变为“显示侧边栏”,再次点击则过程相反。当然,闲鱼是自带这个功能的,只是将样式改了一下

直接上教程吧

CSS样式

/**隐藏显示侧边栏**/  
#primary.primary {width: 100%;}  
.sidebar {display: none;} 
.r-hide li a {  
color: #999;  
line-height: 26px;  
margin: 0 5px 0 0;  
padding: 0 10px;  
display: block;  
border: 1px solid #ddd;  
border-radius: 2px;  
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);  
}  
.r-hide a:hover {  
background: #568abc;  
color: #fff;  
border: 1px solid #568abc;  
}
.img-responsive {
  display: inline-block;
  height: auto;
  max-width: 100%;
}

新建JS函数文件


// 隐藏侧边  
function pr() {  
var R=document.getElementById("sidebar");  
var L=document.getElementById("primary");  
if (R.className=="sidebar")  
    {  
        R.className="widget-area";  
        L.className="content-area";  
    }  
else  
    {  
        R.className="sidebar";  
        L.className="primary";  
    }  
}  
/*

在header.php或者footer.php 添加js文件调用

<script src="<?php echo get_template_directory_uri(); ?>/XXXX.js"></script>

根据需要在页面相应位置添加显示和隐藏按钮,代码:

<li class="r-hide">  
<a href="javascript:pr()" onclick="javascript:this.innerHTML=(this.innerHTML=='隐藏边栏'?'显示边栏':'隐藏边栏');">隐藏边栏</a>  
</li> 

<完成>

请一秒钟记住我们的网址:www.aliyuncms.com ! 转载请注明:WordPress免插件:给文章添加隐藏/显示侧边栏
版权声明:本文著作权归原作者所有,欢迎分享本文,谢谢支持!
转载注明:阿里云CMS| WordPress免插件:给文章添加隐藏/显示侧边栏
亦之博客-最专业的WordPress主题免费收集分享平台!

发表评论


表情