Wordpress隐藏显示侧边栏

文章目录[隐藏]

首先要查看自己的主题设计时,页面文章主题的ID,和侧边栏的ID,便于js获取,以下的内容 侧边栏 ID="side",页面主题的 ID="main",你的如果是不是的修改下面的内容。
1、自己主题的js中添加

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

2、HTML结构

你可以集成在页面中,也可以单独做一个固定按钮,css来控制显示样式

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

3、在主题的style.css添加css

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

4、按钮样式
美化按钮参考样式,其实你是一个css高手,这步是多余的。

.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;
}

原文:http://www.Timle.CN


发布日期:

所属分类: Wordpress 综合 标签: