Duke Yin
Duke Yin
2012年8月13日

Keep the Minutes 时光捕手 http://www.keepmins.com/

由于不喜欢各大中文微博的乌烟瘴气、凌乱的界面和广告,前几个月打算自己做个微博客,自说自话,自娱自乐,以落得清静。微博客于我很大程度上是“树洞”,说完敛藏,过段时间拿出来看看还在。
萌生这个念头后,开始动手。

基础

由于对Wordpress还略熟悉,最初打算在Wordpress基础上开发,但是前期想到不少可能的问题

1 WordPress似乎没有免费的微博客主题,实现微博客的功能可能需要自己写主题;

2 WordPress对于长文字支持比较好,如何限制每篇文章的字数?

3 WordPress如何实现前台注册,登录,发布日志?

4 流行的社交网站有开发接口可以互相连接,如何实现自己常用的网站与Wordpress的对接?

5 微博客注重移动平台,如何实现移动终端方便快捷发布微博客?

主题

我需要这样一个主题:设计美观;可以在前台登陆;登录后出现文本框发布界面,不登录没有权限不出现发布界面;限制字数为140字,写完可以直接发布为Wordpress日志。

经过一番搜寻,发现了三个主题,一个是国外的 Tectale Tweety (之前叫Hostucan Tweety )可以在此处免费下载;另一款是国内的Twitterfix-Digu,还有国内的Mo-twitter

Mo-twitter给我的最大启示是用Ajax实现了连续翻页,但是页面风格缺乏美感,弃之。

Twitterfix-Digu的页面设计已经比较好,但是实用功能太少,顶部的头像实在不知道何用,只是一个带微博风格的Wordpress博客主题,弃之。

最后确定在Hostucan Tweety这款主题上进行二次加工。

时光捕手:基于WordPress的微博客
Tectale Tweety

 

主意已定,暂时为这个未来的微博客取名字为“Keep the Minutes 时光捕手”。

 

功能

登录和发布界面

Hostucan Tweety也没有前台发布日志的功能,于是参考Mo-twitter写出一个发布框,并且自己写了一段登录代码实现输入用户名密码,直接对接Wordpress登录功能。

时光捕手:基于WordPress的微博客
登录界面

 

若登录成功,则跳转,出现发布界面。

时光捕手:基于WordPress的微博客
初期微博发布界面

因为微博客没有“标题”和“正文”之分,也不可能将wordpress的标题和正文中的某一个去掉,故通过在主题的header中加入几段代码,使得当点击发布按钮的时候,文本框中的所有内容输出到日志的标题以及正文,最后发布的日志标题和正文内容相同。由于现在比较简陋,只能发布文本,而通过简单的wordpress后台设置,可以将发布的文字归为一类,便于日后区分。

而140字的限制,则通过修改加工网上找的字数统计的JavaScript代码实现,最初判断1个中文字符为2个字符,后来终于解决,1个英文字母或者1个中文字符,都被认为是1个字符,这与后面实现与其他各网站的互通有重要的联系。

 

自动翻页和刷新

提到Wordpress日志的翻页,可能大多人会想到插件Page-navi,但是对于微博客来说,那样一点也不cool,现在大多数微博客都支持不离开页面自动将旧文章刷新,堆在页面的底部,而通过一个叫做Infinite Scroll的插件,即可实现这一功能。所以最终的结果是,我可以在不点击任何链接,不离开首页,即可看完之前发的所有的微博。

另一种很cool的景象是,当你点击某链接后,页面的某些区域不会发生任何变化,不会刷新,而需要变化的区域会先消失加载完成后出现成新的内容,安装一个叫做Advanced AJAX Page Loader的插件,即可实现这种功能。

时效性对于微博客至关重要,而部分加载也可提高速度,降低服务器负载。

(还有另外一个插件叫“simple-lazyload”,可以实现当你真正见到某图片的时候,它才开始加载,伴有淡出效果,但是测试后发现有一些问题,故后来未再使用)

 

与外站的连接与同步

如果你还不知道的话,推荐一个我认为非常厉害的网站:http://ifttt.com/ , “ ifttt”的意思是” if this then that”,“如果XX则OO”。通过设定好自己的各个网络服务的账号和激活机制,ifttt会自动地为你干一些事情,比如:

如果明天天气预报是雨天,则发送短信给我;

如果我在非死不可上喜欢了一张照片,自动将它存到我的Dropbox里;

如果我在Foursquare签到,则自动将其记录到GoogleCalender;

如果XX则OO….

而且当你设定好任务后,ifttt会在满足条件后自动执行,不需要任何人工操作。

幸运的是,Wordpress是其中一个被支持的Channel,所以,我创建了如下的“任务”:

1 当我在Foursquare签到的时候,发送地图到新的微博客时光捕手,并分至“Geo”类;

时光捕手:基于WordPress的微博客
Foursquare到微博

2 当我在Zootool发一张图片的时候,自动将图片和描述发送到时光捕手;

3 当我在Instagram发一张照片的时候,自动将照片和描述发送到时光捕手;

时光捕手:基于WordPress的微博客
instagram

这样一来,在时光捕手发布的微博客就变得更加丰富了。

 

然而,我是一个懒人。我不愿意每次发一条微博客都手动ctrl c ,  ctrl v到其他的微博,所以我找到了几个Wordpress的插件解决把微博分发出去的问题。

“微博通”,这是一个神奇的网站,貌似最近才出来Wordpress的插件,可以把新发布的日志同步到很多其他的网站,例如新浪微博,腾讯微博,人人网,人间网,开心网,饭否,豆瓣网,天涯,甚至国外“我真的不知道是什么”网站…. 虽然偶尔也会出现同步失败,但是个人认为已经非常不错了。还有一个插件叫wp-sns-share有类似功能,但是支持的网站少,而且不如微博通稳定,故不作详述。

“WP to Twitter”,“插”如其名,这个插件的唯一用途就是把Wordpress发布的日志快速同步到t网站,而t网站的开发性,又做一些有趣的同步。

如此,时光捕手这个Wordpress成为我的微博客的中心。所有暂时难以实现或者不希望实现的功能用第三方服务,通过ifttt输入到时光捕手(例如instagram拍照输出到时光捕手),而聚合了信息之后,通过Wordpress自身的插件将信息分发到大大小小的网站,实乃一劳永逸。

时光捕手:基于WordPress的微博客
桌面界面

 

移动终端

还是通过一枚Wordpress插件实现了手机或平板的快速访问,发送微博。

这个插件叫做 Wptouch pro。这个插件自带几个主题,通过侦测User-Agent判断是否在用移动终端浏览网站,从而自发地选择手机主题或是桌面电脑主题。

但是类似的问题又来了,默认情况下,还是必须要在后台登陆才能发部新文章,这显然不符合移动客户端的要求。

如法炮制,将插件中带的主题按照桌面主题同样的办法修改,加入登录和发布界面,甚至调用同一个js文件判断字数,手机上的时光捕手基本就有了。

而Wptouch Pro还有一个令人兴奋的功能,那就是直接将网站变成iPhone的Web App。

最初打算自己坐一个iOS的App作为移动客户端,但是成本太高,WebApp完全实现了所需功能,有此插件相助,更是简单快捷。

如下:

时光捕手:基于WordPress的微博客
在safari上第一次浏览时光捕手,会提示将其添加到桌面。

在safari上第一次浏览时光捕手,会提示将其添加到桌面。

时光捕手:基于WordPress的微博客
在桌面的图标可以自定义,而非网页预览

在桌面的图标可以自定义,而非通常的网页预览。

时光捕手:基于WordPress的微博客
可以设置启动画面,戳图标后不会打开safari,而是启动画面。

可以设置启动画面,戳图标后不会打开safari,而是启动画面,而且只有当整个页面加载完成后,启动画面面才会消失,很类似一个真正的iPhone app。

时光捕手:基于WordPress的微博客
进入程序后,虽然内容还是一样,但是没有safari的任何界面

进入程序后,虽然内容还是一样,但是没有safari的任何界面。

 

iOS的设备支持较好,而使用其他手机查看,同样可以获得简洁的移动界面。

至此,时光捕手的大部分预计功能已经实现。

总结与存在的问题

1 WordPress的插件很丰富,有一些很强大,开放精神可嘉;

2 ifttt是个潜力股;

3 发布后仍不能自动刷新,现检测应该是 .htaccess文件的问题,未解决;

4 使用Advanced AJAX Page Loader和Infinite Scroll后似乎破坏了原主题的js加载,主题的动态功能失效;

5 未实现多用户功能,现在只能我一人享用;

6 中国移动似乎屏蔽了User-Agent,在没有Wifi的情况用手机登录会出现桌面端网页;

7 不能通过后台定义头像。

……

后续将继续完善,如果有人感兴趣,我可以公布网站源码。

Keep the Minutes 时光捕手 http://www.keepmins.com/

@科技

本作品采用 署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)进行许可.