WordPress添加天气插件-自定义HTML代码设置

发布于

前几天想做一个导航站，发现导航站的导航栏有个天气插件，挺好看的，还能根据IP显示天气预报，今天就来试试能不能安装在我这wordpress主题上。就像下面这样。

准备材料

  • 首先我们先准备好天气插件的代码，这里可以去心知官网申请自己的，也可以用我的，免费的一分钟20次限制，对于我这IP 1的站肯定够用。
代码语言：javascript
复制
<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: "zh-Hans",
    unit: "c",
    theme: "auto",
    token: "6cc2a314-5422-4e9c-b3ad-7b9217f4e494",
    hover: "enabled",
    container: "tp-weather-widget"
  })
	</script>

部署步骤

根据你的选择你是想安装在侧边还是导航栏上，如果是想安装到侧边栏上特别简单打开后台→外观→小工具→自定义html→拖到首页边栏。把代码复制进去就行了

效果就会是这样

由于我侧边栏放的东西挺多的，我就想把他放到导航栏上，我就尝试把他放到导航栏上，试了好久才把他放到导航栏，一开始我以为直接把代码放到页头部分就行了，结果会出现下面这种情况🤣

我网上看了很久，看到有人说插到导航栏 php文件中，放入首页的head是不行的，要先找到位置，找到想要放的位置，比如说我要放到我的网站logo后面。怎么操作呢?

这时候对着logo图标右键然后按 检查，发现图片在header-logo这个标签下面。

然后我们去后台 主题编辑器 里面找到找到这个标签的位置，这个标签我找了好久，隐藏在一个文件夹中，在compoent下面的nav-header.php 不同主题不一样的位置，根据自己的主题来。

然后把天气插件插入到logo后面，箭头位置。

之间插入几个空格。

代码语言：javascript
复制
&nbsp;&nbsp;&nbsp;&nbsp;

保存好，刷新一下网页，插件就显示到logo后面了。

不同的主题思路都差不多，选择你想放的位置，找到旁边的代码，插入就行了。

作者：Lu 链接：https://llxx.cc/wordpress-weather-widget/ 来源：Lu's Blog

#wordpress#玩转wordpress