无作为
不仅仅是一种态度!
当前位置: 无作为 » 技术教程 » wordpress技术经验 » WordPress显示和隐藏侧边栏

WordPress显示和隐藏侧边栏

WordPress添加显示和隐藏侧边栏按钮开关,无需插件,这里给我的网站添加一个显示和隐藏侧边栏的开关吧,

无作为分享两种方法,一种带JS效果框的麻烦点,另一种简单明了,直接粘贴即可使用,

首先来看看无作为的效果图:

WordPress显示和隐藏侧边栏

这种是简单点的方法,直接点击显示隐藏,不过隐藏了之后还要显示边侧栏的话,文章部分会看不见,大概最右边一个字的样子,不过不影响的,方法如下:

方法一(简单)

1.在主题的header.php中添加如下代码,当然也可以单独写进一个js文件,然后在header.php中引入也可以,无作为是直接添加的:

<script>
 jQuery(document).ready(function($) {
 $('.close-sidebar').click(function() {
 $('.close-sidebar,.sidebar').hide();
 $('.show-sidebar').show();
 $('.content').animate({
 width: "1265px"
 },
 0);
 });
 $('.show-sidebar').click(function() {
 $('.show-sidebar').hide();
 $('.close-sidebar,.sidebar').show();
 $('.content').animate({
 width: "885px"
 },
 0);
 });
 });
</script>

代码说明:将其中的1265px、885px、.content、.sidebar修改为你主题对应的文章内容页+侧边栏宽度、文章页内容宽度、文章内容容器、侧边栏容器即可。
2.在你布置该按钮的地方添加如下代码,一般是添加到文章标题下面,当然代码可以根据你自己的主题稍作修改。

<span class="bianlan"><span class="close-sidebar">隐藏侧边</span><span class="show-sidebar" style="display:none;">显示侧边</span></span>

方法到此为止,上面代码大家自己添加在主题内即可。

方法二

这个方法效果是一样的,不过复杂点,但是更加美观,这个倒是不错,反正也是一劳永逸的操作,效果图如下:

WordPress显示和隐藏侧边栏

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

添加CSS样式

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

/**隐藏显示侧边栏**/
#primary.primary {width: 100%;}
.sidebar {display: none;}
/* code from:http://www.wuzuowei.net*/

以下非必要修改: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.wuzuowei.net*/

添加隐藏/显示边栏按钮

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

<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.wuzuowei.net */

两种效果如上,当然网上也有更多的效果样式和教程,大家都可以参考一下。

AD:>>>宅男福利点击在线观看<<<

历史上的今天:

所有免费资源、福利、电影、破解软件未经允许不得转载:www.wuzuowei.net无作为 » WordPress显示和隐藏侧边栏
分享到: 更多 (0)

来句评论吧! 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

无作为-不仅仅是一种态度

登录/注册文章归档