^ 回到顶部
  • 人生没有定律,每个人都有自己的节奏
  • 本站wordpress建站教程均通过实践后发布,希望可以帮到你
  • 希望你的坚持,都是因为热爱,而不是因为不甘心
  • 5年wordpress建站经验,5星服务品质
  • 那些不愿意让你吃亏的人,才是真正值得你深交的人,也是值得你付出时间的人

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

阿里云服务器9.9

效果:

效果预览

功能代码:

1、js

小鸟动态壁纸邀请码1EEAERT

加入到 body 之前

2、functions.php

加入到主题 functions.php 文件中

3、代码使用:

{collapse title="标题"}需点击展开的内容{/collapse}

将上述代码中的{}分别替换为[]

补刀:css 美化一下吧

.xControl {
padding-left: 32px;
}

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

//添加展开/收缩快捷标签按钮
function appthemes_add_collapse() {if (wp_script_is('quicktags')){
?><script type="text/javascript">// <![CDATA[ 
QTags.addButton( 'collapse', '展开/收缩按钮', '{collapse title="说明文字"}','{/collapse}' );
// ]]></script><?php }} add_action('admin_print_footer_scripts', 'appthemes_add_collapse' );

将上述代码中的{}分别替换为[]

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

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

历史上的今天:
让小雨知道,这篇文章帮到了你

展开阅读全文

扫码关注微信公众号zs40086(微搜片)随时随地微信看片,抢先福利电影等你来
小雨导购

如有疑问,请前往问答中心反馈!

反馈
  1. dou1ban
    效果实现了,但是你这个效果更好看啊,还有箭头变化,还有 边框,能分享一下代码吗?dou1ban@126.com 谢谢哦
  2. coder
    可以让标题与展开收缩在同一栏吗?让展开收缩显示在标题最右边
    • 陌小雨网站管理员
      @coder 这个都是可以的 通过css来定义就好了
  3. Allan
    你好,我添加了css样式 但是没有效果 不知道为什么
    • 陌小雨网站管理员
      @Allan 我也不知道呀,你又没有留网址
  4. haibao
    这个貌似还多了一步用户操作~ 请问你这个评论是插件还是自己写的?
    • 陌小雨网站管理员
      @haibao 嗯 任何事物都有两方面 评论不是很普通的评论么?
  5. 致远博客
    您的博客真棒,好多特效,有时候通过百度搜索到您的技术文章,向您学习!
  6. worthpin
    这个功能,如何自动切断一定字符的文章,只显示一部分,点击更多后展开剩下的部分。
    • 陌小雨网站管理员
      @worthpin 自动通过文章分享的不能实现,需要手动
  7. lhf
    没看懂 第一步加到body前是什么意思
    • 陌小雨网站管理员
      @lhf body结束标签之前 一般在footer.php中

  8. 咋个更改说明文字的大小及颜色 :?:
  9. 无聊赚
    着实好用,我已经加到网站上了。 顺便膜拜下:你的网站防采集真是做到家了,竟然F12都不能用,牛了X了
  10. 刚哥笔记
    有没有归档页面的,点击展开全部日期,点击折叠全部日期的代码?
    • 陌小雨网站管理员
      @刚哥笔记 在分享栏目下面的jquery有篇文章,可以帮到你。
  11. Meiko
    我目前用的就是这个代码,但是收缩内容中的短代码和html标签全部无效,怎么办?是我一个人的问题?
    • 陌小雨网站管理员
      @Meiko 您留的网址无法访问,不能帮您调试。
  12. 快分享吧
    这个功能太强大了 对我网站很有用 借走 谢谢!
  13. leejon
    留个脚印,因为正是用这个功能!
  14. Youth Daily
    表示我来过。
    • 陌小雨网站管理员
      @Youth Daily 你是原创么,小雨不知道哦,是在畅享资源看到的,所以就转过来了,有来源,在文章标题下面。在原有的基础上添加了按钮,很不错吧!^_^
  15. 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 是你自己的图像不存在吧