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后面,箭头位置。之间插入几个空格。

&nbsp;&nbsp;&nbsp;&nbsp;

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

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

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

    THE END

    打赏
    < <上一篇
    下一篇>>