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

Timle.CN:专注 WordPress建站WordPress主题WordPress插件 分享,同时也关注各种 建站资源前端技巧免费资源IT互联网热点 。CTRL+D即可收藏本站,我们期待您的再次光临!

[文章目录]
文章导读

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

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

隐藏/显示侧边栏点击放大查看动态效果图

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

添加CSS样式

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

/**隐藏显示侧边栏**/
#primary.primary {width: 100%;}
.sidebar {display: none;}
/* code from:http://www.Timle.CN */
以下非必要修改:WordPress主题模板相应文件中:

<div id="primary"> 修改为: <div id="primary" class="content-area">
<div id="sidebar"> 修改为: <div id="sidebar" class="widget-area">

非必要修改,可改可不改,不影响实际效果。

添加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";
	}
}
/* code from:http://www.Timle.CN */

添加隐藏/显示边栏按钮

添加按钮

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

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

按钮样式

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

.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;
}
/* code from:http://www.Timle.CN */

以上。

版权声明:本站所有文章和资源使用CC BY-NC-SA 3.0 CN协议发布,转载应当以相同方式注明并注明文章来自“Timle.CN -> WordPress 隐藏/显示侧边栏 免插件”。在页面右边可以分享本文哦!

有 9 发吐槽 关于 “WordPress 隐藏/显示侧边栏 免插件

  1. 沙发
    陌小雨 2015-08-1
    相比来说,我分享的代码更简洁些 :oops:
    • 回复
      Timle.CN 2015-08-3
      @陌小雨 你的那篇网站一直要登陆后才可以查看,所以就一直没去看。不晓得你分享的代码是啥样的。 :mad:
  2. 板凳
    爆笑段子 2015-08-7
    先收藏了,以前还特意找过的。。
    • 回复
      Timle.CN 2015-08-7
      @爆笑段子 我也找了很久,试过很多个,现在这个很简洁,效果不错。
  3. 地板
    ScottJu 2015-10-28
    教程成功了,但是css样式美化没成功。蛋疼。
  4. 4楼
    rocky 2015-12-13
    请问,这个怎么让它默认已隐藏边栏的模式啊?
    • 回复
      Timle.CN 2015-12-14
      @rocky 将隐藏边栏的样式添加为文章模块的默认样式即可。
  5. 5楼
    龙笑天 2016-05-11
    肿么没早点看到这篇文章…搞的我折腾了好久,才弄成功…
  6. 6楼
    跨境电商平台 2016-07-26
    非常不错!!!!

疑问 难过 胜利 微笑 抠鼻 可爱 抓狂 偷笑 奋斗 衰 撇嘴 色 贼笑 爬虫 鼓掌 发怒 擦汗 握手 酷 玫瑰 哭 呲牙

WordPress 隐藏/显示侧边栏 免插件
18 票, 5.00 平均等级 ( 99% 分 )