利用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,介绍结束,希望能对您有帮助。

《利用Collapsible Elements实现文章内容折叠效果》上有27条评论

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

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

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

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

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

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

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

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

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

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

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

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

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注