【子比】側邊欄顯示天氣預報加一言教程

文本是《WordPress（共53篇）》專題的第 50 篇。閱讀本文前，建議先閱讀前面的文章：

在網站搭建進程中，子比主題憑藉簡潔美觀的設計和強大功能，備受眾多站長青睞。為子比主題增添天氣預報顯示功能，可極大提升網站的實用性與趣味性，使訪客能更便捷地獲取天氣資訊。接下來，本文將詳細介紹如何在子比主題的側邊欄進行天氣預報顯示設置。

實時天氣卡片展示

當完成相關設置后，於子比主題的側邊欄，你會看到如下樣式的實時天氣卡片：

地區：山東省聊城市
時間：2025/2/16 21：51：41
天氣狀況：多雲
溫度：3°C
濕度：38%
風向：東
風力：≤3
數據來源：112.38.37.107
報告時間：2025/2/16 21：31：15

效果演示

使用教學

首先進入WordPress後台>外觀>小工具>自定義HTML>把自定義HTML添加到>文章頁側邊欄>複製下面的代碼即可。

可以放在側邊欄，也可以放在你想放的任何位置，都是可以的。

樣式（一）

<!-- 转载请保留-AngelaL博客：Www.AngelaL.Cc -->
<!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>

樣式（二）

<!-- 转载请保留-AngelaL博客：Www.AngelaL.Cc -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>精美天气卡片</title>
    <!-- 引入Font Awesome图标库 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        /* 卡片整体样式 */
        .weather-card {
            background: linear-gradient(135deg, #f8f9fa, #e9ecef);
            border-radius: 12px;
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
            padding: 2rem;
            max-width: 500px;
            margin: 2rem auto;
            font-family: 'Segoe UI', 'Helvetica Neue', sans-serif;
        }

        /* 标题样式 */
        .weather-card h1 {
            color: #2c3e50;
            font-size: 1.8rem;
            margin-bottom: 1.5rem;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.8rem;
        }

        /* 天气信息区域样式 */
        .weather-info {
            background: rgba(255, 255, 255, 0.9);
            border-radius: 8px;
            padding: 1.2rem;
            margin: 1.5rem 0;
        }

        /* 段落文本样式 */
        .weather-card p {
            font-size: 1rem;
            color: #4a5568;
            margin: 0.8rem 0;
            display: flex;
            align-items: center;
        }

        /* 强调文本样式 */
        .weather-card strong {
            color: #2d3748;
            margin-left: 0.5rem;
        }

        /* 图标样式 */
        .icon {
            width: 24px;
            color: #4c6ef5;
            margin-right: 1rem;
            text-align: center;
        }

        /* 底部区域样式 */
        .footer {
            border-top: 1px solid #eee;
            padding-top: 1.2rem;
            font-size: 0.85rem;
            color: #718096;
        }

        /* 加载状态样式 */
        .loading {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.8rem;
            color: #64748b;
            margin-top: 1.5rem;
        }

        /* 一言区域样式 */
        #yiyan {
            font-style: italic;
            color: #6b7280;
            margin: 1.2rem 0;
            padding: 0.8rem;
            background: rgba(255, 255, 255, 0.9);
            border-radius: 6px;
        }

        /* 加载动画 */
        .fa-spinner {
            animation: spin 1s linear infinite;
        }

        @keyframes spin {
            100% { transform: rotate(360deg); }
        }
    </style>
</head>
<body>
    <!-- 天气卡片容器 -->
    <div class="weather-card">
        <!-- 标题 -->
        <h1><i class="fa-solid fa-cloud-sun icon"></i>实时天气卡片</h1>
        
        <!-- 位置信息 -->
        <p id="location"><i class="fa-solid fa-location-dot icon"></i><strong>加载中...</strong></p>
        
        <!-- 日期信息 -->
        <p id="date"><i class="fa-solid fa-calendar-day icon"></i><strong>加载中...</strong></p>
        
        <!-- 时间信息 -->
        <p id="time"><i class="fa-solid fa-clock icon"></i><strong>加载中...</strong></p>
        
        <!-- 天气信息区域 -->
        <div class="weather-info">
            <p><i class="fa-solid fa-cloud-showers-heavy icon"></i>天气状况：<strong id="weather-status">加载中...</strong></p>
            <p><i class="fa-solid fa-temperature-three-quarters icon"></i>温度：<strong id="temperature">加载中...</strong>℃</p>
            <p><i class="fa-solid fa-droplet icon"></i>湿度：<strong id="humidity">加载中...</strong>%</p>
            <p><i class="fa-solid fa-compass icon"></i>风向：<strong id="wind-direction">加载中...</strong></p>
            <p><i class="fa-solid fa-wind icon"></i>风力：<strong id="wind-power">加载中...</strong></p>
        </div>

        <!-- 一言区域 -->
        <div id="yiyan"></div>

        <!-- 底部信息 -->
        <div class="footer">
            <p id="data-source"><i class="fa-solid fa-database icon"></i>数据来源：<strong>加载中...</strong></p>
            <p id="report-time"><i class="fa-solid fa-clock-rotate-left icon"></i>报告时间：<strong>加载中...</strong></p>
        </div>

        <!-- 加载状态 -->
        <div class="loading">
            <i class="fa-solid fa-spinner"></i>
            <span>正在加载实时天气数据...</span>
        </div>
    </div>

    <!-- JavaScript代码 -->
    <script>
        // 天气数据API地址
        const API_URL = "https://api.fenx.top/api/getWeather";

        // 获取并更新时间
        function getCurrentTime() {
            const now = new Date();
            document.getElementById("time").querySelector("strong").textContent = now.toLocaleTimeString();
            document.getElementById("date").querySelector("strong").textContent = now.toLocaleDateString();
        }

        // 获取天气数据
        async function fetchWeatherData() {
            try {
                const response = await fetch(API_URL);
                const data = await response.json();
                if (data.code === 200) {
                    const weather = data.data.weather;
                    document.getElementById("location").querySelector("strong").textContent = `${data.data.province} ${data.data.city}`;
                    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 = new Date(weather.reporttime).toLocaleString();
                    document.querySelector(".loading").style.display = "none";
                }
            } catch (error) {
                document.querySelector(".loading").innerHTML = `<i class="fa-solid fa-triangle-exclamation"></i> 加载失败，请稍后重试`;
            }
        }

        // 初始化
        fetchWeatherData();
        setInterval(fetchWeatherData, 600000); // 每10分钟更新一次
        setInterval(getCurrentTime, 1000); // 每秒更新时间

        // 获取一言
        fetch("https://api.fenx.top/api/yiyan")
            .then(r => r.text())
            .then(t => document.getElementById("yiyan").textContent = t)
            .catch(() => document.getElementById("yiyan").textContent = "感悟生活的美好...");
    </script>
</body>
</html>

樣式（三）

<!-- 转载请保留-AngelaL博客：Www.AngelaL.Cc -->
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 添加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">
    <div class="card-header">
        <i class="fas fa-cloud-sun weather-icon"></i>
        <h1>实时天气</h1>
    </div>
    
    <div class="location-info">
        <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>
    
    <div class="weather-info">
        <div class="weather-item">
            <i class="fas fa-umbrella fa-fw icon-weather"></i>
            <div class="weather-text">
                <span>天气状况</span>
                <strong id="weather-status">加载中...</strong>
            </div>
        </div>
        
        <div class="weather-item">
            <i class="fas fa-thermometer-half fa-fw icon-weather"></i>
            <div class="weather-text">
                <span>温度</span>
                <strong id="temperature">加载中...</strong>℃
            </div>
        </div>
        
        <div class="weather-item">
            <i class="fas fa-tint fa-fw icon-weather"></i>
            <div class="weather-text">
                <span>湿度</span>
                <strong id="humidity">加载中...</strong>%
            </div>
        </div>
        
        <div class="weather-item">
            <i class="fas fa-flag fa-fw icon-weather"></i>
            <div class="weather-text">
                <span>风向</span>
                <strong id="wind-direction">加载中...</strong>
            </div>
        </div>
        
        <div class="weather-item">
            <i class="fas fa-wind fa-fw icon-weather"></i>
            <div class="weather-text">
                <span>风力</span>
                <strong id="wind-power">加载中...</strong>
            </div>
        </div>
    </div>

    <div id="yiyan" class="yiyan-box">
        <i class="fas fa-quote-left"></i> <span>加载中...</span> <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">
        <div class="spinner"></div>
        <span>正在加载实时天气数据...</span>
    </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").classList.add("hidden");
                
                // 显示卡片内容
                document.querySelector(".weather-card").classList.add("loaded");
            } else {
                throw new Error("Failed to fetch weather data");
            }
        } catch (error) {
            console.error("Error fetching weather data:", error);
            document.querySelector(".loading").innerHTML = 
                '<i class="fas fa-exclamation-circle"></i> <span>加载失败，请稍后重试</span>';
            document.querySelector(".loading").classList.add("error");
        }
    }

    // 初始化
    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> <span>${text}</span> <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> <span>加载失败，请稍后再试</span>`;
        });
</script>

<style>
    /* 基础样式重置 */
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    
    body {
        font-family: 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
        background-color: #f5f7fa;
        color: #333;
        line-height: 1.6;
    }

    /* 卡片容器 */
    .weather-card {
        background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
        border-radius: 20px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1), 0 1px 8px rgba(0, 0, 0, 0.05);
        padding: 30px;
        max-width: 500px;
        margin: 30px auto;
        position: relative;
        overflow: hidden;
        transition: all 0.5s ease;
        opacity: 0.95;
    }
    
    .weather-card:hover {
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15), 0 3px 10px rgba(0, 0, 0, 0.1);
        transform: translateY(-5px);
        opacity: 1;
    }
    
    .weather-card.loaded {
        animation: fadeIn 0.5s ease-in-out;
    }
    
    /* 卡片标题 */
    .card-header {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 25px;
        position: relative;
    }
    
    .card-header h1 {
        font-size: 2em;
        font-weight: 700;
        color: #2c3e50;
        margin: 0;
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
    }
    
    .weather-icon {
        font-size: 2em;
        color: #3498db;
        margin-right: 15px;
        filter: drop-shadow(0 0 5px rgba(52, 152, 219, 0.5));
    }
    
    /* 位置信息 */
    .location-info {
        background: rgba(255, 255, 255, 0.8);
        border-radius: 15px;
        padding: 15px 20px;
        margin-bottom: 20px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
        transition: all 0.3s ease;
    }
    
    .location-info:hover {
        background: rgba(255, 255, 255, 0.95);
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.08);
    }
    
    .location-info p {
        display: flex;
        align-items: center;
        margin: 10px 0;
        font-size: 1.05em;
        color: #34495e;
    }
    
    .location-info i {
        margin-right: 15px;
        width: 20px;
        text-align: center;
    }
    
    /* 天气信息 - 使用Flexbox替代Grid */
    .weather-info {
        background: rgba(255, 255, 255, 0.8);
        border-radius: 15px;
        padding: 20px;
        margin-bottom: 20px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
        transition: all 0.3s ease;
    }
    
    .weather-info:hover {
        background: rgba(255, 255, 255, 0.95);
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.08);
    }
    
    .weather-item {
        display: flex;
        align-items: center;
        padding: 10px;
        border-radius: 10px;
        transition: all 0.3s ease;
        width: 48%;
        margin-bottom: 10px;
    }
    
    .weather-item:hover {
        background: rgba(255, 255, 255, 0.8);
        transform: translateY(-2px);
    }
    
    .weather-item i {
        font-size: 1.5em;
        margin-right: 15px;
        width: 25px;
        text-align: center;
    }
    
    .weather-text {
        display: flex;
        flex-direction: column;
    }
    
    .weather-text span {
        font-size: 0.9em;
        color: #7f8c8d;
    }
    
    .weather-text strong {
        font-size: 1.1em;
        color: #2c3e50;
    }
    
    /* 一言区域 */
    .yiyan-box {
        background: linear-gradient(135deg, rgba(52, 152, 219, 0.1) 0%, rgba(155, 89, 182, 0.1) 100%);
        border-radius: 15px;
        padding: 20px;
        margin: 20px 0;
        text-align: center;
        font-style: italic;
        color: #34495e;
        position: relative;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
        transition: all 0.3s ease;
    }
    
    .yiyan-box:hover {
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.08);
        transform: translateY(-2px);
    }
    
    .yiyan-box i {
        color: #9b59b6;
        opacity: 0.7;
        font-size: 0.9em;
    }
    
    .yiyan-box span {
        margin: 0 10px;
        font-size: 1.05em;
    }
    
    /* 页脚 */
    .footer {
        border-top: 1px solid rgba(189, 195, 199, 0.3);
        padding-top: 15px;
        margin-top: 20px;
        font-size: 0.85em;
        color: #7f8c8d;
        display: flex;
        flex-direction: column;
        gap: 8px;
    }
    
    .footer p {
        display: flex;
        align-items: center;
    }
    
    .footer i {
        margin-right: 8px;
        opacity: 0.7;
    }
    
    /* 加载动画 */
    .loading {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(255, 255, 255, 0.9);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        z-index: 10;
        border-radius: 20px;
        transition: all 0.5s ease;
    }
    
    .loading.hidden {
        opacity: 0;
        visibility: hidden;
    }
    
    .loading.error {
        background: rgba(231, 76, 60, 0.1);
        color: #e74c3c;
    }
    
    .spinner {
        width: 40px;
        height: 40px;
        border: 4px solid rgba(52, 152, 219, 0.2);
        border-top: 4px solid #3498db;
        border-radius: 50%;
        margin-bottom: 15px;
        animation: spin 1s linear infinite;
    }
    
    .loading span {
        font-size: 1em;
        color: #7f8c8d;
    }
    
    .loading.error i {
        font-size: 2em;
        margin-bottom: 15px;
        color: #e74c3c;
    }
    
    /* 图标颜色 */
    .icon-blue { color: #3498db; }
    .icon-teal { color: #1abc9c; }
    .icon-purple { color: #9b59b6; }
    .icon-weather { color: #e67e22; }
    
    /* 动画 */
    @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }
    
    @keyframes fadeIn {
        from { opacity: 0.7; }
        to { opacity: 1; }
    }
    
    /* 响应式设计 */
    @media (max-width: 600px) {
        .weather-card {
            margin: 15px;
            padding: 20px;
        }
        
        .weather-item {
            width: 100%;
        }
        
        .card-header h1 {
            font-size: 1.6em;
        }
        
        .weather-icon {
            font-size: 1.6em;
        }
    }
</style>

</body>
</html>

您已閱讀完《WordPress（共53篇）》專題的第 50 篇。請繼續閱讀該專題下面的文章：

文章標題：【子比】側邊欄顯示天氣預報加一言教程

本文鏈接：https://angelal.cc/1895.html

文章版權：除非特別註明，否則均為AngelaL的原創文章，轉載必須以鏈接形式標明本文鏈接

本文最後更新發佈於：2025年03月10日 11:18, 某些文章具有時效性,若有錯誤或已失效,請在下方留言。

AngelaL博客

本文是原創文章，採用CC BY-NC-SA 4.0協議，完整轉載請註明來自AngelaL博客

{{userData.name}}已認證

【子比】側邊欄顯示天氣預報加一言教程

實時天氣卡片展示

效果演示

使用教學

樣式（一）

樣式（二）

樣式（三）

【Wordpress】添加短劇搜索功能

【Wordpress】贊助頁面

【WordPress】圖片自動添加alt和title

【Wordpress】美化之文章內頁新增彩色漸變框 (共9套)

海洋軟件動態壁紙

【Wordpress】訪問記錄外掛程式

網站縮圖在線生成PHP源碼

關於我們

熱門頻道

聯繫合作

QQ/微信

极主题,超级好看,开源,可自定义的子主题

AngelaL博客等你來關注