为网站添加实时天气

很多人喜欢为自己的网站添加花花草草，有用户要求加个实时天气，于是找了个第三方的插件：心知天气，免费与收费版，大概的区别是免费版不能显示全球天气，仅显示国内370个主要城市的天气，但对我们普通用户来说足够了。

添加该插件，对于稍微有点动手能力的还是很简单，官网为用户提供了详细的教程和可视化的设置界面。

进入心知天气官网注册一个账号，登录后查看教程并对显示内容进行配置，一般插件类型我们选择“固定极简”，这样更容易添加。

配置好显示内容，点击最下面的“生成代码”，将生成代码，添加到主题模板适当位置即可。

如果不知道主题模板的具体位置，可以参考：

Plugins

折腾 WordPress 的利器，字符串定位插件：String locator

很多喜欢折腾WordPress主题的童鞋，可能会梦想主题作者能把模板文件罗列个详细的说明，方便用户自己DIY，但只能说是个梦...

6203

添加后，可能与主题样式有兼容问题，需要自己添加样式美化一下，这里提供几个基本的样式代码供参考：

/** 居左、限制宽度高度及左右外边距 **/
#tp-weather-widget {
	float: left;
	width: 78px;
	height: 30px;
	margin: 0 0 0 15px;
}
     
    /** 设置字号、粗体 **/
#tp-weather-widget * {
	font-size: 1.4rem;
	font-weight: 700;
}
     
    /** 天气条非粗体 **/
#tp-weather-widget .sw-bar-slim * {
	font-weight: 400;
}
     
    /** 自定义背景图片（默认背景有点丑） **/
#tp-weather-widget .sw-card-slim-container {
	background-image: url(https://www.helloimg.com/i/2024/11/20/673e007c54e46.jpg);
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	overflow: hidden;
	padding: 10px 20px;
	border-radius: 8px;
	box-shadow: 0 0 0 1px rgba(0,0,0,0.073) inset, 0 0 6px 3px rgba(0,0,0,0.073);
}

背景图片尽量选择深色的，其它就看你自己发挥了，效果看本站顶部实时天气演示。