利用Collapsible Elements实现文章内容折叠效果

有些时候,你可能不得不在文章中添加一些图片、Flash或视频文件,但当此篇文章位于博客首页且你不愿意使用more标签时,你会发现,你的博客首页打开速度变慢了,某篇关于网页打开速度的心理学中提到:用户最满意的打开网页时间,是在2秒以下;用户能够忍受的最长等待时间的中位数,在6~8秒之间,这就是说,8秒是一个临界值,如果你的网站打开速度在8秒以上,那么很可能,大部分访问者最终都会离你而去;如果等待12秒以后,网页还是没有载入,那么99%以上的用户会关闭这个网页,不再等待。可见,加快博客首页的打开速度对提高用户体验是非常重要的。

记得以前见过一个叫AnyPlayer的WordPress播放器插件,它能把在文章中的播放器折叠起来,并且设置了一个点击打开播放器的按钮,这个功能十分让我喜欢,但无奈它只能针对视频及音乐文件,经过一番搜索后,我发现了Collapsible Elements这个在国内不怎么被提起的插件,经过一番本地测试后,它完美的实现了我所需要的功能。

此插件官方下载地址:http://wordpress.org/extend/plugins/collapsible-elements/

作者博客发布页面:http://deuced.net/collapsible-elements/

后台设置:安装都会,就不说了,安装激活以后,进入后台在工具选项下面找到XCollapse选项点击进去,在Choose a container:后面有三个选项,分别是TABLESPANDIV,这三个标签相信大家都不陌生,它们在这个插件里是用于定义文章内折叠区域的,按照喜好,我选择了 DIV;在下一栏Update CSS Style:里用于定义折叠区域CSS样式的,为了配合主题,我写的是:

background: #f6f6f6; padding-left:15px; border:1px solid #8aab46;

至此,插件的设置就完成了,需要注意的是,写CSS时,必须写成一行,不能分行,否则会出各种莫名其妙的问题,且推荐先写CSS然后再选择上面的DIV再点Update Options,因为此页面每刷新一次,无论你选或者是没选,它会自作主张的把Choose a container:设为第一个选项。

使用方法:按照一般套路进入后台选择添加新文章,在编辑器为HTML模式下你会发现多出一个名为XCollapse的标签,点它一下,出现了一个类似于下面的代码:

<a href="#" onclick="xcollapse('X1898');return false;"> REPLACE WITH LINK ELEMENT HERE... </a>
<br />
<div id="X1898" style="display: none; background: #f6f6f6; padding-left:15px; border:1px solid #8aab46;">
REPLACE WITH COLLAPSIBLE ELEMENT HERE...
</div>

其中红色部分你可以改为诸如点击打开之类的话(如果你嫌每次编辑麻烦,你可以利用CTRL+F修改插件collapsible-elements.php的相关位置),蓝色的部分就是给你写入需要折叠内容的区域。

下面的是演示:

文本演示

点击打开文本演示

图片演示

点击打开图片演示

视频演示
点击打开视频演示

OK,介绍结束,希望能对您有帮助。

评论

  1. 13年前
    2009-7-06 22:48:34

    原来就是这几段css代码,很实用 学习了!

  2. 13年前
    2009-7-07 7:57:46

    这个有用,以后试试!

  3. 13年前
    2009-7-07 13:27:29

    刚开始改嘛,期待另一个simpleG的衍生版~

    • Leo.N 博主
      13年前
      2009-7-07 13:40:36

      @林木木 对啊,我还得折腾下呢。。我对css不怎么熟,只能慢慢的边查变改。。

  4. 13年前
    2009-7-08 14:25:34

    不错,偶收藏了,偶要优化优化!

  5. 13年前
    2009-7-08 15:14:01

    不错不错,原来这是用插件实现的呀

  6. Leo.N 博主
    13年前
    2009-7-08 15:20:46

    @卢松松 欢迎高手来访啊!
    @阿修 恩,特对是在首页上。
    @huaimao 这东西弄在首页很有用。
    @万戈 对。。但willin大大有用jQ实现的办法。。。遭了。。现在才发现刚才我折腾ajax回复把wilin的两条回复弄不在了。。。囧。。

    • 13年前
      2009-7-08 19:45:55

      这么说你在你的博客直接修改测试么?最好还是在本地测试好再上传到你的博客

      • Leo.N 博主
        13年前
        2009-7-08 19:51:36

        @zwwooooo 没,我之前一直是在本地上测试的,经过无数修改后正常了,但后来由于永久链接的原因传到空间上发现了错误。。但在willin的帮助下成功实现了。

  7. 13年前
    2009-7-08 19:33:59

    看来你的Ajax嵌套评论已经OK了。willin的Ajax嵌套评论我直接应用后没有样式(可能要另外定义),但我用他的文件里面的代码完善了我所折腾的Ajax嵌套评论,呵呵

    • Leo.N 博主
      13年前
      2009-7-08 19:40:42

      @zwwooooo 话说我的样式开始也有点不对,但willin帮我修改好了,你的方法我曾经也试过,但没有成功。。。可能是对有些东西还理解不透。。

      • 13年前
        2009-7-08 19:44:03

        哈哈,因为后来你就没来问了我以为你搞定了,现在搞定了就好。

        • Leo.N 博主
          13年前
          2009-7-08 19:49:23

          @zwwooooo 上次的一直没搞定。。对那些代码糊涂了。。所以不想去麻烦你了。。这次是死心塌地的想做了,所以麻烦了willin,哈哈

        • 13年前
          2009-7-08 20:10:43

          呵呵! 學習精神都不錯啊! 都來一起討論了~ 話說大家空間和模板都不一樣, 總是要折騰一下才正常~

          • Leo.N 博主
            13年前
            2009-7-08 20:48:01

            @willin 是呀,都是要折腾的。。对了,那个小墙1.7我试了,但会出现php错误。。请问下willin那段代码是不是加在《?php ?》之间,还是之外?

          • Leo.N 博主
            13年前
            2009-7-09 11:25:54

            @willin 谢谢了,小墙1.7已经用上了,昨晚宿舍突然断网,没来得及测试,只有今天早上测试。

  8. 12年前
    2009-7-25 1:19:05

    这个插件好~嗯

    • Leo.N 博主
      12年前
      2009-7-26 11:36:07

      @whisperer 有用的话就拿去吧。。

  9. 12年前
    2009-7-27 0:38:29

    嗯……偶来看看这个插件……
    话说用是好用……但是……话说我只是想在首页这样效果……
    结果这个插件进了日志页依然这效果……这我就比较郁闷……
    话说LZ有没有什么比较好的解决方法啊?

    • Leo.N 博主
      12年前
      2009-7-27 11:18:52

      @天才錬金術師 额。。这个我就没办法了。。

      • 12年前
        2009-7-27 13:23:20

        额……那偶还是乖乖的用偶的MORE标签号了……囧TZ

        • Leo.N 博主
          12年前
          2009-7-27 14:28:21

          @天才錬金術師 其实我想到可以加一段php代码进single页面中判断是否有“xcollapse”标签,如果有的话就禁用,这样就可以实现,但我不知道怎么写。。。还有这个办法叶不是长久之计,你去论坛上请教下熟悉js的人吧,我估计用那东西很好实现你想要的功能。。。

          • 12年前
            2009-7-27 14:38:38

            嗯……和我想的一样……但作为一介完全没学过PHP的人来说……嗯……算了……

  10. 12年前
    2009-8-12 11:05:17

    这个效果确实不错!找时间我也试试!

  11. 11年前
    2011-2-16 0:10:35

    刚试了一下,效果不错。问题是似乎一个页只能用一次,多了也只有一个有效果。能改进改进么?

    • Leo.N 博主
      11年前
      2011-2-23 19:27:47

      分多次添加就行了吧,我印象是可以多个的。。

  12. 11年前
    2011-5-01 17:00:46

    嗯嗯,正在用这个插件,感觉不错

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇