免插件实现WordPress 隐藏/显示侧边栏

默认显示侧边栏，点击导航最右的“关闭侧边栏”，右侧侧边栏消失，左侧文章主体部分完全显示，并且导航内的文字变为“显示侧边栏”，点击则过程相反。

整体效果明显，如下图所示：

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

添加CSS样式

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

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

2. #primary.primary {width: 100%;}

3. .sidebar {display: none;}

添加JS控制

在网站相应JS文件中添加以下代码：

1. // 隐藏侧边

2. functionpr() {

3. varR=document.getElementById(“sidebar”);

4. varL=document.getElementById(“primary”);

5. if(R.className==”sidebar”)

6. {

7. R.className=”widget-area”;

8. L.className=”content-area”;

9. }

10. else

11. {

12. R.className=”sidebar”;

13. L.className=”primary”;

14. }

15. }

添加隐藏/显示边栏按钮

添加按钮

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

1. <ul>

2. <li class=”r-hide”><a>隐藏边栏</a></li>

3. </ul>

按钮样式

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

1. .r-hideli a {

2. color: #999;

3. line-height: 26px;

4. margin: 0 5px0 0;

5. padding: 0 10px;

6. display: block;

7. border: 1pxsolid#ddd;

8. border-radius: 2px;

9. box-shadow: 0 1px1pxrgba(0, 0, 0, 0.04);

10. }

11. .r-hidea:hover {

12. background: #568abc;

13. color: #fff;

14. border: 1pxsolid#568abc;

15. }

以上就是免插件实现WordPress 隐藏/显示侧边栏的方法，有需要的朋友可以试试，我博客文章页就使用了，大家可以看看文章页侧边的隐藏边栏试试！