WordPress 隐藏/显示侧边栏-张弦先生-chrafz.com

chrafz今天分享在WordPress中添加隐藏/显示侧边栏的方法。

先查看自己主题的主体样式是不是id=“primary”，侧边栏又是不是id=“sidebar”，不是则修改之；另外宽度width值也根据页面宽度相应修改！

添加CSS样式

在style.css样式表中添加如下样式：

/**隐藏显示侧边栏**/
#primary.primary {width: 100%;}
.sidebar {display: none;}
/* code from:http://chrafz.com */

/**隐藏显示侧边栏**/

#primary.primary {width: 100%;}

.sidebar {display: none;}

/* code from:http://chrafz.com */

以下非必要修改：WordPress主题模板相应文件中:

&lt;div id="primary"&gt; 修改为： &lt;div id="primary" class="content-area"&gt;
&lt;div id="sidebar"&gt; 修改为： &lt;div id="sidebar" class="widget-area"&gt;

1 2	<div id="primary"> 修改为： <div id="primary" class="content-area"> <div id="sidebar"> 修改为： <div id="sidebar" class="widget-area">

非必要修改，可改可不改，不影响实际效果。

添加JS控制

在网站相应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";
	}
}
/* code from:http://chrafz.com */

// 隐藏侧边

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 */

添加隐藏/显示边栏按钮

添加按钮

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

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

</li>

按钮样式

以下给出一个美化按钮的参考样式，可以根据需要自行调整：

.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 */