WordPress教程：如何给博客添加热力图
内容提要
本文介绍了给WordPress博客添加热力图的方法，包括复制插件源码到统计页面代码中，以及添加年份切换功能。提供了具体的代码实现和使用方法。
延伸解读
从插件到页面代码：轻量集成的取舍
作者没有直接安装雪糕的 WordPress 插件，而是把插件源码中的主要部分复制到自己的统计页面代码里。这样做的好处是不增加插件依赖，页面加载时直接运行热力图逻辑；代价是后续维护需要自己跟进代码更新，且功能扩展（如年份切换）也得手动实现。对于喜欢折腾、希望减少插件数量的博客主，这种集成方式更灵活，但需要一定的代码阅读和调试能力。
年份切换：借鉴 GitHub 的交互思路
文章在复制代码后发现默认显示全部年份的日期，不够直观，于是借鉴 GitHub 个人主页提交热力图的做法，增加了年份选择框。通过 select 元素切换年份，并利用 ECharts 的 calendar.range 动态调整显示范围，让热力图一次只展示一整年的数据。这种交互降低了信息密度，更适合快速浏览某一年份的写作节奏，但需要额外编写 JavaScript 和 PHP 代码来生成年份选项。
数据聚合与点击跳转的实现细节
代码通过 WordPress 的 get_posts 获取全部文章，提取发布时间、字数、标题和链接，并在前端用 Map 按日期聚合。同一天有多篇文章时，字数会累加，再除以 1000 转换为千字单位显示。热力图的 tooltip 会列出当天所有文章，点击方格则打开该日期第一篇文章的链接。这种处理方式适合按日统计写作量，但同一天多篇文章的点击跳转只指向第一篇，读者需注意这一限制。
Q&A
WordPress博客怎么添加文章热力图？
可以通过将热力图代码直接添加到统计页面来实现，无需安装插件。主要步骤包括：引入ECharts库，使用PHP获取所有文章的发布时间、字数、标题和链接，然后用JavaScript生成热力图数据并渲染。
热力图如何实现年份切换功能？
通过添加一个年份选择下拉框，并使用JavaScript监听其变化事件。当用户选择年份时，更新ECharts日历的range为所选年份的起止日期，然后重新设置图表选项即可。
热力图的数据是怎么获取的？
使用WordPress的get_posts函数获取所有文章，然后遍历每篇文章，通过get_the_date、mb_strlen、get_the_title和get_permalink分别获取发布日期、字数、标题和链接，最后将数据以JSON格式传递给JavaScript。
热力图中点击方格能打开文章吗？
可以。通过监听ECharts的click事件，当点击系列数据时，从数据映射中获取对应文章的链接，并使用window.open在新标签页打开该链接。
热力图使用什么库来绘制？
使用ECharts库来绘制热力图，通过CDN引入echarts.min.js文件，然后配置日历坐标系和热力图系列来展示数据。
同一天有多篇文章时热力图怎么处理？
代码中将同一天的多篇文章的字数相加，然后除以1000并保留一位小数，作为该天的热力值。在提示框中会列出当天所有文章及其字数。
