Wordpress隐藏显示侧边栏

概述侧边栏为我们提供了 一些最新文章最热文章的信息，占用了一定页面，有时候我仅仅为了阅读文章内容，可以把侧边栏隐藏掉，需要的时候再出来，添加一个控制按钮，非常方便，主要通过Js来实现。首先要查看自己的主题

侧边栏为我们提供了 一些最新文章最热文章的信息，占用了一定页面，有时候我仅仅为了阅读文章内容，可以把侧边栏隐藏掉，需要的时候再出来，添加一个控制按钮，非常方便，主要通过Js来实现。

首先要查看自己的主题设计时，页面文章主题的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来控制显示样式

href="JavaScript:pr()" onclick="JavaScript:this.INNERHTML=(this.INNERHTML=='隐藏边栏'?'显示边栏':'隐藏边栏');">隐藏边栏

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.04);

}

.r-hIDe a:hover {

background: #568abc;

color: #fff;

border: 1px solID #568abc;

}

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

总结

以上是内存溢出为你收集整理的Wordpress隐藏显示侧边栏全部内容，希望文章能够帮你解决Wordpress隐藏显示侧边栏所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。