很多时候我们在WordPress上发布一些文章的时候里面都包含了很多的代码,我一般又不喜欢把代码压缩起来而喜欢让代码格式化显示,但是格式化显示通常会让文章内容看起来很多,不便于访问者浏览,所以今天就介绍一种可以展开/收缩文章内容的功能。

方法:
1.在header.php中添加下面的代码,或者也可以单独写进一个js文件中然后在header.php中引入也可以。我是引入的。

1
2
3
4
5
6
7
<script type="text/javascript">
    jQuery(document).ready(function(jQuery) {
        jQuery('.collapseButton').click(function() {
            jQuery(this).parent().parent().find('.xContent').slideToggle('slow');
        });
    });
</script>

2.在function.php中加入下面的代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
//展开收缩功能
function xcollapse($atts, $content = null){
    extract(shortcode_atts(array("title"=>""),$atts));
    return '<div style="margin: 0.5em 0;">
        <div class="xControl">
            <span class="xTitle">'.$title.'</span>
            <a href="javascript:void(0)" class="collapseButton xButton">展开/收缩</a>
            <div style="clear: both;"></div>
        </div>
        <div class="xContent" style="display: none;">'.$content.'</div>
    </div>';
}
add_shortcode('collapse', 'xcollapse');

3.可以优化一下代码,因为默认是靠左的,不好看,我们让他往中间一点显示,具体的距离可以自行调整。当然这一步忽略也是可以的。
在style.css中添加以下代码:

1
2
3
.xControl {
    padding-left: 32px;
}

4.下面就可以在文章中通过插入短代码

[collapse title=”标题”]需点击展开的内容[/collapse]

来使用此功能了。其中title是指添加一些提示内容,当然也可以省略title不写。

WordPress文章页添加展开/收缩功能的更多相关文章

  1. dhtmlxtree 节点 展开收缩:新增了直接点 文本内容 也 实现了 展开收缩 功能(并记住了展开、收缩状态)

    dhtmlxtree 节点 展开收缩通常情况我们按 +- 就实现了 展开收缩 功能,为了方便我们新增了直接点 文本内容 也 实现了 展开收缩 功能(并记住了展开.收缩状态) tree = new dh ...

  2. wordpress文章页两侧添加分页导航箭头

    分页导航 如果添加在文章页的两侧,很方便读者翻阅,小编发现好多站长的博客都添加了这一功能,百度了一下,就是JS和css的功能,经过测试成功,分享一下流程. 1.添加Js 在headr.php或者foo ...

  3. ShopEx文章页添加上一篇下一篇功能

    在全部的文章页中,会常常发现都会有这么一个功能.能引导用户去查看上一篇文章或下一篇文章,而在ShopEx中,我DEZEND了一下文章模型.并没有找到上一篇这种函数功能,因此,这就须要我们手动在相应的文 ...

  4. WordPress给网站添加支付宝捐赠功能

    最开始是在陌小雨的博客上看见这个功能,其实一般个人网站都会添加这个功能,下面我会讲解两种,不多说,上图: 1.添加到网页中任何位置: 上图这个功能可以添加到网页中的任何位置,可以在文章中添加,也可以利 ...

  5. Wordpress 文章编辑页面添加 metabox

    add_meta_box($id,$title,$callback,$screen,$context:,$priority); 参数 $id (字符串)(必需)Meta模块的 HTML"ID ...

  6. WordPress文章自动提取tag并添加链接

    我们在编写文章时,经常需要添加一些标签关键词的链接,这样不仅可以优化我们的内链,对用户来说也可以参照相关的文章,如果对文章的关键字进行手动添加链接,那样对我们来说太麻烦了,而且在标签关键词很多的情况下 ...

  7. 免插件为WordPress文章中标签添加内链

    给文章标签添加内链,意思就是说,如果你文章中出现了和标签一样的文字,那么这个文字就会自动成为标签链接,你点击这个链接就会查看到所有含有该标签的文章,这个能方便用户浏览,据说还利于SEO.下面说说方法: ...

  8. 如果wordpress分类只有一篇文章则直接跳转到文章页

    每个项目的需求都不一样,比如最近ytkah的客户提出如果wordpress分类只有一篇文章则直接跳转到文章页,这个实现起来不会很麻烦,几行代码就能搞定,下面就来一起看看吧.打开主题的function. ...

  9. Hexo Next配置百度分享、加入动态背景、接入网页在线联系功能、页脚增加统计功能、添加gitment、添加热度、阅读量排行

    Hexo Next配置百度分享.加入动态背景.接入网页在线联系功能.页脚增加统计功能.添加gitment.添加热度.阅读量排行: https://wangc1993.github.io/categor ...

随机推荐

  1. 第十九章 Django的ORM映射机制

    第十九章 Django的ORM映射机制 第一课 Django获取多个数据以及文件上传 1.获取多选的结果(checkbox,select/option)时: req.POST.getlist('fav ...

  2. Hive分区表动态添加字段

    场景描述: 公司埋点项目,数据从接口服务写入kafka集群,再从kafka集群消费写入HDFS文件系统,最后通过Hive进行查询输出.这其中存在一个问题就是:埋点接口中的数据字段是变化,后续会有少量字 ...

  3. LeetCode第五天

    leetcode 第五天 2018年1月6日 22.(566) Reshape the Matrix JAVA class Solution { public int[][] matrixReshap ...

  4. uva211 回溯

    大致题意:每个多米诺骨牌可能横着,也可能竖着,请你判断有哪些合法的摆放方式. 这题的dfs需要注意一下,不能以某个点直接开始延伸,如果这样延伸可能会无法到达终点(也就是遍历全图).我的dfs方法就是枚 ...

  5. 小程序中曾经遇到的坑(1)----canvas画布

    目前正在开发小程序,在开发过程中,总会遇到一些坑,而这些坑并不会有很多开发者遇到而说出来.这里先记录一条我开发过程中遇到的问题,以便后人在开发中能够更容易的解决问题!!! 首先,小程序在canvas画 ...

  6. 我博客上的围棋js程序

    作为一个围棋爱好者,就决定在博客里加个围棋js程序.于是,申请了博客的js权限,美化美化我的博客. 好在js的语法像C系的,看了看,写个程序应该还是可以的. 围棋里,设计好基本的数据结构: //a是1 ...

  7. 一步一步创建ASP.NET MVC5程序[Repository+Autofac+Automapper+SqlSugar](十)

    前言 朋友们, 大家好,我还是Rector,写ASP.NET MVC 5系列文章[一步一步创建ASP.NET MVC5程序Repository+Autofac+Automapper+SqlSugar] ...

  8. Python基础学习参考(六):列表和元组

    一.列表 列表是一个容器,里面可以放置一组数据,并且列表中的每个元素都具有位置索引.列表中的每个元素是可以改变的,对列表操作都会影响原来的列表.列表的定义通过"[ ]"来定义,元素 ...

  9. ActiveMQ安装及启动

    最近项目组遇到MQ的问题(项目组用的IBM MQ),突然想回来看看MQ.本来就不是太熟练,闲来无事写写看看. 不多说,首先是安转ActiveMQ,官方网址:http://activemq.apache ...

  10. file_get_contents函数不能使用的解决方法

    今天开发微信公众平台的时候 使用file_get_contents 去获得token 结果一直返回false.百度了一下,大部分都是说用curl 偶然发现可能是openssl没有开启的问题,开启ope ...