之前写过的《关闭/显示你的 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 真简便啊真简便！
谢谢观赏！
