前言
作为一个喜欢折腾网站的人，我一直使用 [Umami](https://umami.is/) 来进行网站访问统计。Umami 是一款开源、轻量、注重隐私的网站分析工具，相比 Google Analytics 更加简洁，也不会侵犯用户隐私。
但有个问题一直困扰着我：如何在 WordPress 网站上方便地展示 Umami 的统计数据？
之前我尝试过手动写代码调用 API，也试过在主题里硬编码，但总觉得不够优雅。每次换主题或者更新网站，都要重新折腾一遍。
于是，我决定自己写一个 WordPress 插件——**Umami Stats**。
什么是 Umami Stats？
Umami Stats 是一个专为 WordPress 设计的插件，它可以：
- ✅ 在 WordPress 后台配置 Umami API
- ✅ 实时查看网站统计数据
- ✅ 一键生成嵌入代码，在小工具或页脚显示统计
- ✅ 提供 REST API 端点供其他应用调用
- ✅ 支持样式自定义和实时预览
功能亮点
1. 完善的后台设置
插件提供了直观的中文后台界面：
- Umami 实例地址配置
- 网站 ID 和 API Token 设置
- 时区选择
- 缓存时间调整
- 一键测试连接
配置过程非常简单，只需要填写几个从 Umami 后台获取的信息即可。
2. 数据仪表盘
安装插件后，WordPress 后台会出现「Umami Stats」菜单，点击就能看到：
- 今日访客数
- 今日访问量
- 本月浏览量
- 总浏览量
数据支持一键刷新，默认缓存 5 分钟，减少对 Umami 服务器的请求压力。
3. 嵌入代码生成器
这是我花时间最多打磨的功能。
很多统计插件生成的嵌入代码都是固定的，想改个颜色都要自己折腾 CSS。
Umami Stats 不同：
- 代码区域可以直接编辑
- 修改样式后实时预览效果
- 满意后一键复制
- 粘贴到小工具或页脚即可使用
你可以自定义：
- 字体大小
- 文字颜色
- 数字颜色
- 间距布局
所有的修改都能实时看到效果，所见即所得。
<div class="umami-stats-footer">
<span>今日访客：<b id="umami-tv">-</b></span>
<span>今日访问：<b id="umami-ts">-</b></span>
<span>本月访问：<b id="umami-mv">-</b></span>
<span>总访问：<b id="umami-av">-</b></span>
</div>
<script>
fetch("/wp-json/umami/v1/stats")
.then(r => r.json())
.then(d => {
document.getElementById("umami-tv").textContent = d.todayVisitors;
document.getElementById("umami-ts").textContent = d.todayVisits;
document.getElementById("umami-mv").textContent = d.monthVisits;
document.getElementById("umami-av").textContent = d.totalVisits;
});
</script>
<style>
.umami-stats-footer { font-size: 13px; color: #8b949e; }
.umami-stats-footer span { margin-right: 12px; }
.umami-stats-footer b { color: #7CFC00; font-weight: 600; }
</style>
4. REST API 支持
如果你需要在其他地方使用统计数据，插件提供了 API 端点：
GET /wp-json/umami/v1/stats
返回的数据格式：
json
{
"todayVisitors": 13,
"todayVisits": 15,
"monthVisits": 52,
"totalVisits": 52,
"updatedAt": 1736606400
}
无需认证，公开访问，方便集成到各种应用中。
安装方法
方法一：上传安装
1. 下载插件压缩包
2. WordPress 后台 → 插件 → 安装插件 → 上传
3. 启用插件
方法二：手动安装
1. 解压到 `wp-content/plugins/umami-stats/` 目录
2. 在插件页面启用
配置步骤
获取 Umami API 信息
**网站 ID**：
在 Umami 后台打开你的网站，URL 中的最后一部分就是网站 ID。
比如 `https://umami.example.com/websites/abc123`，`abc123` 就是网站 ID。
**API Token**：
1. 打开 Umami 后台
2. 按 F12 打开开发者工具
3. 切换到 Network 标签
4. 刷新页面，找到任意 API 请求
5. 查看 Headers → Request Headers → Authorization
6. `Bearer` 后面的内容就是 Token
在 WordPress 中配置
1. 进入「Umami Stats → 设置」
2. 填写实例地址、网站 ID、Token
3. 选择时区
4. 保存设置
5. 点击「测试连接」验证
开源地址
插件已在 GitHub 开源，欢迎 Star⭐
**GitHub**: https://github.com/watlam/umami-stats
开源协议：GPL v2+
写在最后
这个插件解决的问题很小，就是在 WordPress 上方便地展示 Umami 数据。但对我来说，这是学习和实践的过程。
如果你也在用 Umami，不妨试试这个插件。如果有问题或建议，欢迎在 GitHub 提 Issue。
---
**相关链接：**
- [Umami 官网](https://umami.is/)
- [插件 GitHub 仓库](https://github.com/watlam/umami-stats)
