wordpress图文教程

纯代码给wordpress网站曾加基础流量分析功能

2025年8月9日
酒醒

纯代码给wordpress网站曾加基础流量分析功能

一个完整的WordPress网站流量分析功能代码，可以直接添加到你的主题文件中。这个方案使用原生JavaScript实现，无需额外插件，可以统计页面浏览量、访客来源等基础数据。

wp-analytics.js


// WordPress基础流量分析脚本
(function() {
    // 配置项
    const config = {
        localStorageKey: 'wp_analytics_data',
        maxRecords: 1000, // 最大记录数
        sessionTimeout: 30 * 60 * 1000, // 30分钟会话超时(毫秒)
        trackPageViews: true,
        trackReferrers: true,
        trackDeviceInfo: true
    };

    // 初始化数据存储
    let analyticsData = JSON.parse(localStorage.getItem(config.localStorageKey)) || {
        pageViews: 0,
        uniqueVisitors: 0,
        sessions: 0,
        referrers: {},
        devices: {},
        pages: {},
        lastVisit: null,
        currentSession: null
    };

    // 检查是否是新会话
    function isNewSession() {
        const now = new Date().getTime();
        if (!analyticsData.currentSession || 
            (now - analyticsData.currentSession.startTime) > config.sessionTimeout) {
            return true;
        }
        return false;
    }

    // 开始新会话
    function startNewSession() {
        const now = new Date().getTime();
        analyticsData.currentSession = {
            startTime: now,
            sessionId: 'sess_' + Math.random().toString(36).substr(2, 9)
        };
        analyticsData.sessions++;
        
        // 检查是否是新访客
        const visitorId = localStorage.getItem('wp_visitor_id');
        if (!visitorId) {
            const newVisitorId = 'vis_' + Math.random().toString(36).substr(2, 9);
            localStorage.setItem('wp_visitor_id', newVisitorId);
            analyticsData.uniqueVisitors++;
        }
    }

    // 记录页面浏览
    function trackPageView() {
        if (!config.trackPageViews) return;
        
        analyticsData.pageViews++;
        
        // 记录当前页面
        const pageUrl = window.location.pathname;
        analyticsData.pages[pageUrl] = (analyticsData.pages[pageUrl] || 0) + 1;
        
        // 记录设备信息
        if (config.trackDeviceInfo) {
            const deviceType = getDeviceType();
            analyticsData.devices[deviceType] = (analyticsData.devices[deviceType] || 0) + 1;
        }
        
        // 记录来源
        if (config.trackReferrers && document.referrer) {
            const referrer = new URL(document.referrer).hostname;
            if (referrer !== window.location.hostname) {
                analyticsData.referrers[referrer] = (analyticsData.referrers[referrer] || 0) + 1;
            }
        }
        
        // 更新最后访问时间
        analyticsData.lastVisit = new Date().toISOString();
        
        // 保存数据
        localStorage.setItem(config.localStorageKey, JSON.stringify(analyticsData));
    }

    // 获取设备类型
    function getDeviceType() {
        const userAgent = navigator.userAgent;
        if (/(tablet|ipad|playbook|silk)|(android(?!.*mobi))/i.test(userAgent)) {
            return 'Tablet';
        }
        if (/Mobile|Android|iP(hone|od)|IEMobile|BlackBerry|Kindle|Silk-Accelerated|(hpw|web)OS|Opera M(obi|ini)/.test(userAgent)) {
            return 'Mobile';
        }
        return 'Desktop';
    }

    // 初始化
    if (isNewSession()) {
        startNewSession();
    }
    trackPageView();

    // 提供简单的数据访问接口
    window.WPAnalytics = {
        getStats: function() {
            return {
                totalViews: analyticsData.pageViews,
                uniqueVisitors: analyticsData.uniqueVisitors,
                sessions: analyticsData.sessions,
                lastVisit: analyticsData.lastVisit
            };
        },
        getPageStats: function() {
            return analyticsData.pages;
        },
        getReferrerStats: function() {
            return analyticsData.referrers;
        },
        getDeviceStats: function() {
            return analyticsData.devices;
        }
    };
})();

analytics-display.php

<?php
/**
 * WordPress流量数据显示面板
 * 添加到主题的functions.php或创建为独立插件
 */

function wp_analytics_dashboard() {
    // 确保只在管理员界面显示
    if (!current_user_can('manage_options')) {
        return;
    }
    
    // 添加管理菜单项
    add_menu_page(
        '网站流量统计', 
        '流量统计', 
        'manage_options', 
        'wp-analytics', 
        'wp_analytics_display_page',
        'dashicons-chart-bar',
        6
    );
}

add_action('admin_menu', 'wp_analytics_dashboard');

function wp_analytics_display_page() {
    ?>
    <div class="wrap">
        <h1>网站流量统计</h1>
        
        <div class="wp-analytics-container">
            <div class="wp-analytics-stats-grid">
                <div class="stat-card">
                    <h3>总浏览量</h3>
                    <p id="total-views">加载中...</p>
                </div>
                <div class="stat-card">
                    <h3>独立访客</h3>
                    <p id="unique-visitors">加载中...</p>
                </div>
                <div class="stat-card">
                    <h3>会话数</h3>
                    <p id="total-sessions">加载中...</p>
                </div>
                <div class="stat-card">
                    <h3>最后访问</h3>
                    <p id="last-visit">加载中...</p>
                </div>
            </div>
            
            <div class="wp-analytics-charts">
                <div class="chart-container">
                    <h3>页面浏览量TOP 10</h3>
                    <div id="pages-chart"></div>
                </div>
                <div class="chart-container">
                    <h3>流量来源TOP 10</h3>
                    <div id="referrers-chart"></div>
                </div>
                <div class="chart-container">
                    <h3>设备分布</h3>
                    <div id="devices-chart"></div>
                </div>
            </div>
        </div>
    </div>
    
    <script>
    document.addEventListener('DOMContentLoaded', function() {
        // 获取统计数据
        const stats = WPAnalytics.getStats();
        document.getElementById('total-views').textContent = stats.totalViews;
        document.getElementById('unique-visitors').textContent = stats.uniqueVisitors;
        document.getElementById('total-sessions').textContent = stats.sessions;
        document.getElementById('last-visit').textContent = stats.lastVisit ? new Date(stats.lastVisit).toLocaleString() : '无记录';
        
        // 简单图表显示(实际项目中可以使用Chart.js等库)
        displayTopItems(WPAnalytics.getPageStats(), 'pages-chart');
        displayTopItems(WPAnalytics.getReferrerStats(), 'referrers-chart');
        displayPieChart(WPAnalytics.getDeviceStats(), 'devices-chart');
        
        function displayTopItems(data, elementId) {
            const items = Object.entries(data)
                .sort((a, b) => b[1] - a[1])
                .slice(0, 10);
            
            let html = '<ol>';
            items.forEach(([key, value]) => {
                html += `<li>${key}: <strong>${value}</strong></li>`;
            });
            html += '</ol>';
            
            document.getElementById(elementId).innerHTML = html;
        }
        
        function displayPieChart(data, elementId) {
            let html = '<ul>';
            Object.entries(data).forEach(([key, value]) => {
                html += `<li>${key}: <strong>${value}</strong></li>`;
            });
            html += '</ul>';
            
            document.getElementById(elementId).innerHTML = html;
        }
    });
    </script>
    
    <style>
    .wp-analytics-container {
        margin-top: 20px;
    }
    .wp-analytics-stats-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 20px;
        margin-bottom: 30px;
    }
    .stat-card {
        background: #fff;
        padding: 20px;
        border-radius: 4px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    }
    .stat-card h3 {
        margin-top: 0;
        color: #666;
        font-size: 14px;
    }
    .stat-card p {
        font-size: 24px;
        margin: 10px 0 0;
        font-weight: bold;
    }
    .wp-analytics-charts {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }
    .chart-container {
        background: #fff;
        padding: 20px;
        border-radius: 4px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    }
    .chart-container h3 {
        margin-top: 0;
    }
    </style>
    <?php
}

// 在WordPress中加载分析脚本
function enqueue_wp_analytics_script() {
    wp_enqueue_script(
        'wp-analytics',
        get_template_directory_uri() . '/wp-analytics.js',
        array(),
        '1.0.0',
        true
    );
}

add_action('wp_enqueue_scripts', 'enqueue_wp_analytics_script');
  1. 流量统计脚本(wp-analytics.js)功能：
  • 使用localStorage存储访问数据，无需数据库
  • 跟踪页面浏览量、独立访客、会话数
  • 记录访问来源(referrer)和用户设备类型
  • 自动区分新访客和回访访客
  • 提供JavaScript API访问统计数据
  1. 数据显示面板(analytics-display.php)功能：
  • 在WordPress后台添加流量统计菜单
  • 显示核心指标：总浏览量、独立访客等
  • 展示页面浏览量TOP10、流量来源TOP10
  • 可视化设备类型分布
  • 响应式设计，适配不同屏幕

使用方法：

  1. 将wp-analytics.js上传到你的WordPress主题目录
  2. 将analytics-display.php代码添加到主题的functions.php文件
  3. 访问WordPress后台，左侧菜单会新增”流量统计”选项

这个方案完全基于前端技术实现，不依赖服务器配置或数据库，适合WordPress初学者使用。数据存储在访问者的浏览器中，管理员可以在后台查看汇总统计。

优点

隐私友好‌

所有数据存储在用户浏览器本地(localStorage)，不收集个人身份信息，符合GDPR等数据保护法规要求
相比Google Analytics等第三方服务，避免了用户数据被商业公司收集的风险

轻量高效‌

纯前端实现无需数据库查询，脚本体积小于1KB，对网站性能影响极小
原生JavaScript实现，兼容所有现代浏览器且无需依赖第三方库

数据自主可控‌

所有统计数据存储在网站本地，避免依赖外部服务可能带来的数据中断风险
管理员可直接通过WordPress后台查看数据，无需登录第三方平台

开发成本低‌

无需购买付费插件或服务，适合预算有限的个人网站
代码结构清晰易于修改，可根据需要扩展跟踪维度
缺点

数据持久性有限‌

依赖浏览器localStorage，用户清除缓存后历史数据会丢失
无法实现跨设备/跨浏览器的用户行为追踪

功能相对基础‌

缺少高级分析功能如用户行为路径、转化漏斗等专业分析维度
实时数据处理能力有限，不适合高流量商业网站

数据可视化简单‌

后台仪表盘仅提供基础表格展示，缺乏专业的数据图表
需要额外开发才能实现数据导出或定期报告功能

维护成本存在‌

需手动处理代码更新，存在与WordPress核心版本兼容性问题
缺少专业插件的自动更新和维护保障机制

建议中小型内容网站优先采用此方案，而电商等高价值转化场景建议配合专业分析工具使用。如需增强功能，可参考Koko Analytics插件的设计思路进行扩展。