WordPress文章页添加展开/收缩功能

效果:

效果预览 展开/收缩

功能代码:

1、js

加入到body之前 展开/收缩

2、functions.php

加入到主题functions.php文件中 展开/收缩

3、代码使用:

补刀:css美化一下吧

2015-11-8日更新:如何在编辑文章的时候快速添加该按钮呢?陌小雨博客(www.dedewp.com)给大家分享下面的好办法:

将上述代码添加到主题functions.php文件中,然后在编辑文章的时候切换到文本模式,就可以看到该按钮啦,是不是很编辑呢?

按钮使用方法:先单击一次,然后输入你想要收缩的内容,再单击一次按钮,然后替换替换其中的说明文字,什么是说明文字呢,就比如本文上面的加入到body之前加入到主题functions.php文件中

AD:站点文章对你有帮助,可以选择去百度口碑好评下,还可以点击此处

赞 (7) 口碑
分享到:更多 ()

评论 19

评论前必须登录!


  1. 咋个更改说明文字的大小及颜色 :?:
  2. 无聊赚
    着实好用,我已经加到网站上了。 顺便膜拜下:你的网站防采集真是做到家了,竟然F12都不能用,牛了X了
  3. 刚哥笔记
    有没有归档页面的,点击展开全部日期,点击折叠全部日期的代码?
  4. Meiko
    我目前用的就是这个代码,但是收缩内容中的短代码和html标签全部无效,怎么办?是我一个人的问题?
  5. 快分享吧
    这个功能太强大了 对我网站很有用 借走 谢谢!
  6. leejon
    留个脚印,因为正是用这个功能!
  7. Youth Daily
    表示我来过。
    • 陌小雨
      @Youth Daily 你是原创么,小雨不知道哦,是在畅享资源看到的,所以就转过来了,有来源,在文章标题下面。在原有的基础上添加了按钮,很不错吧!^_^
  8. zxc121
    没找到加js 的地方
    • 陌小雨
      @zxc121 不是吧,加入到主题head前应该就好了
      • bin
        @陌小雨 请问这个 head是指header.php文件吗?我跟前面的人一样,也没有找到加这个JS的地方,请指教,谢谢啊
        • 陌小雨
          @bin 这个加在header.php文件中的
          标签之前
          • bin
            @陌小雨 非常感谢您的回答,我按您的说法把这段代码加入到header.php中,然后把第二段代码加入到functions.php中的<?php前,但是我用了之后并没有什么效果,没有显示展开收缩 这个功能。并且在加了 按钮 这个代码后 反而整个网站都打不开了。这个不知道是我哪里做错了,请小雨不吝赐教,谢谢!
          • bin
            @陌小雨 对了,那个js是加在header.php的这个前面是吧
          • bin
            @陌小雨 可以了,是我自己加错地方了,万分感谢!!!
          • bin
            @陌小雨 但是现在有另一个问题, 就是添加展开收缩后,里面的图片都打不开了,这要怎么弄啊
          • 陌小雨
            @bin 是你自己的图像不存在吧