升级版!Cookies 记录你的 WordPress 侧边栏关闭/显示的状态

升级版!Cookies 记录你的 WordPress 侧边栏关闭/显示的状态
之前写过的《关闭/显示你的 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
    那你的代码是如何处理的?你博客上的代码似乎都是正常显示而没有被解析!

  • summeral

    😯

  • 恩 不错啦~
    前几天逛论坛,发现 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=成功了~ :mrgreen:

  • @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不知道能用不能用,有时间我也研究研究…

  • xxx

    试试啊 😀 😀

  • 问一下第三部的css插入到那些页面的具体什么位置呀??还是说页面的什么位置都可以吗??

  • @kerby
    页面的最顶上即可~

  • Pingback: RSSA频道 » Blog Archive » 美化 Wordpress 标题,个性字体生成图片标题插件推荐!()

  • 程晓涛

    我现在想要的效果是,主页显示侧边栏,内容页去除侧边栏,并且内容页变大,我觉得比你现在的效果简单多了,但是我不知道怎么解决,谢谢!

  • @程晓涛
    wordpress后台编辑主题那里不是分开了首页index.php和单独也single.php么,两个页面分开定义格式就可以了~

  • 最近我也在用cookie结合js做一些东西。。

  • Pingback: JQuery(侧边栏(开/关)测试…完美 | MOPVHS's Blog()

  • 试了很多次,关闭侧边栏刷新后还是会出现

  • 现在的代码算完整了吗?我怎么用了没有效果呢?

  • 小白

    我是新手我用了点了也没效果,代码页看不太懂。麻烦能不能整合成文件,直接用函数来调用。谢谢!其实我是想要一个滑动隐藏的侧边栏效果。呵呵。这个对我来说就更是天方夜谭了。。。。就类似一些滑动的分享按钮那样的。望能收到你的答复。

    • @小白 呃,不好意思,这里只提供了思路,不太有空整个傻瓜式的安装方法,见谅 :mrgreen:

  • 按照这样弄的。还是没有效果。

  • 不知道那里出错了。请教了。

    • @爱惜 这个对js乃至对jQuery没有一定了解的话还是不建议折腾了

    • 球犯

      @Leeiio 好久没看见更新了 原来还在答疑啊 哈哈~

  • 金蝉子

    😥 咋就看不懂呢.. 不知道放到什么地方 js 要新建文件吗 ?

  • Pingback: 开关边栏和cookies那些事 | Ben is Me()