# WordPress文章发布热力图插件 – 以GitHub风格可视化内容活跃度

- 连结：https://blog.guohao.asia/wordpress%e6%96%87%e7%ab%a0%e5%8f%91%e5%b8%83%e7%83%ad%e5%8a%9b%e5%9b%be%e6%8f%92%e4%bb%b6-%e4%bb%a5github%e9%a3%8e%e6%a0%bc%e5%8f%af%e8%a7%86%e5%8c%96%e5%86%85%e5%ae%b9%e6%b4%bb%e8%b7%83%e5%ba%a6.html
- 发布时间：2025-04-09T10:42:36+08:00
- 作者：null

来自 AI 助手的总结

WordPress 插件提供 GitHub 风格的文章活动热力图，支持自动数据统计和深度定制。

中文   英文   韩语   日语

![WordPress 文章发布热力图插件 - 以 GitHub 风格可视化内容活跃度](https://blog.guohao.
asia/wp-content/themes/wordpress-theme-puock-2.8.16/assets/img/z/load.svg "WordPress
文章发布热力图插件 - 以 GitHub 风格可视化内容活跃度")

![WordPress 文章发布热力图插件 - 以 GitHub 风格可视化内容活跃度](https://blog.guohao.
asia/wp-content/themes/wordpress-theme-puock-2.8.16/assets/img/z/load.svg "WordPress
文章发布热力图插件 - 以 GitHub 风格可视化内容活跃度")

 

![WordPress 文章发布热力图插件 - 以 GitHub 风格可视化内容活跃度](https://blog.guohao.
asia/wp-content/themes/wordpress-theme-puock-2.8.16/assets/img/z/load.svg "WordPress
文章发布热力图插件 - 以 GitHub 风格可视化内容活跃度")

## 核心功能亮点 ✨

 * **GitHub 同款视觉体验** – 完美复刻全球开发者熟悉的贡献图样式
 * **智能数据可视化** – 通过色彩层级直观呈现全年发文频率分布
 * **零配置快速部署** – 安装即用，自动抓取全站文章数据
 * **响应式设计** – 完美适配桌面 / 移动端浏览
 * **无依赖原生实现** – 纯 PHP+CSS3 开发，不依赖第三方库
 * **深度定制能力** – 支持颜色方案 / 时间范围 / 交互效果自定义

## 功能特性 🚀

 1. **简约交互设计**
 2.  * 智能隐藏日期坐标（保留悬停提示）
     * 自适应周数排列算法
     * Hover 动态显示精确日期与发文量
 3. **高效数据聚合**
 4. **可视化配置项** 配置维度说明默认值色彩梯度 4 级色彩过渡 GitHub 同款绿统计时间范围
    最近 1 年动态范围自动计算容器尺寸响应式百分比宽度 100%

## 快速上手指南 🛠️

### 安装部署

 1. 从 [GitHub 仓库](https://blog.guohao.asia/wp-content/themes/wordpress-theme-puock-2.8.16/inc/go.php?to=aHR0cHM6Ly9naXRodWIuY29tL2l0Zmt5YmIvcG9zdC1hY3Rpdml0eS1oZWF0bWFw)
    下载最新版本
 2. 在 WordPress 后台：`插件 → 安装插件 → 上传 ZIP`
 3. 激活后自动开始数据统计

### 调用方式

**在文章 / 页面中：**

    ```language-default
    [post_heatmap]
    ```

**在主题模板中：**

    ```language-default
     <?php echo do_shortcode('[post_heatmap]'); ?>
    ```

### 视觉定制

修改`assets/css/heatmap.css`：

    ```language-default
    /* 四级颜色梯度配置 */
       .pah-heatmap-day[data-level="1"] {background: #9be9a8;}
       .pah-heatmap-day[data-level="2"] {background: #40c463;}
       .pah-heatmap-day[data-level="3"] {background: #30a14e;}
       .pah-heatmap-day[data-level="4"] {background: #216e39;}
    ```

## 开发者支持 🤝

欢迎通过以下方式参与项目：

 * 提交 Issue 报告问题
 * Fork 仓库提交 PR
 * Star⭐支持项目发展

![WordPress 文章发布热力图插件 - 以 GitHub 风格可视化内容活跃度](https://blog.guohao.
asia/wp-content/themes/wordpress-theme-puock-2.8.16/assets/img/z/load.svg "WordPress
文章发布热力图插件 - 以 GitHub 风格可视化内容活跃度")

 

---

 * **技术架构**：PHP7.4+ | WordPress REST API | CSS Grid 布局
 * **数据安全**：全站数据本地处理，无需外联请求
 * **性能影响**：数据库查询优化，首次加载后缓存 30 天

_提示：热力图数据每日凌晨自动更新，如需立即刷新可清空站点缓存_