您的位置:小众博客 > Wordpress > 正文

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

2016年04月23日 / Wordpress / 2963人阅读(点这评论)

免插件实现WordPress隐藏/显示侧边栏,默认显示侧边栏,点击导航最右的“关闭侧边栏”,右侧侧边栏消失,左侧文章主体部分完全显示,并且导航内的文字变为“显示侧边栏”,点击则过程相反。

整体效果明显,如下图所示:

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

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

添加CSS样式

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

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

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

添加隐藏/显示边栏按钮

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

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

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

.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 隐藏/显示侧边栏的方法,有需要的朋友可以试试,我博客文章页就使用了,大家可以看看文章页侧边的隐藏边栏试试!

来源:张力博客

标签:wordpress教程 

ABOUT
七牛云存储 衡天主机
一灯学堂,专注互联网前端培训 特卖
最新文章
月度热门
  • wordpress文章评论表单新增电话、QQ字段
  • “零”市场预算,如何创业?
  • 热门话题