WordPress天气插件

Posted by 冰河 at 12:52 Add comments 17,658 Views
十二 212010

一直想找一个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,但是仍旧没有压缩,担心压缩后浏览器不兼容。

相关日志

10 Responses to “WordPress天气插件”

  1. 你也是济南的啊

  2. 请问思维海的博客怎么打不开了。
    我想问,它的插件怎么不会自动调用来访者的IP来显示?若是改的话,在哪里改呢?

  3. 友情链接有失效的

  4. 你的插件做的很棒。来你的博客好几次了,发现你真有才啊。
    另外我想知道你的评论部分的美化是怎么做的。方正看上去蛮舒服的

  5. 学术帝 学术帝
    O(∩_∩)O哈哈~

  6. 这个是直接调用么?

  7. 正在找这个,多谢分享!

Leave a Reply

(required)

(required)

click to change(必须)

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Protected by WP Anti Spam
© 2009 - 2018 冰河的博客