身正,言谨,谦虚,好学,修德养性!

WordPress 侧边栏关闭/显示Cookie版

技术文档 13273浏览 0评论

这篇文章(http://immmmm.com/close-show-sidebar-prefect-code.html)里面提供了一个比较好的关闭/显示WordPress侧边栏的办法,但是没有使用Cookie记录访客的行为,重新打开页面后之前的行

为失效了,每次都得不厌其烦的点击关闭/显示侧边栏,用户体验很不好。
这篇文章(http://leeiio.me/cookies-wordpress-sidebar/)里面进行了改进,提供了使用Cookie记录 WordPress 侧边栏关闭/显示的状态,这样就不用每次都去点击按钮了,但是作者的做法还有些不太完美,使用他的方法,显示侧边栏和关闭侧边栏这两个不能实时改变,每次都得刷新后才能进行显示和关闭侧边栏的操作。
于是乎,就有了本文,结合两者的优点,可以实时地进行显示和关闭侧边栏的操作,并且通过Cookie的记录访客的行为,以提高用户体验。
1、载入Jquery库,可以是自己下载的也可以是google的,我们调用google的

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>

2.关闭/显示侧边栏的JS代码:
在相应的js代码中加入如下的控制代码:

//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/ 的侧边栏状态都将是独立的
}
//GetCookie
function GetCookie(name)
{
var arr = document.cookie.match(new RegExp("(^| )"+name+"=([^;]*)(;|$)"));
if(arr != null) return unescape(arr[2]); return null;
}
window['RootCookies'] = {};
window['RootCookies']['SetCookie'] = SetCookie;
window['RootCookies']['GetCookie'] = GetCookie;
//JavaScript 的命名空间,假使你已有一个 SetCookie 的函数的话将不会与之冲突,通过 RootCookie.SetCookie() 调用
})();

$('#close-sidebar a').toggle(function(){
if (RootCookies.GetCookie('show_sidebar')) $(this).text("关闭侧边栏");
else $(this).text("显示侧边栏");
RootCookies.SetCookie('show_sidebar', 'no', 1);      //设置一个名为show_sidebar的cookie,值为no,保存天数为1
$('#sidebar').hide();
$('#content').animate({width: "960px"}, 1000);
},function(){
if (RootCookies.GetCookie('show_sidebar')) $(this).text("关闭侧边栏");
else $(this).text("显示侧边栏");
RootCookies.SetCookie('show_sidebar', 'no', -1);     //设置一个名为show_sidebar的cookie,值为no,保存天数为-1,也就是说让cookies失效,也就是删除这个cookie
$('#content').animate({width: "702px"}, 800, function(){$('#sidebar').show();});
});

3、插入控制按钮
将下面这段代码插入你模板中需要显示功能按钮的地方即可!

<?php if(!$_COOKIE['show_sidebar']=='no'):?>
<li id="close-sidebar" title="显示/关闭侧边栏"><a>关闭侧边栏</a></li>
<?php else: ?>
<li id="close-sidebar" title="显示/关闭侧边栏"><a>显示侧边栏</a></li>
<?php endif;?>

4.设置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页面,如果你还有别的页面的话,同理插入这段代码!注意去掉//后面的注释代码
ok,那么现在你就应该可以看到效果了。具体效果请点击右下角的显示侧边栏/关闭侧边栏。

转载请注明:自由的风 » WordPress 侧边栏关闭/显示Cookie版

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

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

网友最新评论 (12)

  1. 我是wordpress的新手看完了还是不会用,放到网站上点了无效。不知道那你出了错。麻烦能不能整合成文件。然后就直接用函数调用,这样简单点。

    小白2011-01-08 15:48 回复
  2. 不同的主题结构不太一样,所需要的修改可能也不完全一样。

    自由的风2011-01-08 23:05 回复
  3. 我的也实现不了。
    最后一段CSS时要加在index.php以及single.php以及page.php页面 这些页面都要添加才有效果还是只加一个index.php就能在首页有效果?

    爱惜2011-01-10 19:12 回复
  4. @爱惜

    都需要加才有效果。
    或者你可以直接在header.php中加载。

    自由的风2011-01-10 20:23 回复
  5. 加上去了还是实现不了。不知道怎么回事。先前以为是代码里的引号的问题。因为WP自动转换成了非英文状态下的引号。我把代码上的引号已经改过英文状态下的了。还是一样。

    爱惜2011-01-11 19:11 回复
  6. 首先,故乡的原风景是我非常喜欢的曲子,赞一个!
    然后,我这里有一款主题,里面有一个短代码(shortcodes):[toggle][/toggle],调用这个短代码就可以将中间的文字/段落实现展开和闭合的功能,有时候在文章中要引用一大段文章,这个功能很好,我研究了很长时间,都没有把这个功能剥离出来,您能不能帮我看看,效果和本文 “关闭侧边栏”的效果很相似,希望得到您的帮助!我将把主题发到你的GMAIL邮箱中。
    另外,你底栏的效果,包括音乐播放,是怎么实现的,可否写篇文章,呵呵!

    老宋博客2011-01-11 19:41 回复
  7. 我的侧边栏ID是#sidebar没错,对的上。
    而主体ID也是#content也没错,就是实现不了。
    请问是什么问题呢?谢谢。

    爱惜2011-01-11 21:34 回复
  8. @老宋博客
    有时间写一下,最近事情比较多,抱歉。呵呵

    自由的风2011-01-12 23:26 回复
  9. @爱惜
    是关闭/显示这个功能实现不了?还是状态信息不能保存?

    自由的风2011-01-12 23:27 回复
  10. @自由的风
    关闭/显示这个功能实现不了。也就是点了没有反应呢。

    爱惜2011-01-13 19:31 回复
  11. 请问博主 最后一个那个添加判断的条件显示侧栏 在你的主题中没有找到啊 就是这个”设置CSS,当侧边栏不显示的时候,让正文区域宽度增大,侧边栏不显示”这个里面的代码在您的主题文件中没有找到,请问您的主题是怎么做到的呢?

    ISayMe2011-04-21 13:34 回复
  12. @ISayMe
    根本文有所不同,直接写到CSS文件里面去了。style-nosidebar.css

    自由的风2011-04-22 13:52 回复