实现WordPress 隐藏/显示侧边栏 的方法

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

首先分别查看自己主题的主体样式是不是id=“primary”，侧边栏又是不是id=“sidebar”，不是则修改之；另外宽度width值也根据页面宽度相应修改！添加CSS样式
1、在style.css样式表中添加如下样式：

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

2、添加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";  
    }  
    }  

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

    <ul>  
        <li class="r-hide"><a>隐藏边栏</a></li>  
    </ul>  

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

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

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