前言

今天想在导航栏上整一个天气预报的功能，于是我就上网去找资料，最终发现了一个十分简单的方法。

由于我对前端一窍不通，因此，其中有一部分采取的方法都是比较笨的方法。

效果如本站左上角所示。

天气API

我使用的是心知天气，和风天气也可以，使用方法几乎一样。不想设置的也可以直接使用我的，代码在下面。

心知天气免费版不能够查看空气质量等参数，和风天气可以。但是我用心知天气的原因是：用和风天气的时候，我不会修改与它相关的鼠标样式，等找到修改的方法后，我准备换到和风天气试一试。

进入心知天气网站后，注册登录账号后，点击“立即免费试用”，然后添加产品，选择免费版即可（但是免费版不能够查看空气质量等参数，想要这个的话可以使用和风天气）。

然后进入心知天气插件页面。登陆后，点击“立即免费试用”，进入到如下图所示的界面。

在上面选择产品，然后在下面可以配置显示效果。把鼠标放在上图中的蓝色区域可以预览显示效果。但是这里心知天气会有一个问题，如果下面选择显示“生活指数”，会发现上面显示的“数”字为繁体字，很奇怪，不知道是什么问题，因此我就没有让显示这些参数。最后选择“获取代码”即可，下面是我的设置。

<div id="tp-weather-widget"></div>
<script>
  (function(a,h,g,f,e,d,c,b){b=function(){d=h.createElement(g);c=h.getElementsByTagName(g)[0];d.src=e;d.charset="utf-8";d.async=1;c.parentNode.insertBefore(d,c)};a["SeniverseWeatherWidgetObject"]=f;a[f]||(a[f]=function(){(a[f].q=a[f].q||[]).push(arguments)});a[f].l=+new Date();if(a.attachEvent){a.attachEvent("onload",b)}else{a.addEventListener("load",b,false)}}(window,document,"script","SeniverseWeatherWidget","//cdn.sencdn.com/widget2/static/js/bundle.js?t="+parseInt((new Date().getTime() / 100000000).toString(),10)));
  window.SeniverseWeatherWidget('show', {
    flavor: "slim",
    location: "WX4FBXXFKE4F",
    geolocation: true,
    language: "auto",
    unit: "c",
    theme: "auto",
    token: "d7b7ef02-aec3-4b21-98cc-76e6f28718cd",
    hover: "enabled",
    container: "tp-weather-widget"
  })
</script>

移动端显示

我的主题使用这个天气模块，会出现移动端不适配的问题。由于我不懂前端，因此我就直接从显示的角度入手，将这个详情页的窗口固定住。方法如下：

在自定义-额外css中，添加下面的代码：

.sw-container .sw-card-slim-background,
.sw-container .sw-card-bubble-container {
     position:fixed!important;
     width:331.8px!important;
}

fixed的意思就是将窗口固定，width是详情页的宽度，可以根据你的实际情况调整。当然，如果不是用WordPress，也可以和上面的脚本写在一起，将其用HTML的语法写出来，也就是：

<style>
.sw-container .sw-card-slim-background,
.sw-container .sw-card-bubble-container {
     position:fixed!important;
     width:331.8px!important;
}
</style>

如果各位大佬有更好的方法，欢迎在评论区里提出来，感激不尽。

移动端隐藏此模块

一开始，移动端出现显示不全的问题，我就先让移动端不显示天气。现在已经解决移动端问题，方法如上。记录一下让移动端隐藏的一个简便方法，代码如下：

<style>
    .weather_pc{
        display: block;
    }
    @media (max-width: 768px){.weather_pc{display: none;}}
</style>
<div class="weather_pc">
<div id="tp-weather-widget"></div>
<script>
  (function(a,h,g,f,e,d,c,b){b=function(){d=h.createElement(g);c=h.getElementsByTagName(g)[0];d.src=e;d.charset="utf-8";d.async=1;c.parentNode.insertBefore(d,c)};a["SeniverseWeatherWidgetObject"]=f;a[f]||(a[f]=function(){(a[f].q=a[f].q||[]).push(arguments)});a[f].l=+new Date();if(a.attachEvent){a.attachEvent("onload",b)}else{a.addEventListener("load",b,false)}}(window,document,"script","SeniverseWeatherWidget","//cdn.sencdn.com/widget2/static/js/bundle.js?t="+parseInt((new Date().getTime() / 100000000).toString(),10)));
  window.SeniverseWeatherWidget('show', {
    flavor: "slim",
    location: "WX4FBXXFKE4F",
    geolocation: true,
    language: "auto",
    unit: "c",
    theme: "auto",
    token: "d7b7ef02-aec3-4b21-98cc-76e6f28718cd",
    hover: "enabled",
    container: "tp-weather-widget"
  })
</script>
</div>

插入到网页中

插入到侧边栏

如果要插入到侧边栏中，操作十分简单。在WordPress中，选择外观->小工具，然后选择要插入的位置，比如”左侧栏小工具“。然后选择”自定义HTML“，将上面的代码插入即可。

插入到导航栏（也可以是任意位置）

如果想要将其插入到导航栏中，可以在主题文件编辑器中找到相应位置的代码，将其插入即可。用此方法理论上可以插入到你想插入的任意位置。如果你不确定在哪，可以使用试错的方法，多尝试几下（我就是这样的，因为代码看不懂）。以我的网页为例（Argon主题），如果主题和我一样，可以按照我的操作进行设置。

去header.php文件里，经过查找之后，可以看到如下图所示的位置：

根据注释，可以看到这是顶栏标题所在的位置（我的顶栏标题设置的是隐藏）。那么可以将这段代码插入到这里试一下，然后就出现了左上角的效果。插入位置如下图所示：

也可以在你的网站上，按F12查看网页源代码，然后定位到导航栏，看它的class，然后去代码里找。

如果你觉得天气和你的菜单离得比较近，可以插入几个空格，如上图所示。空格为“ ”，我使用了四个空格。

美化

字体格式调整

将其插入后，可以发现它的字体、字体大小等可能不符合网站，显得有点不合群。因此，我对其进行了字体样式、字体大小和背景的调整。设置的方法我采用的是用“额外CSS功能”。

选择自定义->额外CSS。

修改其样式需要找到其对应的class。按下F12，定位到相应位置（定位的方法是点击下图蓝色线上面的指针，然后点击你想要查看的位置），如下图所示。

可以发现这个对应的class类为".dsrBSL"（这个我没对其进行修改）。然后设置其font-size即可，当然，也可以修改其颜色。同样的方法也可以设置天气详细页面的各个属性，我的设置如下：

.EKHJj{
    color: #ffffff!important;
}

.bcxaVF{
    font-size: 1.1rem!important;
}

.fsIvwB{
    font-family: theme_font!important;
}

.dsrBSL{
    font-family: theme_font!important;
}

.dBbtWF{
    font-family: theme_font!important;
}

.jCzPjW{
    font-family: theme_font!important;
}

上述代码中，theme_font为我的主题字体，你可以设置成你想要的字体。

背景图片调整

设置方法如下：

.sw-container .sw-card-slim-background,
.sw-container .sw-card-bubble-container {
  background-image: url(https://www.corrain.top/wp-content/uploads/2022/12/background-06.png);
  background-repeat: no-repeat;
  background-size: cover;
}

可以将url里面的地址换成你的图片地址。

最终效果

最终效果如下：

和风天气的方法是一样的，直接搜索和风天气插件，然后按照步骤操作即可。