WordPress jQuery隐藏侧边栏

其实这个东西想做已经很久了,在自己换了主题之后就想能够实现动态隐藏掉侧边栏,虽然文章不长。但是这样对于阅读还是比较好的。从网上也看过一些代码,但是效果一般,现在实现的效果还可以,但是默认隐藏和显示的代码还是有问题。并且目前也不想折腾了,先把以前的代码贴出来吧。这个东西也是参考的别人的文章。

代码的主要内容就是一个js代码,内容如下:

/* 侧边栏 */
$(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文件,否则是没有效果的。

< ?php if(!$_COOKIE['show_sidebar']=='no'):?>
  • 关闭侧边栏
  • < ?php else: ?>
  • 显示侧边栏
  • < ?php endif;?>

     
    需要导入的jQuery文件和js代码:

    
    
    
    原文参考请看这里:http://leeiio.me/cookies-wordpress-sidebar/ 
    

    需要将路径修改为自己的js保存的路径。
    设置css,当侧边栏不显示的时候,让正文区域宽度增大,侧边栏不显示

    < ?php if($_COOKIE['show_sidebar']=='no'):?>   
    //当Cookie为show_sidebar的值为no的时候,载入一下的两个css
    
    < ?php endif;?>
    

    将以上这段代码插入index.php以及single.php以及page.php页面,如果你还有别的页面的话,同理插入这段代码!
    原文链接,另外还有一个修复的链接:http://www.sprityaoyao.org/hack/15.html 

    另外如果使用上面的代码,需要根据自己的主题对css设置的宽度进行修改。

     

    ☆版权☆

    * 网站名称:obaby@mars
    * 网址:https://h4ck.org.cn/
    * 个性:https://oba.by/
    * 本文标题: 《WordPress jQuery隐藏侧边栏》
    * 本文链接:https://h4ck.org.cn/2012/05/4061
    * 短链接:https://oba.by/?p=4061
    * 转载文章请标明文章来源,原文标题以及原文链接。请遵从 《署名-非商业性使用-相同方式共享 2.5 中国大陆 (CC BY-NC-SA 2.5 CN) 》许可协议。


    猜你喜欢:

    5 comments

      1. 公主 Queen 
        Google Chrome 33 Google Chrome 33 Windows 7 Windows 7 cn山东省青岛市 联通

        就是要这种鲜血淋漓的感觉,哈哈。这样才比较有feel嘛

    回复 杜小白 取消回复

    您的电子邮箱地址不会被公开。 必填项已用*标注