添加WordPress开启关闭侧边栏功能

作者:Matrix 被围观: 1,118 次 发布时间:2013-10-01 分类:wordpress建站 拷贝型 | 9 条评论 »

NOTICE:这是一个创建于 1161 天前的主题,其中的信息可能已经有所发展或是发生改变。

此功能有点鸡肋,不过还是在折腾出来了。

1.加载JQ库,有了的跳过。

2.主题的header上加入js代码:

  1. <script>  
  2. jQuery(document).ready(function($){  
  3. (function(){  
  4. function SetCookie(c_name,value,expiredays){  
  5. var exdate=new Date();  
  6. exdate.setDate(exdate.getDate()+expiredays);  
  7. document.cookie=c_name+"="+escape(value)+((expiredays==null)?"":";expires="+exdate.toGMTString())+";path=/";  
  8. //如果你希望每个页面都有个独立的 Cookies 设置的话请去掉+";path=/",这样的话leeiio.me/xxx/ 和leeiio.me/yyy/ 的侧边栏状态都将是独立的  
  9. }  
  10. window['RootCookies'] = {};  
  11. window['RootCookies']['SetCookie'] = SetCookie;  
  12. //JavaScript 的命名空间,假使你已有一个 SetCookie 的函数的话将不会与之冲突,通过 RootCookie.SetCookie() 调用  
  13. })();  
  14. //Toggle Sidebar  
  15. $('#close-sidebar').click(function(){RootCookies.SetCookie('show_sidebar', 'no', 7);$('#close-sidebar').hide();$('#show-sidebar').show();$('#celan').hide();$('.grid_10').animate({width: "870px"}, 1000);});  
  16. $('#show-sidebar').click(function(){RootCookies.SetCookie('show_sidebar', 'no', -1);$('#show-sidebar').hide();$('#close-sidebar,#celan').show();$('.grid_10').animate({width: "640px"}, 800);$('#celan').delay(800).show(0);});  
  17. });  
  18. </script>  

上面的代码也可保存为*.js加载,需要去掉<script>标签。

3.显示开关侧边栏的代码,需要在哪显示就添加到哪:

  1. <div style="position: absolute;right: 0px;">  
  2.           <?php if(!$_COOKIE['show_sidebar']=='no'):?>  
  3.             <li id="close-sidebar" title="显示/关闭侧边栏"><a href="javascript:void()">关闭侧边栏</a></li>  
  4.             <li id="show-sidebar" style="display:none;"title="显示/关闭侧边栏"><a href="javascript:void()">显示侧边栏</a></li>  
  5.         <?php else: ?>  
  6.             <li id="close-sidebar" style="display:none;" title="显示/关闭侧边栏"><a href="javascript:void()">关闭侧边栏</a></li>  
  7.             <li id="show-sidebar" title="显示/关闭侧边栏"><a href="javascript:void()">显示侧边栏</a></li>  
  8.         <?php endif;?>  
  9.             <?php if($_COOKIE['show_sidebar']=='no'): ?>  
  10. <style type="text/css">  
  11. #content {width:870px;}  
  12. .grid_10 {width:870px;}  
  13. #celan {display:none;}  
  14. </style>  
  15.         <?php endif; ?>  
  16. </div>        

说明:第一行的样式可自定义。

#celan为侧边栏样式,#content和.grid_10为文章内容边框的样式。主题不同,此样式也就需要更改。

其他代码我也不懂,记录END。

参考:http://cnsunbin.com/wordpress/wordpress-close-or-show-sidebar.html

http://isayme.com/2011/09/make-the-theme-thiner.html

http://code.google.com/p/jieim/downloads/detail?name=all.zip&can=2&q=

 

本文固定链接:http://www.hhtjim.com/add-wordpress-open-shutoff-function-of-the-sidebar.html
Matrix
本文章由 Matrix 于2013年10月01日发布在wordpress建站, 拷贝型分类下,目前没有通告,你可以至底部留下评论。
转载请注明:添加WordPress开启关闭侧边栏功能-HHTjim'S 部落格
关键字:,

有9 条评论 »

  1. YYBlog YYBlog 2013-12-11 17:42:42 +0800#3

    真的好鸡肋.....

    • Matrix Matrix Moderator 2013-12-11 18:13:56 +0800

      哈哈 同感 😆
      毕竟都折腾了 还是留着

  2. Small Desert Small Desert 2013-10-3 14:49:01 +0800#2

    额,个人意见:你那个二维码最好固定下位置-

    • Matrix Matrix Moderator 2013-10-3 19:25:15 +0800

      没事 看过些时候换成小清新的主题 😀
      刚开始觉得这个主题还好看,不过现在都看厌了。

      • Small Desert Small Desert 2013-10-3 19:54:04 +0800

        额,这主题样式还不错,不过文章排版的不是很好吧?

        • Matrix Matrix Moderator 2013-10-3 20:06:46 +0800

          文章排版? 反正我觉的还好,不会是很难看的那种
          👿 再难看也不管了

  3. Small Desert Small Desert 2013-10-2 20:57:59 +0800#1

    表示你的主题太CMS了吧?完全不知道最新文章在哪====

    • Matrix Matrix Moderator 2013-10-3 0:06:32 +0800

      😆 最新文章 就上面的图片那些的。
      以后换个小清新的 就不CMS了

添加新评论 »

 😛 Sad 忧伤 👿 Smile 笑脸 😳 😀 😯 😮 😕 😎 😆 😡 😈 Roll Eyes 转眼珠 😉 💡 😐 😥 Mr Green 绿脸先生

NOTICE: You should type some Chinese word (like “你好”) in your comment to pass the spam-check, thanks for your patience!