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

作者:matrix 被围观: 2,414 次 发布时间:2013-10-01 分类:Wordpress | 9 条评论 »

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

图片4819-添加WordPress开启关闭侧边栏功能

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

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

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

<script>  
jQuery(document).ready(function($){  
(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);$('#close-sidebar').hide();$('#show-sidebar').show();$('#celan').hide();$('.grid_10').animate({width: "870px"}, 1000);});  
$('#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);});  
});  
</script>  

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

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

<div style="position: absolute;right: 0px;">  
          <?php if(!$_COOKIE['show_sidebar']=='no'):?>  
            <li id="close-sidebar" title="显示/关闭侧边栏"><a href="javascript:void()">关闭侧边栏</a></li>  
            <li id="show-sidebar" style="display:none;"title="显示/关闭侧边栏"><a href="javascript:void()">显示侧边栏</a></li>  
        <?php else: ?>  
            <li id="close-sidebar" style="display:none;" title="显示/关闭侧边栏"><a href="javascript:void()">关闭侧边栏</a></li>  
            <li id="show-sidebar" title="显示/关闭侧边栏"><a href="javascript:void()">显示侧边栏</a></li>  
        <?php endif;?>  
            <?php if($_COOKIE['show_sidebar']=='no'): ?>  
<style type="text/css">  
#content {width:870px;}  
.grid_10 {width:870px;}  
#celan {display:none;}  
</style>  
        <?php endif; ?>  
</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=

 

其他文章:
本文固定链接:https://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了

添加新评论 »

 🙈 😱 😂 😛 😭 😳 😀 😆 👿 😉 😯 😮 😕 😎 😐 😥 😡 😈 💡

插入图片

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