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

不用插件实现分享博文至校内

其实这是别人在Wordpress.org.cn上提出来的问题,因为我也时不时弄下校内,所以就研究了下怎么实现。

首先,找到你所使用模板里的single.php,用文本编辑器打开(注意选择用UTF-8编码,某则会出现乱码)。

在适当位置添加一下代码:

<a href="http://share.xiaonei.com/share/buttonshare.do?link=<?php the_permalink() ?>&title=<?php the_title(); ?>"target="_blank">分享到校内</a>

解释:

http://share.xiaonei.com/share/buttonshare.do?link=

是校内提交分享地址的接口,等号后面的就是所需提交的地址;

<?php the_permalink() ?>

这个是WordPress提取当前页面url的函数;

<?php the_title(); ?>

这个是提取当前日志标题的函数。

这样,我们就像搭积木搬的搭出一段分享日志到校内的代码。

另外还有一种方法,根据校内提供给FireFox快速分享标签的代码,我们可以直接拿过来套用:

继续阅读不用插件实现分享博文至校内

九个简约而不简单的WordPress主题推荐

写在最前面

在接下来即将映入您眼帘的九个简约而不简单的WordPress主题中,八个为国人制作,另一个为国人汉化,让我们为这些制作出优质主题并且免费分享出来的Blogger致以崇高的敬意。

注:以下主题推荐排名不分先后,均按首字母顺序进行A到Z排序。

 

Elegant Box


作者:mg12
发布页面:http://www.neoease.com/elegant-box/
DEMO:http://demo.neoease.com/index.php?wptheme=Elegant+Box
作者推荐使用插件:
WP-PageNavi (推荐 0.3x 版本)
WP-PostViews
WP23 Related Posts
WP-RecentComments
WP-Syntax
WP-MulticolLinks
Gravatar (针对 WordPress 2.3 或以下版本)
Mail To Commenter (支持 “@+user+blank” 模式)
快评:此乃风靡全球的iNove作者mg12的第一个WordPress主题作品,布局紧凑,默认灰色和白色为主色调,可扩展5种色调,让主题随你心情而变。

 

继续阅读九个简约而不简单的WordPress主题推荐

Blog升级至WordPress2.8

经过在本地搭建环境上测试现有主题,插件在2.8版本下没兼容问题,我终于更新到2.8了。

过程也简单,先备份数据库文件,然后点自动升级,1分钟完事。

升级后最大的感觉就是进后台变快了。

顺便试了下2.8新出的后台插件上传功能PS:我今天才发现2.71上也有这个功能,以前一直没发觉,误以为是2.8才出的,原谅我火星吧),安装了iNove主题作者开发的评论显示插件wp-recentcomments,过程非常简单,特别指出的是,可以直接上传zip压缩包。

最后,提醒下自己还有两天就考CET4了,即使我认为这次能过的几率是小于1%。

好吧,我承认我很蛋疼,再我装了wp-recentcomments后发现和现在这个主题不搭配,但我又喜欢这插件,怎么办呢?我只有改插件的CSS了,好在插件的CSS清晰明了,少了很多麻烦。

说下方法吧,找到主题的样式表style.css,搜索

widget_recent_comments

然后复制后面的代码

border-left:1px solid silver;color:#666666;display:block;padding-left:10px;margin-left:15px;margin-top:5px;

再找到wp-recentcomments的样式表wp-recentcomments.css ,在.rc_item .rc_left里面粘贴上面的代码,当然为了样式表的美观,你可以粘贴成树型的。

改后的效果就往右看吧。

注:此种方法是针对头像在左边显示。


Technorati :

添加了Thread Twitter.

刚刚添加了水煮鱼开发的Thread Twitter插件,把自己Twitter上的消息更新在Blog的页面上,同时支持回复,挺不错的。

但是添加后发现自己Twttter头像旁边会出现个绿色的边框,看着及其不协调,又是Baidu又是Google一番后,找到了解决办法,在水煮鱼提供的CSS里面添加一行代码即可。

.twitter img {
    float:left;
    padding:0 10px 0 0;
    margin:0 0 10px 10px;
    border:0px;
}

border:0px;就是添加的代码,添加后就去除了绿色边框,希望对有同样情况的人有用。


Technorati :