WordPress添加天气插件-自定义HTML代码设置
原创WordPress添加天气插件-自定义HTML代码设置
原创
前几天想做一个导航站，发现导航站的导航栏有个天气插件，挺好看的，还能根据IP显示天气预报，今天就来试试能不能安装在我这wordpress主题上。就像下面这样。
准备材料
- 首先我们先准备好天气插件的代码，这里可以去心知官网申请自己的，也可以用我的，免费的一分钟20次限制，对于我这IP 1的站肯定够用。
<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后面，箭头位置。
之间插入几个空格。
保存好，刷新一下网页，插件就显示到logo后面了。
不同的主题思路都差不多，选择你想放的位置，找到旁边的代码，插入就行了。
作者：Lu 链接：https://llxx.cc/wordpress-weather-widget/ 来源：Lu's Blog
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。