网络蜗居 之 添加Mobile页面支持

入手android手机快两个星期,忙里抽闲折腾熟手机之后,开始为blog添加mobile页面显示。用的是高人推荐的wordpress插件:WPtouch(http://wordpress.org/extend/plugins/wptouch/changelog/

自动安装方法:

  1. 登入wordpress管理页面
  2. 进入plugins管理页面,点击Add New
  3. 用Search Plugins搜索到WPtouch,直接Install Now

手动安装方式:

  1. 从上述链接下载WPtouch安装包
  2. 解压缩
  3. 将压缩后的wptouch目录拷贝到wordpress的wp-content/plugins/wptouch目录下
  4. 进入wordpress管理页面
  5. 进入plugins管理页面
  6. WPtouch会列在已安装插件列表中,Activate之,大功告成

安装过程相当简单,安装完本应大功告成,但在我的手机上(Android+ucweb)并没有生效。一开始以为是WPtouch只支持iPhone系列,查了主页,声明在1.9.25版本中确实支持android和blackberry。查了半天,原来是ucweb的原因。

在wptouch的设置中,高级选项中有一项关于user-agent的描述。描述中列出了所有支持的User-Agents,其中有一项android。测试过拿android自带的浏览器访问没有问题,ucweb不行。查看ucweb的网络设置,发现ua设置为默认,除此之外还有openwave和opera,经测试三者都无法支持。通过在wptouch管理页面中加入Custom user-agents,并更改ucweb的ua设置,可以解决这个问题。

management

不过经这样设置后,ucweb的显示样式依旧不好看,将浏览模式从适应屏幕改为缩放模式,可以增强显示效果。下面三张图分别是android默认浏览器、ucweb适应屏幕浏览模式、ucweb缩放模式浏览模式、ucweb上不支持mobile页面的显示效果

豌豆荚截屏_default 豌豆荚截屏_2 ucweb_change 豌豆荚截屏_original

确实用WPtouch样式效果会好很多,最重要的是,省流量。

BTW:所有手机截屏用USB连接电脑由豌豆荚完成。途中意外发现moto的手机管理页面,在浏览器地址栏中敲入http://192.168.16.2:8080/,就可以进入管理页面,还不错。moto真是靠android原地满血复活啊

moto_management

网络蜗居 之 更新Theme

换了Wordpress最具人气的Suffusion模板,很强大。刚安装完成后巨大的Don’t Panic着实让人Panic了一把,往细了算配置多以百计

Suffusion

之前的一些theme的改动,RSS、社交网站支持、SEO几乎都有。

除提供RSS订阅外,更提供多种Follow Me功能,包括邮件订阅、社交网站follow等等。社交网站国外著名的facebook、twitter、LinkedIn、flicker等等都有。更有一键开启/关闭SEO功能,并集成google analysitic提供网页分析。甚至可以开放OpenID支持。

跟以前的theme比起来,那就是VS2005对UltraEdit的差别,功能强大但门槛也高,隐藏了很多细节但也失去了一些透明度。所幸default设置可以搞定一切,剩下的全看个人造化了。

遗憾的是过去的改动白费,不过用户界面这种事,真不是技术实现就能做好的事。美化的事情还是交给别人做好了Smile

网络蜗居 之 RSS的生成、发布与订阅

这两天为了在当前theme里添加RSS订阅,把RSS的生成、发布和订阅顺带研究了下。看完了刚好以bmlzf.intscan.org为例,讲讲RSS的工作机制。

  1. 什么是RSS
  2. 怎样生成RSS文件
  3. 网站怎样发布RSS源
  4. 客户端如何订阅RSS

什么是RSS

简单的说,RSS是一种消息来源格式规范。网站通过更新RSS文件(包含发布资料的部分内容或全文,以及一些资料发布元信息)发布资料,读者使用阅读器订阅RSS文件来获取网站资料的更新。

详细定义在这里,具体规范在这里。看不懂的拿Google Reader试下就知道了

怎样生成RSS文件

首先看下RSS文件的格式。实际上RSS文件就只是一个xml文件(废话一句,在JSON之前,我是大爱XML啊),在上面的具体规范里有xml格式的具体定义。以bmlzf.intscan.org提供的rss文件为例,用chrome浏览器的developer tool抓到的HTTP Response:

从里面可以很清楚的看到RSS文件的格式。在<channel>下包含了一些网站的元信息,和发布的资料信息。在示例中,每篇blog作为一个<item>元素存在。

知道了格式之后,生成RSS文件就非常简单,任何文本或者XML编辑器都可以制作。不过这个不用自己写,有很多现成的RSS生成工具可以用来制作RSS文件。就算是变成实现也不是很难,wordpress的php实现在feed-rss2.php里,需要的可以参考

网站怎样发布RSS源

生成好RSS文件之后,怎么告诉别人我的网站提供了RSS功能呢?对人来说简单当然简单,用经典的黄色小图标提供链接,从页面上点一下触发请求就行了。但是对于很多订阅客户端来说怎么知道呢?比如说,在Google Reader里,我只需要在添加订阅框内输入http://bmlzf.intscan.org,Reader自己会找到http://bmlzf.intscan.org/?feed=rss2,这又是怎么做到的呢?答案在html header里

在HTML的<head>tag里,有两行<link type=”application/rss+xml”>的tag,他们的href属性告诉了订阅者RSS文件从哪里可以访问的到。从例子也可以看出,虽然我在页面上只加了一个图标link,但实际上wordpress提供了两个RSS feed:) 除此之外,有关wordpress更多的RSS信息在这里

客户端如何订阅RSS

RSS客户端包括很多种,网页版客户端版多的是,功能也不尽相同。大致流程是读取RSS文件解析内容并展现。功能集多少取决于各自的实现。我比较喜欢的是Google Reader,很幸运这款有开放API,有兴趣的可以去这里下载源自己看看

今天在页面上添加了订阅按钮,因为wordpress本身已经提供了RSS文件生成函数,所以实现相当简单。在右边的边框里加入图标外加链接就行,也就是在当前theme目录下的sidebar.php文件里添加下面的代码就可以了

<a href=”<?php bloginfo(‘rss2_url’); ?>” title=”<?php _e(‘Syndicate this site using RSS’); ?>”>
<img src=”xxxx” alt=”RSS Feed” title=”RSS Feed” />
</a>


有的网站是提供专门的订阅页面,支持一键订阅到很多著名的RSS客户端的,比如说个人比较喜欢的月光博客。实现也不难,基本上都是第三方提供好的API(所以API是个好东西,嗯),具体见下面图中的示例。有需要的同学直接抄就行了

feed_google

网络蜗居 之 用Google Webmaster工具做SEO

用自己架的主页的好处是自由,坏处是没有搜索排名。用google和baidu搜了几篇blog标题,发现搜索结果里基本上都是新浪博客上镜率最高。翻了半天也找不到自己的,借spaces.live.com东风的往事一去不复返了……小本经营,没钱竞价排名。没关系,我们有穷苦挨踢民工的守护天使Google。这两天用google的webmaster tool做了些初步的SEO,简单记录下。

首先,先去http://www.google.com/webmasters/创建google webmaster帐号,找到“Add a site”把bmlzf.intscan.org加入我的站点。这一步需要认证,确认网站确实归我所有。我选的第三种,下载google提供的html页面,上传到网站根目录就可以了。认证成功后就可以进入这个网站的管理页面

第二步,创建robots.txt文件,允许搜索引擎的网络爬虫抓到我的页面(有关robots的更多问题看这里http://www.robotstxt.org/faq.html)。robots.txt文件用任何文本编辑器都可以创建,注意文件名小写、公开访问权限,以及放在网站根目录上。试试twitter的,在这里http://twitter.com/robots.txt。我的可以在这里看到http://bmlzf.intscan.org/robots.txt。这里有一个问题是,泄露了某些隐私。比如说我的robots.txt阻止了admin目录,这偏偏告诉了好奇的同学哪里有好戏看。如果真的不想被人看也没关系,用apache的.htaccess和.htpasswd保护此目录的访问就可以了。用Google的webmaster工具创建和测试robots的功能非常方便,web界面点个按钮就可以了。昨天做好的robots,今天在baidu里搜索,就发现了下面的记录,日期是昨天的

第三步,制作sitemap文件,告诉搜索引擎网站上有哪些可供他们抓取的网页。其实就是个xml文件,具体的书写说明看这里http://www.google.com/support/webmasters/bin/answer.py?answer=183668。当然这个不需要自己做,有很多做好的第三方工具。这里有一陀http://code.google.com/p/sitemap-generators/wiki/SitemapGenerators。我试了两个,Google Sitemap Generator需要重启apache,弃之。最后用的是Enarion phpSitemapsNG,有管理页面做sitemap,还可以看到哪些页面已经被爬过。做完后把结果上传到webmaster就可以了。当然结果并不局限于google搜索引擎,具体看http://www.sitemaps.org/

以上三步做完,就可以找个沙发喝喝茶等着看结果了。试着搜了几篇blog的标题,就可以看到关键字了。大功告成:)

在google webmaster网站上还给了很多SEO的建议(http://www.google.com/support/webmasters/bin/answer.py?answer=35769),在我看来好玩的几点:

1. 确保robots.txt没有拦截搜索引擎,当然故意的除外……

2. 用lynx文本浏览器来检查网站,因为大多数搜索引擎信息采集软件查看您网站的方式与Lynx几乎一样,防止一些javascript、flash等复杂功能造成网页无法访问。(用lynx访问bmlzf.intscan.org无法显示中文,一开始以为是lynx设置的问题,试了www.google.com.tw发现中文可以,貌似是网站的问题……求解)

3. 确保您的网络服务器支持If-Modified-Since HTTP标头。用这个HTTP头可以查出自上次某段时间以来网站的更新。用curl命令可以测试:curl -v -H “If-Modified-Since: Sat, 01 Jan 2011 19:43:31 GMT” http://bmlzf.intscan.org

其他还有一些内容相关的,大意是苦心经营关键字,控制外链数目,不要链接恶意网站

网络蜗居 之 添加“分享到”按钮

“There are things that we don’t want to happen but have to accept,things we don’t want to know but have to learn,and people we can’t live without but have to let go”

近来不得不accept的一件事是live space到期。感谢以B同学为首的公司内部小团体,才能租了这个地盘暂时蜗居。也感谢wordpress,不费吹灰之力就盖好了房子,连基本装修都省了。

好不容易有个窝,当然要认真对待。以后会慢慢的往这里加入更多练手的东西,虽然是蜗居也得好好装修。

昨天完成的第一个元素是“分享到”按钮,这个别人已经做好了,所以做法非常方便,在自己的页面里嵌入一段code就可以了。code在哪里?右键“view page source”找找看:)(不同的“分享到”样式可以去http://www.jiathis.com/找)。

为了避免每次写blog都要添加,我实际上是改了wordpress的theme,把这段code加到了framework里面去。听高人说,wordpress新的theme里面已经包含了这些元素,所以最方便的方式是换个theme就好可以了。本着专一的原则,我还是一个theme用到底好了……

以后所有的blog会集中在这里发布,然后分享到不同的地方。唯一麻烦的是不知道怎么处理微博消息。现在通过饭否->intscan、饭否rss->google reader->google buzz……折腾得很,如果有好方法能够做到一处更新多出同步的朋友,欢迎交流

更新:“分享到”按钮从主页面挪掉,打开单篇博客里的仍然保留