添加WordPress开启关闭侧边栏功能
WordPress 功能 开启 添加 关闭 侧边
2023-06-13 09:11:05 时间
添加WordPress开启关闭侧边栏功能
作者:matrix 被围观: 2,028 次 发布时间:2013-10-01 分类:Wordpress | 9 条评论 »
这是一个创建于 3256 天前的主题,其中的信息可能已经有所发展或是发生改变。
此功能有点鸡肋,不过还是在折腾出来了。
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=
相关文章
- 修改WordPress邮件通知样式
- 高颜值且开源的CorePress主题体积小,性能强,功能多,不可多得的一款高性能WordPress主题
- WordPress网站怎么制作用户浏览历史记录功能
- WordPress 6.1 正式版已发布,最全新功能图文介绍
- wordpress美化登录界面Wordpress博客 2 年前 桃李Taoli
- wordpress配置又拍云cdn
- WordPress配置文件wp-config优化选项
- wordpress网站页面登录才能访问
- 国内企业为什么不喜欢用WordPress建站
- WordPress建站教程:用好Tag标签功能
- 使用内存缓存优化 WordPress 自动草稿功能
- WordPress 技巧:彻底关闭后台主题自定义功能
- WordPress 2.3 发布
- 在浏览器中直接翻译 WordPress 主题和插件
- 给 WordPress 添加转帖到开心网功能
- 使用 WordPress 的子主题(Child Themes)功能快速制作自己的主题
- Optimize DB:在 WordPress 后台优化 MySQL 数据库
- WordPress 主题教程 #6c:存档和链接列表
- WordPress 技巧:修正自定义分类模式更新提示
- 如何判断当前页面是 WordPress 的登录页
- 使用 WordPress 的 Embed 功能快速插入优酷视频,并支持全平台播放
- WordPress 3.6 新功能概述
- WordPress照片lightbox效果的运用几点