如何为博客网站添加实时天气功能？

• • 腾讯云建站教程
  • 宝塔面板建站教程
  • 老薛主机建站教程
  • SiteGround建站教程

有些站长想为自己的博客网站添加一个实时天气功能，虽然网络上有很多免费的天气预报API，不过多数都是有限制，所以今天boke112百科向大家推荐免费的实时天气API，支持国内370个主要城市，而且访问量没有限制。

为博客网站添加实时天气功能的操作步骤：

1、前往心知天气注册一个账号，输入邮箱地址、密码、手机号、验证码，并点击旁边的按钮获取短信码，输入手机短信码后点击【同意以上协议并注册】按钮，然后登录进入邮箱激活账号，最后登录。

2、点击进入控制台 >> 点击左侧导航菜单“产品管理 – 添加产品”>> 点击天气数据API的免费版中的【免费申请】按钮，即可成功获得不限期不限量的天气数据API。

3、点击“产品管理 – 免费版”，在基本信息中点击域名绑定的“修改域名”。

4、输入域名，多个域名用英文逗号隔开，最后点击【确认】按钮。

5、点此访问心知插件配置页面（PS：控制台页面竟然找不到这个插件入口），配置密钥会自动读取，不需要理会；根据自己需要进行插件的配置即可，比如插件类型建议选“固定极简”，展开选择“可展开”，其他根据实际选择即可，可以点击配置上方看到实际效果。

6、点击【生成代码】按钮，即可获得JS代码和网页版链接。博客网站的话，一般建议使用JS代码，其中div代码放在需要展示天气情况的位置，JS代码放在页脚即可。

当然，你也可以直接将DIV代码和JS代码一起放在合适的位置。

比如boke112百科使用的是YIA主题，那么只需要将JS代码放在“YIA主题设置 – 自定义代码 – 底部代码”，最后点击【保存】按钮。

然后将以下代码添加到“外观 – 小工具 – 自定义HTML”，最后点击【保存】按钮。

<div id="tp-weather-widget"></div>

实际效果就是显示所在城市、天气现象和温度，鼠标移动到该天气数据中就会显示下拉框，出现更多天气情况。具体如下图所示：

考虑到实际效果，个人建议将DIV代码放在网页顶部左上角或右上角比较合适，方便用户一眼就能看到天气，想要了解更多天气情况就移动鼠标即可。

另外，可能还需要适当微调CSS才能更适配自己网站所使用的主题。

因为是通过JS代码实现的实时天气，所以不限于WordPress网站，其他网站都可以通过本文的方法添加实时天气哦。

本文地址：https://boke112.com/article/p5513.html