在 WordPress 小工具区添加时间天气小组件

<div class="weather-widget">
  <div id="current-datetime"></div>
  
  <div class="weather-info">
    <div class="weather-item">
      <span id="weather-icon" class="weather-icon">天气-</span>
      <span id="weather-status">加载中...</span>
    </div>
    <div class="weather-details">
      <span>🌡️ <span id="temp">-</span></span>
      <span>🎐 <span id="wind">-</span></span>
    </div>
  </div>
</div>

<style>
.weather-widget {
  padding: 15px;
  background: none;
  border-radius: 8px;
  text-align: center;
}

#current-datetime {
  font-size: 1.2em;
  margin-bottom: 10px;
}

.weather-info {
  display: inline-block;
  text-align: left;
}

.weather-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.weather-icon {
  font-size: 20px;
}

.weather-details {
  margin-top: 5px;
  display: flex;
  gap: 15px;
  font-size: 0.9em;
}
</style>

<script>
// 日期时间更新函数
function updateDateTime() {
  const now = new Date();
  const dateOptions = { 
    year: 'numeric', 
    month: '2-digit', 
    day: '2-digit'
  };
  const timeOptions = { 
    hour: '2-digit', 
    minute: '2-digit', 
    hour12: false
  };

  const dateStr = now.toLocaleDateString('zh-CN', dateOptions)
    .replace(/\//g, '-');
  const timeStr = now.toLocaleTimeString('zh-CN', timeOptions);

  document.getElementById('current-datetime').innerHTML = 
    `${dateStr} ${timeStr}`;
}

// 天气获取函数
async function getWeather() {
  try {
    // 获取位置信息
    const ipResponse = await fetch('https://ipapi.co/json/');
    const location = await ipResponse.json();
    
    // 获取天气数据（使用wttr.in服务）
    const weatherResponse = await fetch(
      `https://wttr.in/${location.city}?format=%c+%t+%w&lang=zh`
    );
    const weatherData = await weatherResponse.text();
    const [icon, temp, wind] = weatherData.trim().split(/\s+/);

    // 更新显示
    document.getElementById('weather-status').innerHTML = 
      `${location.city}`;
    document.getElementById('weather-icon').textContent = icon;
    document.getElementById('temp').textContent = temp;
    document.getElementById('wind').textContent = wind;
  } catch (error) {
    console.error('天气信息获取失败:', error);
    document.getElementById('weather-status').textContent = '天气获取失败';
  }
}

// 初始化
updateDateTime();
setInterval(updateDateTime, 1000);
getWeather();
</script>