其实这个东西想做已经很久了,在自己换了主题之后就想能够实现动态隐藏掉侧边栏,虽然文章不长。但是这样对于阅读还是比较好的。从网上也看过一些代码,但是效果一般,现在实现的效果还可以,但是默认隐藏和显示的代码还是有问题。并且目前也不想折腾了,先把以前的代码贴出来吧。这个东西也是参考的别人的文章。
代码的主要内容就是一个js代码,内容如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | /* 侧边栏 */ $(document).ready(function(){ //SetCookies (function(){ function SetCookie(c_name,value,expiredays){ var exdate=new Date(); exdate.setDate(exdate.getDate()+expiredays); document.cookie=c_name+"="+escape(value)+((expiredays==null)?"":";expires="+exdate.toGMTString())+";path=/"; //如果你希望每个页面都有个独立的 Cookies 设置的话请去掉+";path=/",这样的话leeiio.me/xxx/ 和leeiio.me/yyy/ 的侧边栏状态都将是独立的 } window['RootCookies'] = {}; window['RootCookies']['SetCookie'] = SetCookie; //JavaScript 的命名空间,假使你已有一个 SetCookie 的函数的话将不会与之冲突,通过 RootCookie.SetCookie() 调用 })(); //Toggle Sidebar $('.close-sidebar').click(function() { RootCookies.SetCookie('show_sidebar', 'no', 7); //设置一个名为show_sidebar的cookie,值为no,保存天数为1 $('.close-sidebar').hide(); //隐藏"关闭侧边栏"按钮 $('.show-sidebar').show(); //显示"显示侧边栏"按钮 $('.obaby-sidebar1').fadeOut(1000); $('#content').animate({width: "928px"}, 1000); }); $('.show-sidebar').click(function() { RootCookies.SetCookie('show_sidebar', 'no', -1); //设置一个名为show_sidebar的cookie,值为no,保存天数为-1,也就是说让cookies失效,也就是删除这个cookie $('.show-sidebar').hide(); //隐藏"显示侧边栏"按钮 $('.close-sidebar').show(); //显示"关闭侧边栏"按钮 $('#content').animate({width: "678px"}, 1000); $('.obaby-sidebar1').animate({opacity: 1.0}, 500).fadeIn('slow');}); }); |
另外在页面中加入控制显示的代码就行了,加入到主题的header.php中即可,并且在加入代码之后要引入上面的js文件,否则是没有效果的。
1 2 3 4 5 6 7 8 9 | <div id="sidebarconfig" style="top:125px;left:833px;position:absolute;"> < ?php if(!$_COOKIE['show_sidebar']=='no'):?> <li class="close-sidebar" title="关闭侧边栏">关闭侧边栏</li> <li class="show-sidebar" style="display:none;" title="显示侧边栏">显示侧边栏</li> < ?php else: ?> <li class="close-sidebar" style="display:none;" title="关闭侧边栏">关闭侧边栏</li> <li class="show-sidebar" title="显示侧边栏">显示侧边栏</li> < ?php endif;?> </div> |
需要导入的jQuery文件和js代码:
1 2 3 4 | <script type="text/javascript" src="<?php bloginfo('template_url'); ?>/script.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script> <script type="text/javascript" src="<?php bloginfo('template_url'); ?>/sidebar.js"></script> 原文参考请看这里:<a href="http://leeiio.me/cookies-wordpress-sidebar/ " target="_blank">http://leeiio.me/cookies-wordpress-sidebar/ </a> |
需要将路径修改为自己的js保存的路径。
设置css,当侧边栏不显示的时候,让正文区域宽度增大,侧边栏不显示
1 2 3 4 5 6 7 8 9 | < ?php if($_COOKIE['show_sidebar']=='no'):?> //当Cookie为show_sidebar的值为no的时候,载入一下的两个css <style type="text/css"> #content {width:910px;} //让主题部分的宽度为910px,请参照自己的blog进行调整 .sidebar {display:none;} //让侧边栏不显示 </style> < ?php endif;?> |
将以上这段代码插入index.php以及single.php以及page.php页面,如果你还有别的页面的话,同理插入这段代码!
原文链接,另外还有一个修复的链接:http://www.sprityaoyao.org/hack/15.html
另外如果使用上面的代码,需要根据自己的主题对css设置的宽度进行修改。
原创文章,转载请注明: 转载自 obaby@mars
本文标题: 《WordPress jQuery隐藏侧边栏》
本文链接地址: http://h4ck.org.cn/2012/05/wordpress-jquery-hide-sidebar/
5条评论
挺实用的这个。
I use it in my new theme, pretty good!
哈哈,等你l的新主题上线
这主题。溅血的感觉。。。博主口味独特
就是要这种鲜血淋漓的感觉,哈哈。这样才比较有feel嘛