之前写过的《关闭/显示你的 WordPress 侧边栏,享受阅读快感》,当时并没有考虑到 Cookies 记录状态栏被改变后的状态问题,实在是我的不专业。总不能让用户不厌其烦的点击关闭/显示侧边栏吧。体验很不好!所以抽空对其进行了修改,让其可以根据 Cookies 来记录你的 WordPress 侧边栏的状态是关闭的还是显示的。
在本篇教程的开始之前,先感谢下 PhilNa 兄的帮助,让我解决了 Cookies 保存路径的问题,这样的话不管在哪个内页设置侧边栏的状态,Cookies 都将保存到根路径 “/”。
因为之前写过很详细的关闭/显示 你的 WordPress 侧边栏的教程了,所以请搭配前文观看。
如果你对之前的那篇文章没有理解上的困难的话,那么就开始我们的升级版之旅吧!
1.js的更新,使用这段js代码:
<script type="text/javascript" language="javascript"> $(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', 1); //设置一个名为show_sidebar的cookie,值为no,保存天数为1 $('.close-sidebar').hide(); //隐藏"关闭侧边栏"按钮 $('.show-sidebar').show(); //显示"显示侧边栏"按钮 $('.sidebar').fadeOut(1000); $('#content').animate({width: "910px"}, 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: "690px"}, 1000); $('.sidebar').animate({opacity: 1.0}, 500).fadeIn('slow');}); }); </script> |
2.插入控制按钮
<?php if(!$_COOKIE['show_sidebar']=='no'):?> //当Cookie为show_sidebar的值为0的时候 <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;?> |
将这段代码插入你模板中需要显示功能按钮的地方即可!
3.设置css,当侧边栏不显示的时候,让正文区域宽度增大,侧边栏不显示
<?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页面,如果你还有别的页面的话,同理插入这段代码!
如果你不想让自己的模板文件插入这些css的话,第3步还可以这样写。将第1步的js修改为如下
<script type="text/javascript" language="javascript"> $(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', 1); //设置一个名为show_sidebar的cookie,值为no,保存天数为1 $('.close-sidebar').hide(); //隐藏"关闭侧边栏"按钮 $('.show-sidebar').show(); //显示"显示侧边栏"按钮 $('.sidebar').fadeOut(1000); $('#content').animate({width: "910px"}, 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: "690px"}, 1000); $('.sidebar').animate({opacity: 1.0}, 500).fadeIn('slow');}); //与第1步不同的地方开始,以下是区别与第一步js的新增代码 //Get cookies Value 获取cookies的值 var cookies = document.cookie.split("; "); function GetCookieValue(cookieName) { var ret = null; for (var i = 0; i < cookies.length; i++) { var leeiiocookies = cookies[i].split("="); if (cookieName == leeiiocookies[0]) { ret = unescape(decodeURI(leeiiocookies[1])) } } return ret } //判断cookies的值 if ('no' == GetCookieValue('show_sidebar')){ $('#content').css({'width':'910px'}); //让正文区域的宽度设置为910px,也就是隐藏sidebar之后的可使宽度,你也可以修改为关闭侧边栏时候的动态效果 $('.sidebar').hide(); //让侧边栏隐藏 }); </script> |
不过我还是推荐将 css 写入模板文件,因为这样通过 php 判断的话,用户看到的直接就是侧边栏已经消失了且正文宽度增大后的效果,通过 js 的话在 js 未载入完全之前页面还是先前的样子,然后侧边栏才会消失,正文也会变宽。
大功告成!代码里面加了很详细的注释了,没加注释的在前篇也都已经注释并解释过,怎么样,很 easy 吧!如果你耐心地看完了本文的话,确实是很 easy 的!jQuery 真简便啊真简便!
谢谢观赏!
这次沙发该是我的了吧~ 😛
@Sivan 沒錯,feedsky的rss都還沒刷新呢呵呵~
简单试了一下,没成功,侧栏也没消失。 😥
时间紧迫,明天我再仔细研究吧。
嗯,支持不断完善。
再说那个代码高亮的插件让页面的w3c标准下很多问题呢。
@Jinwen
那你的代码是如何处理的?你博客上的代码似乎都是正常显示而没有被解析!
😯
恩 不错啦~
前几天逛论坛,发现 Discuz! 也有这样的功能 呵呵~
来插小红花~~暂时不折腾~呵呵!
跟PhilNa一样,也有一串的错误代码….
知道哪里的问题了。
window[‘RootCookies’] = {};
window[‘RootCookies’][‘SetCookie’] = SetCookie;
这里改成
window[‘PHC’] = {};
window[‘PHC’][‘SetCookie’] = SetCookie;
或者把PHC.SetCookie(‘show_sidebar’, ‘no’, 1); 改成
RootCookies.SetCookie(‘show_sidebar’, ‘no’, 1);
都可以正常运作,但是打开别的页面后,导航显示的开关钮正确,但是侧栏没有隐藏。
对了,还有我的页面http://demo.sivan.in/把那个”easeOutBounce”删除了才有效果,不知道是不是跟我改变两个类的长度有关。默认的代码只能隐藏边栏,正文区域不能变宽。
现在只有按钮那里正常了,是不是sidebar那里也要加一个
<?php if(!$_COOKIE[‘show_sidebar’]==’no’):?>
这样的判定呢?
@Zoll
恩,關閉側邊欄的功能還是滿常見的。
@吖Bee
錯誤代碼是新評論發送短信提醒所致,暫時先停掉那個功能了~
@Sivan RootCookies只是一個命名空間,我下面忘記改了,現在修改了模板的部分了,應該可以正常了。你最好先清除下你的cookies再進行測試,應該是沒有問題了的。
@Sivan
我的疏忽,easeOutBounce是我的插件,原文又修改了。sidebar那裡不用加判斷不然的話側邊欄就不能調用了。
@Sivan
继续疏忽,发现自己漏写了一段代码…昨天我肯定脑袋被门板夹过了,更新中。
@Leeiio
偶耶=3=成功了~
@Sivan
我昏头了确实,还真对不起读者啊,半成品都发出来了,好在我的站目前关注度还不高哈~
@Leeiio
因为我根本没有用代码高亮的插件,呵呵。现在每次更改主题我都得看w3c上是否通过的,那些东西很麻烦,还不如不加。
😀 谢谢leeiio的辛勤劳动啊 等我学到Cookies部分就来好好研究研究
@Jinwen
http://thisblog.usejquery.com/2009/03/11/highlight-your-source-code-with-jquery-and-chili
这篇文章是教人利用jQuery与Chili来高亮代码的 貌似可以通过W3C验证的,有心情可以研究研究
越来越专业了,绝对收藏!!
twitter看到好几条了.一直在更新??我的那个theme不知道能用不能用,有时间我也研究研究…
试试啊 😀 😀
问一下第三部的css插入到那些页面的具体什么位置呀??还是说页面的什么位置都可以吗??
@kerby
页面的最顶上即可~
Pingback: RSSA频道 » Blog Archive » 美化 Wordpress 标题,个性字体生成图片标题插件推荐!
我现在想要的效果是,主页显示侧边栏,内容页去除侧边栏,并且内容页变大,我觉得比你现在的效果简单多了,但是我不知道怎么解决,谢谢!
@程晓涛
wordpress后台编辑主题那里不是分开了首页index.php和单独也single.php么,两个页面分开定义格式就可以了~
最近我也在用cookie结合js做一些东西。。
Pingback: JQuery(侧边栏(开/关)测试…完美 | MOPVHS's Blog
试了很多次,关闭侧边栏刷新后还是会出现
@洁 cookies没设对吧
现在的代码算完整了吗?我怎么用了没有效果呢?
@龙飞扬 可否给出地址我看看
我是新手我用了点了也没效果,代码页看不太懂。麻烦能不能整合成文件,直接用函数来调用。谢谢!其实我是想要一个滑动隐藏的侧边栏效果。呵呵。这个对我来说就更是天方夜谭了。。。。就类似一些滑动的分享按钮那样的。望能收到你的答复。
@小白 呃,不好意思,这里只提供了思路,不太有空整个傻瓜式的安装方法,见谅
按照这样弄的。还是没有效果。
@爱惜 继续
不知道那里出错了。请教了。
@爱惜 这个对js乃至对jQuery没有一定了解的话还是不建议折腾了
@Leeiio 好久没看见更新了 原来还在答疑啊 哈哈~
😥 咋就看不懂呢.. 不知道放到什么地方 js 要新建文件吗 ?
Pingback: 开关边栏和cookies那些事 | Ben is Me