WordPress天气插件

一直想找一个WordPress的天气插件。Google搜索“WordPress天气插件”排第一的是Tsov Weather，看起来还不错，只不过作者的演示页面里有点错位，背景色也和我的主题不一致：

于是下了插件想改造下，打开源码一看傻眼了，是frame调用。于是给博主留言索要代码。作者回复如下：

代码很简单，只是用implode读取远程的，再正则过滤取到数据，然后缓存一下。代码我不太懂，写的太烂了，不敢放出来。

说白了就是不给。代码本身就有问题，而且还不开源，调用别人的代码太被动（调用QQ官方的就另当别论了），于是乎这个插件就直接枪毙了。连代码都不公布的插件还好意思挂到WordPress里。没有开源的精神就别玩WP嘛。
然后我在思维海的博客里看到soso的天气预报可以直接调用，窃喜。调用代码：

<iframe src=”http://www.soso.com/tb.q” width=”260″ height=”195″  marginwidth=”0″  marginheight=”0″ hspace=”0″ vspace=”0″ frameborder=”0″ allowtransparency=”true” scrolling=”no”></iframe>

效果如下：

于是建了个小工具放进去一看，不合适。我的小工具栏宽度只有260，放内容的div两边还有5px的padding。于是想把padding去掉，但是尝试了许久之后发现这样改会破坏WordPress的原有代码结构，结果也不怎么好看。于是又放弃了。

最后在WordPress后台插件安装里面搜索Weather，找到一个叫QQ Weather的插件（Yahoo和Google的天气API就算了。不准确不说，城市也不全，城市代码也不好弄），本地测试了下发现不错。打开源代码一看是调用的QQ官方的天气数据：http://mat1.qq.com/weather/inc/minisite2_140.js。那个140是城市代码，代表济南。这个js返回如下格式的代码：

var __minisite2__weather__ = “济南 10℃ 4℃～12℃ 多云”;/* |xGv00|171a8a64da87285187177d8378e8379f */

插件作者使用的就是引号里的数据。不解的是作者为什么只保留了实时温度，去掉了一天的气温数据。于是又想DIY一番。原来的显示效果如下：

查看源代码发现有2个js，分别是qqweather.js和qqweather – src.js。前者应该是后者的压缩混淆版。js学的不好，不知道作者怎么压缩的。于是就修改了qq-weather.php，把对qqweather.js的调用改成了qqweather – src.js。然后查看qqweather – src.js的代码，发现作者故意把一天的气温数据给去掉了，修改下代码，加上这个数据：

try {
//tmp[0]城市
//tmp[1]实时气温
//tmp[2]温度
//tmp[3]天气
var tmp = __minisite2__weather__.split(” “);
var tmp1 = tmp[2] + ” ” + tmp[1];
if (MiniSite.Weather.getWealth(tmp[3]) == false) {
MiniSite.$(conainter).innerHTML = MiniSite.format(
MiniSite.templateError, tmp[1], tmp[0],tmp[3]);
} else {
MiniSite.$(conainter).innerHTML = MiniSite.format(
MiniSite.template, MiniSite.Weather.defaultUrl
+ MiniSite.Weather.getWealth(tmp[3]),
tmp[0], tmp[1], tmp[2], tmp[3]);
}
} catch (e) {
}

红色部分就是温度数据，另外我调整了参数的顺序。

启动插件后对QQ Weather进行设置，调整后模板里就有5个参数了。下面是我的调用格式：

<table>
<tr><td align=”center”>{1}</td><td align=”center”>实时气温：{2}</td></tr>
<tr><td><img src=’{0}’ onload=’MiniSite.loadPng(this)’ border=’0′ /></td><td style=”vertical-align:middle;” align=”center”>{4}<br />{3}</td></tr>
</table>

懂js的童鞋应该能看出来我没有调整异常模板的数据，所谓的异常模板就是获取不到天气图片的情况。

定义完模板就可以新建一个文本的小工具，里面建一个空的div，id赋上WeatherContainerId就可以了。

好了就写到这里吧，具体效果如下：

UPDATE1：前几天想查看一段压缩混淆过的js，但是没有源代码。于是在网上找了一个在线的Javascript unpacker and beautifier工具，还不错，并且是开源的。
UPDATE2：找了个js压缩的工具Rob Seiler的packer，但是仍旧没有压缩，担心压缩后浏览器不兼容。

相关日志

• WordPress邮箱发信的那点事
• Emlog转WordPress详解
• Web设计十年回顾
• 最佳 WordPress 缓存插件：WP Super Cache