打造高级感十足的 WordPress 页脚:子比主题自定义美
饺子分享

打造高级感十足的 WordPress 页脚:子比主题自定义美

blogger头像
blogger 博主
2026.05.15 · 约 79 分钟 · 0 评论 · 0 喜爱

页脚作为网站的 “收尾部分”,看似不起眼,实则是提升用户体验和品牌质感的关键区域。很多站长在美化网站时,往往将精力集中在头部和内容区,却忽略了页脚的设计,导致整个网站的视觉体验 “虎头蛇尾”。本文以子比(Zibll)主题…

页脚作为网站的 “收尾部分”,看似不起眼,实则是提升用户体验和品牌质感的关键区域。很多站长在美化网站时,往往将精力集中在头部和内容区,却忽略了页脚的设计,导致整个网站的视觉体验 “虎头蛇尾”。本文以子比(Zibll)主题为例,分享如何通过纯 CSS+JS 定制出兼具实用性与视觉美感的高级感页脚,让网站的每一个角落都能体现专业度。

一、页脚设计的核心原则:美观与实用兼具

在开始定制前,我们首先要明确页脚的核心功能定位:

  1. 信息补充:展示网站统计数据、友情链接、联系方式等核心信息;
  2. 视觉平衡:与网站整体风格呼应,形成完整的视觉闭环;
  3. 用户引导:通过二维码、友链申请按钮等元素引导用户进一步互动;
  4. 适配性:兼顾 PC 端与移动端的显示效果,避免布局错乱。

基于以上原则,本次定制的子比主题页脚实现了以下核心功能:

  • 渐变暗黑系背景搭配光影效果,提升视觉层次感;
  • 动态加载的网站统计数据,直观展示网站运营状态;
  • 横向固定 4 列的友情链接布局,避免滚动影响体验;
  • 独立定位的二维码区域,不干扰核心内容布局;
  • 响应式设计,适配不同尺寸的设备显示。

代码如下

[hidecontent type="reply"]
<!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://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.5.1/css/all.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.5.1/css/v4-shims.min.css">

    <style>
        /* 子比主题页脚样式 */
        .zibll-footer {
            background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
            color: #fff;
            font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
            overflow: hidden;
            position: relative;
            height: 550px; /* 直接修改此数值调整页脚高度 */
            box-sizing: border-box;
        }

        /* 背景装饰 */
        .zibll-footer::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-image: 
                radial-gradient(circle at 20% 80%, rgba(120, 119, 198, 0.3) 0%, transparent 50%),
                radial-gradient(circle at 80% 20%, rgba(255, 119, 198, 0.3) 0%, transparent 50%),
                radial-gradient(circle at 40% 40%, rgba(120, 219, 255, 0.2) 0%, transparent 50%);
            pointer-events: none;
        }

        /* 统计信息区域 */
        .footer-stats {
            padding: 40px 0;
            position: relative;
            z-index: 1;
            opacity: 0;
            transform: translateY(20px);
            transition: all 0.8s ease;
        }

        .footer-stats.visible {
            opacity: 1;
            transform: translateY(0);
        }

        .stats-container {
            max-width: 1200px;
            margin: 0 auto;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-wrap: wrap;
            gap: 30px;
            padding: 0 20px;
        }

        .stat-item {
            display: flex;
            align-items: center;
            gap: 10px;
            background: rgba(255, 255, 255, 0.1);
            padding: 15px 25px;
            border-radius: 50px;
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
            transition: all 0.3s ease;
        }

        .stat-item:hover {
            transform: translateY(-5px) scale(1.05);
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
            background: rgba(255, 255, 255, 0.15);
        }

        .stat-icon {
            font-size: 18px;
            color: #00d4ff;
        }

        .stat-label {
            font-size: 14px;
            color: #ccc;
        }

        .stat-value {
            font-size: 18px;
            font-weight: bold;
            color: #00d4ff;
        }

        .stat-unit {
            font-size: 14px;
            color: #ccc;
        }

        /* 性能信息区域 */
        .footer-performance-inline {
            padding: 15px 0 0 0;
            margin-top: 15px;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            position: relative;
            z-index: 1;
        }

        .perf-container-inline {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            flex-wrap: wrap;
            gap: 20px;
            font-size: 14px;
        }

        .perf-item {
            color: #ccc;
        }

        .perf-item span {
            color: #00d4ff;
            font-weight: bold;
        }

        .perf-divider {
            color: rgba(255, 255, 255, 0.3);
        }

        /* 网站信息区域 */
        .footer-info {
            padding: 60px 0;
            position: relative;
            z-index: 1;
            opacity: 0;
            transform: translateY(20px);
            transition: all 0.8s ease;
        }

        .footer-info.visible {
            opacity: 1;
            transform: translateY(0);
        }

        .info-container {
            max-width: 1200px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 60px;
            padding: 0 20px;
        }

        .site-info {
            display: flex;
            gap: 30px;
            align-items: flex-start;
            flex-direction: column;
        }

        .site-logo img {
            width: 260px;
            height: auto;
            border-radius: 0;
            object-fit: contain;
            border: none;
            transition: all 0.3s ease;
        }

        .site-logo img:hover {
            transform: scale(1.05);
            filter: brightness(1.1);
        }

        .site-title {
            font-size: 24px;
            font-weight: bold;
            margin-bottom: 15px;
            color: #fff;
        }

        .site-intro {
            font-size: 14px;
            line-height: 1.8;
            color: #ccc;
            margin: 0;
        }

        /* 友情链接区域 - 恢复原样,不受二维码影响 */
        .friend-links {
            margin-top: 20px;
            display: flex;
            flex-direction: column;
            height: 100%;
        }

        .links-title {
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 25px;
            color: #fff;
            position: relative;
            background: linear-gradient(90deg, #00d4ff, #ff006e);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            animation: textFloat 3s ease-in-out infinite;
            width: 100%;
        }

        @keyframes textFloat {
            0%, 100% {
                transform: translateY(0);
            }
            50% {
                transform: translateY(-5px);
            }
        }

        .links-title::after {
            content: '';
            position: absolute;
            bottom: -8px;
            left: 0;
            width: 50px;
            height: 2px;
            background: linear-gradient(90deg, #00d4ff, #ff006e);
            animation: lineExpand 3s ease-in-out infinite;
        }

        @keyframes lineExpand {
            0%, 100% {
                width: 50px;
            }
            50% {
                width: 100px;
            }
        }

        /* 友情链接网格 - 强制4个,无滚动,完全独立 */
        .links-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr); /* 强制一行4个 */
            gap: 15px;
            overflow: hidden;
            padding-right: 0;
            width: 100%;
        }     

        .link-item {
            display: flex;
            align-items: center;
            gap: 10px;
            background: rgba(255, 255, 255, 0.1);
            padding: 10px 15px;
            border-radius: 8px;
            text-decoration: none;
            color: #ccc;
            transition: all 0.3s ease;
            font-size: 13px;
            border: 1px solid rgba(255, 255, 255, 0.1);
            white-space: nowrap;
        }

        .link-item:hover {
            background: rgba(255, 255, 255, 0.15);
            color: #00d4ff;
            transform: translateY(-3px) scale(1.02);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
        }

        .link-icon {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            object-fit: cover;
            flex-shrink: 0;
        }

        .link-name {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        /* 申请友链按钮样式 */
        .apply-link-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            background: linear-gradient(90deg, #00d4ff, #ff006e);
            padding: 10px 15px;
            border-radius: 50px;
            text-decoration: none;
            color: #fff;
            transition: all 0.3s ease;
            font-size: 13px;
            font-weight: bold;
            border: none;
            cursor: pointer;
            white-space: nowrap;
        }

        .apply-link-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(0, 212, 255, 0.4);
        }

        /* 二维码样式 - 绝对定位到最右侧右下角边界 */
        .qr-code-container {
            position: absolute;
            right: 20px; /* 紧贴右侧边界,可微调距离 */
            bottom: 100px; /* 在版权信息上方,可微调距离 */
            display: flex;
            gap: 15px;
            z-index: 10;
            white-space: nowrap;
        }

        .qr-code-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-decoration: none;
            color: #ccc;
            transition: all 0.3s ease;
        }

        .qr-code-img {
            width: 80px;
            height: 80px;
            border-radius: 8px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
            transition: transform 0.3s ease;
        }

        .qr-code-item:hover .qr-code-img {
            transform: scale(1.1);
        }

        .qr-code-label {
            font-size: 12px;
            margin-top: 5px;
            color: #ccc;
            transition: color 0.3s ease;
            white-space: nowrap;
        }

        .qr-code-item:hover .qr-code-label {
            color: #00d4ff;
        }

        /* 版权信息 */
        .footer-copyright {
            padding: 30px 0;
            background: rgba(0, 0, 0, 0.7);
            border-top: 2px solid rgba(0, 212, 255, 0.3);
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            z-index: 1;
            overflow: hidden;
            opacity: 0;
            transform: translateY(20px);
            transition: all 0.8s ease;
        }

        .footer-copyright.visible {
            opacity: 1;
            transform: translateY(0);
        }

        .footer-copyright::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(0, 212, 255, 0.1), transparent);
            animation: copyrightShine 5s linear infinite;
        }

        @keyframes copyrightShine {
            0% {
                left: -100%;
            }
            100% {
                left: 100%;
            }
        }

        .copyright-container {
            max-width: 1200px;
            margin: 0 auto;
            text-align: center;
            padding: 0 20px;
            font-size: 14px;
            color: #999;
            position: relative;
            z-index: 2;
        }

        .copyright-container a {
            color: #00d4ff;
            text-decoration: none;
            transition: all 0.3s ease;
            position: relative;
        }

        .copyright-container a::after {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            width: 0;
            height: 1px;
            background: linear-gradient(90deg, #00d4ff, #ff006e);
            transition: width 0.3s ease;
        }

        .copyright-container a:hover {
            color: #ff006e;
        }

        .copyright-container a:hover::after {
            width: 100%;
        }

        /* 响应式设计 */
        @media (max-width: 768px) {
            .stats-container {
                gap: 15px;
            }

            .stat-item {
                padding: 12px 20px;
                font-size: 13px;
            }

            .info-container {
                grid-template-columns: 1fr;
                gap: 40px;
            }

            .site-info {
                text-align: center;
                align-items: center;
            }

            .perf-container-inline {
                justify-content: center;
            }

            .links-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 10px;
            }

            .qr-code-container {
                position: relative;
                right: auto;
                bottom: auto;
                justify-content: center;
                margin-top: 30px;
            }
        }

        @media (max-width: 480px) {
            .footer-stats {
                padding: 30px 0;
            }

            .stats-container {
                gap: 10px;
            }

            .stat-item {
                padding: 10px 15px;
                font-size: 12px;
            }

            .perf-container-inline {
                flex-direction: column;
                gap: 10px;
            }

            .perf-divider {
                display: none;
            }

            .links-grid {
                grid-template-columns: repeat(2, 1fr);
            }

            .qr-code-container {
                flex-direction: column;
                gap: 10px;
            }
        }

        /* 返回顶部按钮 */
        .back-to-top {
            position: fixed;
            bottom: 30px;
            right: 30px;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background: linear-gradient(135deg, #00d4ff, #ff006e);
            color: white;
            border: none;
            cursor: pointer;
            font-size: 18px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s ease;
            z-index: 9999;
        }

        .back-to-top:hover {
            transform: scale(1.1);
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
        }

        .back-to-top.show {
            opacity: 1;
            visibility: visible;
        }
    </style>
</head>
<body>
    <!-- 子比主题底部页脚 -->
    <footer class="zibll-footer">
        <!-- 统计信息区域 -->
        <div class="footer-stats">
            <div class="stats-container">
                <div class="stat-item">
                    <span class="stat-icon"><i class="fa fa-users"></i></span>
                    <span class="stat-label">会员总数</span>
                    <span class="stat-value" id="member-count">--</span>
                </div>
                <div class="stat-item">
                    <span class="stat-icon"><i class="fa fa-file-text"></i></span>
                    <span class="stat-label">文章总数</span>
                    <span class="stat-value" id="post-count">--</span>
                </div>
                <div class="stat-item">
                    <span class="stat-icon"><i class="fa fa-eye"></i></span>
                    <span class="stat-label">浏览总数</span>
                    <span class="stat-value" id="view-count">--</span>
                </div>
                <div class="stat-item">
                    <span class="stat-icon"><i class="fa fa-calendar"></i></span>
                    <span class="stat-label">今日发布</span>
                    <span class="stat-value" id="today-posts">--</span>
                </div>
                <div class="stat-item">
                    <span class="stat-icon"><i class="fa fa-server"></i></span>
                    <span class="stat-label">稳定运行</span>
                    <span class="stat-value" id="uptime-days">--</span>
                    <span class="stat-unit">天</span>
                </div>
            </div>
        </div>

        <!-- 网站信息区域 -->
        <div class="footer-info">
            <div class="info-container">
                <!-- LOGO和介绍 -->
                <div class="site-info">
                    <div class="site-logo">
                        <a href="https://cs.yykbk.com/" target="_blank">
                            <img src="https://cs.yykbk.com/wp-content/uploads/2026/01/logo1.webp" alt="优源库博客网">
                        </a>
                    </div>
                    <div class="site-description">
                        <h3 class="site-title">优源库博客网・YYKBK.COM</h3>
                        <p class="site-intro">优源库博客网致力于分享优质实用的互联网资源,内容包括有网站搭建、建站源码、样式特效、主题美化、实用工具、素材资源、技术教程,致力打造一个IT博客!</p>

                        <div class="footer-performance-inline">
                            <div class="perf-container-inline">
                                <span class="perf-item">页面耗时 <span id="page-load-time">--</span> 秒</span>
                                <span class="perf-divider">|</span>
                                <span class="perf-item">数据库查询 <span id="db-queries">--</span> 次</span>
                                <span class="perf-divider">|</span>
                                <span class="perf-item">内存 <span id="memory-usage">--</span></span>
                                <span class="perf-divider">|</span>
                                <span class="perf-item">在线人数:<span id="online-users">--</span> 人</span>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 友情链接 - 完全独立,不受二维码影响 -->
                <div class="friend-links">
                    <h4 class="links-title">这里是友情链接板块,需要加入的友友点击下方按钮加入吧</h4>
                    <div class="links-grid" id="friend-links-container">
                        <!-- 友情链接将通过JavaScript动态生成 -->
                    </div>
                </div>
            </div>
        </div>

        <!-- 二维码容器 - 独立绝对定位在最右侧右下角 -->
        <div class="qr-code-container">
            <a href="https://cs.yykbk.com/" target="_blank" class="qr-code-item">
                <img src="https://cs.yykbk.com/wp-content/uploads/2026/02/20260219160828596-WX.webp" alt="微信赞助饺子" class="qr-code-img">
                <span class="qr-code-label">微信赞助饺子</span>
            </a>
            <a href="https://cs.yykbk.com/wechat" target="_blank" class="qr-code-item">
                <img src="https://cs.yykbk.com/wp-content/uploads/2026/02/20260219160828267-ZFB.webp" alt="支付宝赞助饺子" class="qr-code-img">
                <span class="qr-code-label">支付宝赞助饺子</span>
            </a>
        </div>

        <!-- 版权信息 -->
        <div class="footer-copyright">
            <div class="copyright-container">
                <p>© 2025 优源库博客网. 保留所有权利. | 
                   <a href="https://cs.yykbk.com/" target="_blank">YYKBK.COM</a> | 
                   子比主题定制页脚
                </p>
            </div>
        </div>
    </footer>

    <!-- 返回顶部按钮 -->
    <button class="back-to-top" id="backToTop">
        <i class="fa fa-arrow-up"></i>
    </button>

    <script>
        const CACHE_KEY = 'zibll_footer_stats_cache';
        const CACHE_DURATION = 5 * 60 * 1000;

        document.addEventListener('DOMContentLoaded', function() {
            initFooter();
            initBackToTop();
            initScrollAnimations();
        });

        function initFooter() {
            loadRealDataWithCache();
            loadFriendLinks();
        }

        function loadRealDataWithCache() {
            const cachedData = localStorage.getItem(CACHE_KEY);
            const now = Date.now();

            if (cachedData) {
                const { data, timestamp } = JSON.parse(cachedData);
                if (now - timestamp < CACHE_DURATION) {
                    updateFooterUI(data);
                    return;
                }
            }

            fetchRealData();
        }

        function fetchRealData() {
            const ajaxurl = window.ajaxurl || '/wp-admin/admin-ajax.php'; 
            const formData = new FormData();
            formData.append('action', 'get_zibll_footer_real_stats');

            fetch(ajaxurl, {
                method: 'POST',
                credentials: 'same-origin',
                body: formData
            })
            .then(response => response.json())
            .then(res => {
                if (res.success) {
                    localStorage.setItem(CACHE_KEY, JSON.stringify({
                        data: res.data,
                        timestamp: Date.now()
                    }));
                    updateFooterUI(res.data);
                }
            })
            .catch(err => console.error('AJAX 请求错误', err));
        }

        function updateFooterUI(data) {
            if (document.getElementById('member-count')) document.getElementById('member-count').textContent = data.members || 0;
            if (document.getElementById('post-count')) document.getElementById('post-count').textContent = data.posts || 0;
            if (document.getElementById('view-count')) document.getElementById('view-count').textContent = data.views || 0;
            if (document.getElementById('today-posts')) document.getElementById('today-posts').textContent = data.today_posts || 0;
            if (document.getElementById('uptime-days')) document.getElementById('uptime-days').textContent = data.uptime_days || 0;

            if (document.getElementById('page-load-time')) document.getElementById('page-load-time').textContent = data.load_time || '0.00';
            if (document.getElementById('db-queries')) document.getElementById('db-queries').textContent = data.db_queries || 0;
            if (document.getElementById('memory-usage')) document.getElementById('memory-usage').textContent = data.memory_usage || '0MB';
            if (document.getElementById('online-users')) document.getElementById('online-users').textContent = data.online_users || 1;
        }

        function loadFriendLinks() {
            const friendLinks = [
                { name: 'WordPress官方', url: 'https://wordpress.org', icon: 'https://wordpress.org/favicon.ico' },
                { name: '子比主题官网', url: 'https://www.zibll.com', icon: 'https://www.zibll.com/favicon.ico' },
                { name: '优源库博客', url: 'https://cs.yykbk.com/', icon: 'https://cs.yykbk.com/favicon.ico' },
                { name: '百度', url: 'https://www.baidu.com', icon: 'https://www.baidu.com/favicon.ico' },
                { name: 'GitHub', url: 'https://github.com', icon: 'https://github.com/favicon.ico' },
                { name: 'CSDN', url: 'https://www.csdn.net', icon: 'https://www.csdn.net/favicon.ico' },
                { name: '掘金', url: 'https://juejin.cn', icon: 'https://juejin.cn/favicon.ico' },
                { name: '博客园', url: 'https://www.cnblogs.com', icon: 'https://www.cnblogs.com/favicon.ico' }
            ];

            const container = document.getElementById('friend-links-container');
            if(!container) return;
            container.innerHTML = '';

            const applyBtn = document.createElement('a');
            applyBtn.href = 'https://cs.yykbk.com/apply-link';
            applyBtn.target = '_blank';
            applyBtn.className = 'apply-link-btn';
            applyBtn.innerHTML = '<i class="fa fa-plus"></i> 申请友链';
            container.appendChild(applyBtn);

            friendLinks.forEach(link => {
                const linkItem = document.createElement('a');
                linkItem.href = link.url;
                linkItem.target = '_blank';
                linkItem.className = 'link-item';
                linkItem.rel = 'nofollow';

                linkItem.innerHTML = `
                    <img src="${link.icon}" alt="${link.name}" class="link-icon" onerror="this.style.display='none'">
                    <span class="link-name">${link.name}</span>
                `;
                container.appendChild(linkItem);
            });
        }

        function initBackToTop() {
            const backToTopButton = document.getElementById('backToTop');
            if(!backToTopButton) return;

            window.addEventListener('scroll', function() {
                if (window.pageYOffset > 300) {
                    backToTopButton.classList.add('show');
                } else {
                    backToTopButton.classList.remove('show');
                }
            });

            backToTopButton.addEventListener('click', function() {
                window.scrollTo({ top: 0, behavior: 'smooth' });
            });
        }

        function initScrollAnimations() {
            const observerOptions = {
                root: null,
                rootMargin: '0px',
                threshold: 0.1
            };

            const observer = new IntersectionObserver((entries) => {
                entries.forEach(entry => {
                    if (entry.isIntersecting) {
                        entry.target.classList.add('visible');
                    }
                });
            }, observerOptions);

            document.querySelectorAll('.footer-stats, .footer-info, .footer-copyright').forEach(section => {
                observer.observe(section);
            });
        }
    </script>
</body>
</html>
[/hidecontent]
[hidecontent type="reply"]
add_action('wp_ajax_get_zibll_footer_real_stats', 'zibll_get_footer_real_stats');
add_action('wp_ajax_nopriv_get_zibll_footer_real_stats', 'zibll_get_footer_real_stats');

function zibll_get_footer_real_stats() {
    // 1. 基础统计数据
    $data = array();

    // --- 会员总数 (如果开启了注册) ---
    $user_count = count_users();
    $data['members'] = $user_count['total_users'];

    // --- 文章总数 ---
    $data['posts'] = wp_count_posts('post')->publish;

    // --- 浏览总数 (调用子比主题的函数或自定义字段) ---
    // 注意:子比主题通常使用 'views' 作为 meta_key,这里尝试通用获取
    // 如果你的站有特定的统计插件,请在此处替换逻辑
    $total_views = 0;
    $args = array(
        'post_type' => 'post',
        'posts_per_page' => -1,
        'meta_key' => 'views', // 子比主题的浏览量字段通常是 views
        'fields' => 'ids'
    );
    $posts_with_views = get_posts($args);
    foreach ($posts_with_views as $pid) {
        $total_views += (int) get_post_meta($pid, 'views', true);
    }
    // 如果子比有自带函数,优先用 zibll_get_post_views() 之类的,这里做通用处理
    $data['views'] = $total_views > 0 ? number_format($total_views) : '0';

    // --- 今日发布 ---
    $today = getdate();
    $today_posts = new WP_Query(array(
        'post_type' => 'post',
        'post_status' => 'publish',
        'year' => $today['year'],
        'monthnum' => $today['mon'],
        'day' => $today['mday'],
        'fields' => 'ids'
    ));
    $data['today_posts'] = $today_posts->found_posts;
    wp_reset_postdata();

    // --- 稳定运行天数 (需要你手动设置建站日期) ---
    // 请在这里修改为你的网站建立日期 (格式: Y-m-d)
    $site_start_date = '2023-01-01'; 
    $now = time();
    $start = strtotime($site_start_date);
    $data['uptime_days'] = ceil(($now - $start) / 86400);

    // 2. 性能数据
    // --- 内存使用 & 数据库查询 (WordPress 自带常量) ---
    if (function_exists('memory_get_usage')) {
        $data['memory_usage'] = size_format(memory_get_usage(), 2);
    } else {
        $data['memory_usage'] = '未知';
    }

    // WordPress 在 wp_footer 阶段通常已经执行完大部分查询
    // 这里我们尝试获取,如果获取不到则显示一个合理的数值
    if (defined('SAVEQUERIES') && SAVEQUERIES) {
        global $wpdb;
        $data['db_queries'] = count($wpdb->queries);
    } else {
        // 如果没开启 SAVEQUERIES,我们可以通过 WP 自带的 get_num_queries (仅限早期钩子)
        // 在 AJAX 中我们模拟一个轻量级查询检测,或者直接显示子比主题优化后的估值
        $data['db_queries'] = rand(15, 30); // 这里仅为演示,实际精确值需在主题模板钩子中捕获
    }

    // --- 页面耗时 (AJAX 本身的耗时) ---
    $time = microtime(true) - $_SERVER["REQUEST_TIME_FLOAT"];
    $data['load_time'] = number_format($time, 2);

    // --- 在线人数 (简易版: 使用 Transient 缓存) ---
    $online_users = zibll_get_online_users();
    $data['online_users'] = $online_users;

    // 返回数据
    wp_send_json_success($data);
}

// 辅助函数:简易在线人数统计
function zibll_get_online_users() {
    $transient_key = 'zibll_active_users';
    $timeout = 300; // 5分钟内算在线

    // 获取当前用户 IP
    $ip = $_SERVER['REMOTE_ADDR'];
    $time = current_time('timestamp');

    // 从缓存获取在线列表
    $online = get_transient($transient_key);
    if (!$online) {
        $online = array();
    }

    // 移除过期用户,更新当前用户
    foreach ($online as $user_ip => $last_time) {
        if (($time - $last_time) > $timeout) {
            unset($online[$user_ip]);
        }
    }
    $online[$ip] = $time;

    // 保存回缓存
    set_transient($transient_key, $online, $timeout);

    return count($online);
}
[/hidecontent]

弹幕表态
我的头像
0/300
文明发言,一起守护温柔的评论区

0 条回复

A文章作者 M管理员
这里需要一条查重率 0% 的评论

还没有评论,来说两句吧~

1会员总数
104文章总数
1058浏览总数
0今日发布
277天稳定运行
  • 波浪
  • 波浪
  • 波浪
  • 波浪

Hello World

页面耗时 0.120 秒 | 数据库查询 64 次 | 内存 0.87 MB | 在线人数:1人

104+

精品文章等您来关注

Copyright © 2025 - 2026 Hello World