chrafz今天分享在WordPress中添加隐藏/显示侧边栏的方法。
先查看自己主题的主体样式是不是id=“primary”，侧边栏又是不是id=“sidebar”，不是则修改之；另外宽度width值也根据页面宽度相应修改！
添加CSS样式
在style.css样式表中添加如下样式：
|
1 2 3 4 |
/**隐藏显示侧边栏**/ #primary.primary {width: 100%;} .sidebar {display: none;} /* code from:http://chrafz.com */ |
添加JS控制
在网站相应JS文件中添加以下代码：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
// 隐藏侧边 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"; } } /* code from:http://chrafz.com */ |
添加隐藏/显示边栏按钮
添加按钮
根据需要在页面相应位置添加显示和隐藏按钮，代码：
|
1 2 3 |
<li class="r-hide"> <a href="javascript:pr()" onclick="javascript:this.innerHTML=(this.innerHTML=='隐藏边栏'?'显示边栏':'隐藏边栏');">隐藏边栏</a> </li> |
按钮样式
以下给出一个美化按钮的参考样式，可以根据需要自行调整：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
.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; } /* code from:http://chrafz.com */ |
支付宝扫一扫
微信扫一扫
