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 ...
随机推荐
- PHP安全、Sql防注入安全汇总
利用Mysqli和PDO 产生原因 主要就是一些数据没有经过严格的验证,然后直接拼接 SQL 去查询.导致漏洞产生,比如: $id = $_GET['id']; $sql = "SELECT ...
- linux下安装git提示”无法打开锁文件 /var/lib/dpkg/lock - open (13: 权限不够)“
如图所示,输入命令:apt-get install git后提示权限不够 解决方法,在命令前加 sudo即可 sudo apt-get install git sudo是linux系统管理指令,是允许 ...
- Math.round(11.5)等于多少? Math.round(-11.5)等于多少?
1.先说下怎么理解 round()方法可以这样理解: 将括号内的数+0.5之后,向下取值, 比如:round(3.4)就是3.4+0.5=3.9,向下取值是3,所以round(3.4)=3; roun ...
- Linux内核开发之将驱动程序添加到内核
驱动程序添加到内核 一.概述: 在Linux内核中增加程序需要完成以下三项工作: 1.将编写的源代码复制到Linux内核源代码的相应目录 2.在目录的Kconfig文件中增加新源代码对应项目的编译配置 ...
- GAN︱GAN 在 NLP 中的尝试、困境、经验
GAN 自从被提出以来,就广受大家的关注,尤其是在计算机视觉领域引起了很大的反响,但是这么好的理论是否可以成功地被应用到自然语言处理(NLP)任务呢? Ian Goodfellow 博士 一年前,网友 ...
- TI Davinci DM6446开发攻略——开发环境搭建
TI DAVINCI DM6446的开发环境搭建不像三星S3C2410,S3C2440,ATMEL的AT91SAM9260之类的单核ARM那么简单,因为DM6446还有DSP端的开发环境,以及双核之间 ...
- PHP openssl函数库
php openssl 函数库中.提供了大量的函数.但是我们一般用的最多的,就是 openssl_encrypt string openssl_encrypt ( string $data , str ...
- PHPmysqli的 其他函数 从数据库中读出数据并且打印出来
<?php // 认识其他mysqli其他函数 header( 'Content-Type:text/html;charset=utf-8 '); require 'prepareSrarmen ...
- WebService之CXF注解报错(二)
WebService之CXF注解 1.具体报错如下 五月 04, 2014 11:24:12 下午 org.apache.cxf.wsdl.service.factory.ReflectionServ ...
- T470p VS 2017 上运行 VS 2015 + Qt 5.6.2 + GLSL 400
vs 2017 的qt设置可以按照这篇文章 注意,必须使用qt的安装程序进行安装,否则会出现意想不到的问题(不要简单地把qt的文件拷贝过来..血的教训) 显卡的问题 好不容易编译通过了,一运行报了一个 ...