子比主题侧边栏显示天气预报加一言教程
在网站搭建进程中，子比主题凭借简洁美观的设计和强大功能，备受众多站长青睐。为子比主题增添天气预报显示功能，可极大提升网站的实用性与趣味性，使访客能更便捷地获取天气资讯。接下来，本文将详细介绍如何在子比主题的侧边栏进行天气预报显示设置。
![图片[1] - 子比主题侧边栏显示天气预报加一言教程 - 教程分享论坛 - 综合板块 - 大理鱼儿的小破站](https://oss.zibll.com/zibll.com/2025/03/20250305220302751-4efdd2f96920250305215104.jpg)
使用教程
首先进入WordPress后台>外观>小工具>自定义HTML>把自定义HTML添加到>文章页侧边栏>复制下面的代码即可。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- 添加Font Awesome图标库 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body>
<div class="weather-card">
<h1><i class="fas fa-cloud-sun"></i> 实时天气卡片</h1>
<p id="location"><i class="fas fa-map-marker-alt fa-lg icon-blue"></i> <strong>加载中...</strong></p>
<p id="date"><i class="fas fa-calendar-alt fa-lg icon-teal"></i> <strong>加载中...</strong></p>
<p id="time"><i class="fas fa-clock fa-lg icon-purple"></i> <strong>加载中...</strong></p>
<div class="weather-info">
<p><i class="fas fa-umbrella fa-fw icon-weather"></i> 天气状况：<strong id="weather-status">加载中...</strong></p>
<p><i class="fas fa-thermometer-half fa-fw icon-weather"></i> 温度：<strong id="temperature">加载中...</strong>℃</p>
<p><i class="fas fa-tint fa-fw icon-weather"></i> 湿度：<strong id="humidity">加载中...</strong>%</p>
<p><i class="fas fa-flag fa-fw icon-weather"></i> 风向：<strong id="wind-direction">加载中...</strong></p>
<p><i class="fas fa-wind fa-fw icon-weather"></i> 风力：<strong id="wind-power">加载中...</strong></p>
</div>
<div id="yiyan" class="yiyan-box"><i class="fas fa-quote-left"></i> 加载中... <i class="fas fa-quote-right"></i></div>
<div class="footer">
<p id="data-source"><i class="fas fa-database"></i> 数据来源：<strong>加载中...</strong></p>
<p id="report-time"><i class="fas fa-sync-alt"></i> 报告时间：<strong>加载中...</strong></p>
</div>
<div class="loading"><i class="fas fa-spinner fa-spin"></i> 正在加载实时天气数据...</div>
</div>
<script>
// 获取天气数据的API
const API_URL = "https://api.fenx.top/api/getWeather";
// 获取当前时间
function getCurrentTime() {
const now = new Date();
const time = now.toLocaleTimeString();
const date = now.toLocaleDateString();
document.getElementById("time").querySelector("strong").textContent = time;
document.getElementById("date").querySelector("strong").textContent = date;
}
// 更新天气数据
async function fetchWeatherData() {
try {
const response = await fetch(API_URL);
const data = await response.json();
if (data.code === 200) {
const weather = data.data.weather;
const location = `${data.data.province} ${data.data.city}`;
const reportTime = new Date(data.data.weather.reporttime).toLocaleString();
// 更新卡片内容
document.getElementById("location").querySelector("strong").textContent = location;
document.getElementById("weather-status").textContent = weather.weather;
document.getElementById("temperature").textContent = weather.temp;
document.getElementById("humidity").textContent = weather.humidity;
document.getElementById("wind-direction").textContent = weather.winddirection;
document.getElementById("wind-power").textContent = weather.windpower;
document.getElementById("data-source").querySelector("strong").textContent = data.data.ip;
document.getElementById("report-time").querySelector("strong").textContent = reportTime;
document.querySelector(".loading").style.display = "none";
} else {
throw new Error("Failed to fetch weather data");
}
} catch (error) {
console.error("Error fetching weather data:", error);
document.querySelector(".loading").textContent = "加载失败，请稍后重试。";
}
}
// 初始化
fetchWeatherData();
setInterval(fetchWeatherData, 600000); // 每10分钟更新一次天气数据
setInterval(getCurrentTime, 1000); // 每秒更新时间
</script>
<script>
// 使用fetch函数从API获取一言
fetch("https://api.fenx.top/api/yiyan")
.then(response => response.text())
.then(text => {
document.getElementById("yiyan").innerHTML =
`<i class="fas fa-quote-left"></i> ${text} <i class="fas fa-quote-right"></i>`;
})
.catch(error => {
console.error("Error fetching yiyan:", error);
document.getElementById("yiyan").innerHTML =
`<i class="fas fa-exclamation-triangle"></i> 加载失败，请稍后再试。`;
});
</script>
<style>
.weather-card {
background: linear-gradient(135deg, #f8f9fa, #e9ecef);
border-radius: 15px;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
padding: 25px;
text-align: center;
transition: all 0.3s ease;
max-width: 500px;
margin: 20px auto;
font-family: 'Segoe UI', system-ui, sans-serif;
}
.weather-card h1 {
font-size: 1.8em;
color: #2c3e50;
margin: 0 0 15px;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
}
.weather-card p {
font-size: 1em;
color: #34495e;
margin: 8px 0;
display: flex;
align-items: center;
gap: 10px;
}
.weather-info {
background: rgba(255, 255, 255, 0.9);
border-radius: 12px;
padding: 15px;
margin: 20px 0;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.icon-blue { color: #3498db; }
.icon-teal { color: #1abc9c; }
.icon-purple { color: #9b59b6; }
.icon-weather { color: #e67e22; }
.yiyan-box {
font-size: 1em;
color: #7f8c8d;
padding: 12px;
background: rgba(255, 255, 255, 0.85);
border-radius: 8px;
margin: 15px 0;
font-style: italic;
}
.footer {
font-size: 0.85em;
color: #95a5a6;
margin-top: 25px;
border-top: 1px solid #eee;
padding-top: 15px;
}
.loading {
font-size: 0.95em;
color: #bdc3c7;
margin-top: 20px;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
}
.fa-spin {
animation: fa-spin 2s infinite linear;
}
@keyframes fa-spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style>
</body>
</html>
没有回复内容