WordPress添加显示和隐藏侧边栏按钮开关
在很多的地方都看见过这种效果,就是在文章页面可以切换显示和隐藏侧边栏功能,感觉还是很有用,比如一篇文章的文字内容过多,那么就可以通过隐藏侧边栏来显示更多的文字便于浏览。比如你可以通过点击我文章标题下方的隐藏侧栏按钮来查看效果。

点击前:

点击后:

实现代码:
1.在header.php中添加如下代码,当然也可以单独写进一个js文件,然后在header.php中引入也可以,我是引入的。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
<script> jQuery(document).ready(function($) { $('.close-sidebar').click(function() { $('.close-sidebar,.sidebar').hide(); $('.show-sidebar').show(); $('.content').animate({ width: "1265px" }, 0); }); $('.show-sidebar').click(function() { $('.show-sidebar').hide(); $('.close-sidebar,.sidebar').show(); $('.content').animate({ width: "885px" }, 0); }); });</script> |
代码说明:将其中的1265px、885px、.content、.sidebar修改为你主题对应的文章内容页+侧边栏宽度、文章页内容宽度、文章内容容器、侧边栏容器即可。
2.在你布置该按钮的地方添加如下代码,一般是添加到文章标题下面,当然代码可以根据你自己的主题稍作修改。
|
1
|
<span class="bianlan"><span class="close-sidebar">隐藏侧边</span><span class="show-sidebar" style="display:none;">显示侧边</span></span> |
如果有什么不懂的就留言吧。
参考网址:http://www.dedewp.com/2316.html
WordPress添加显示和隐藏侧边栏按钮开关的更多相关文章
- wordpress 添加 显示磁盘剩余空间百分比的插件
在 wp-content/plugins 文件夹下 我取的文件名是: folder-sizes-dashboard-widget.php 在仪表盘 可以看到 Folder Sizes 标题的Box & ...
- JavaScript网站设计实践(四)编写about.html页面,利用JavaScript和DOM,选择性的显示和隐藏DIV元素
一.现在我们在网站设计(三)的基础上,来编写about.html页面. 这个页面要用到的知识点是利用JavaScript和DOM实现选择性地显示和隐藏某些DIV about.html页面在前面我们为了 ...
- [转]WordPress“添加媒体”文件时只显示上传到当前文章的附件图片
使用WordPress的朋友应该都清楚,特别是喜欢图文并茂的网站,肯定离不开的就是WordPress文章编辑页面的“添加媒体”按钮,每次点击就能弹出一个插入多媒体的界面,然后页面默认就会列举加载所有最 ...
- winform学习(4)控件的添加、显示和隐藏
窗体的添加.显示与隐藏 可以直接通过工具栏将某个控件直接拖动至UI界面(也可以在工具栏里双击某个控件) 也可以在代码里直接添加:窗体的标识.Controls.Add(控件标识符); Button my ...
- jquery隐藏侧边栏和折叠侧边栏方法
两种效果如下所示: 隐藏侧边栏: 折叠侧边栏: 下面,分享隐藏侧边栏实现方法: 实现思路:给body切换class,通过class控制侧边栏和主体部分left 来实现效果 html部分: <di ...
- hexo干货系列:(八)hexo文章自动隐藏侧边栏
前言 使用Jacman主题的时候发现打开具体文章后,侧边栏还是会展示,我想要的效果是自动隐藏侧边栏,并且展示目录.但是当我修改了主题配置文件里面close_aside属性为true的时候,发现侧边栏隐 ...
- Div和Span标签显示与隐藏
本实例中,学习jQuery的知识,显示与隐藏网页上的div或是span标签. 实际环境中,也许是根据某些条件进行,符合条件时,对某个或是某个div或是span标签时行显示与隐藏. 主要是学习jQuer ...
- Android监听键盘显示和隐藏
问题概况:横板cocos2dx游戏,点击输入框弹出键盘时,界面要求跟随网上平易,不能挡住输入框.这种问题只出现在非全屏键盘到情况下. 方案1:mainActivity重写onconfiguration ...
- [CSS]元素的显示与隐藏
摘自:http://www.zhangxinxu.com/wordpress/?p=1528 元素隐藏与显示是我们在页面制作与交互效果实现中非常常见的,如果您只是使用display:none与disp ...
随机推荐
- 老男孩Python全栈开发(92天全)视频教程 自学笔记05
day5课程内容: 集成开发环境(IDE) VIM #经典的Linux下的文本编辑器 Eclipse #Java IDE Visual Studio #微软开发的IDE notepad++ subli ...
- 大数相加(类似杭电acm1002)
/*输入两个非常大的整数(完全超出了int.long的表示范围),这个整数的长度可能超过100位,计算并输出这两个数相加的结果.*/ //自己用题目所给的案例测试,输出是正确的,也能输出正确的结果,不 ...
- 1.1 Python是一种什么样的语言
小时不识月,呼作白玉盘.很多人习惯地说Python不过是一种脚本语言而已,实际上这种说法是非常不准确的,完全不能体现出Python的强大.严格来说,Python是一门跨平台.开源.免费的解释型高级动态 ...
- Shell 脚本实践
1. 脚本判断命令输出是否为空 (1)判断字符串为空 if [ "$str" = "" ] if [ x"$str" = x ] if ...
- ubuntu设置网络
二 .设置无线网络 1.首先确认一下你的无线驱动已经安装 方法一,查看一下ubuntu右上角的网络设置中有无线连接,如果有说明已经驱动了,ubuntu自带的就会驱动无线网卡. 方法二,iwconfig ...
- JFFS2 文件系统及新特性介绍
简介: JFFS2 是一个开放源码的项目(www.infradead.org). 它是在闪存上使用非常广泛的读/写文件系统,在嵌入式系统中被普遍的应用.这篇文章首先分析了在闪存上使用 JFFS2 的必 ...
- 图像处理------基于Otsu阈值二值化
一:基本原理 该方法是图像二值化处理常见方法之一,在Matlab与OpenCV中均有实现. Otsu Threshing方法是一种基于寻找合适阈值实现二值化的方法,其最重 要的部分是寻找图像二值化阈值 ...
- Oracle连接出错(一)
1.错误描述 java.sql.SQLException: ORA-0064:error occurred at recursive SQL level 1. ORA-06153:unable to ...
- Car HDU - 5935
Problem Description Ruins is driving a car to participating in a programming contest. As on a very t ...
- 异常-----Can't convert the date to string, because it is not known which parts of the date variable are in use. Use ?date, ?time or ?datetime built-in, or ?string.\u003Cformat> or ?string(format) built-
1.错误描述 五月 27, 2014 12:07:05 上午 freemarker.log.JDK14LoggerFactory$JDK14Logger error 严重: Template proc ...