WP Post Heatmap 给 WordPress 博客添加热力图

简介

逛推的时候偶然看到椒盐豆豉的《如何给 Hugo 博客添加热力图》，正好有人需要 WordPress 版本，又正好我还从来没有做过一个 WordPress 插件，又恰好想「多多创造一些自己感兴趣的东西」，就想着试试手。没想到 WordPress 插件做起来出乎意料地简单，整个开发和适配过程大概花了 2 小时 30 分钟（来自 WakaTime 的统计数据）。技术上的细节，在椒盐豆豉的文章里已经非常详细了，想了解的朋友们可以直接去她的文章中看，或者直接查看源代码。

在 Hugo 版本的基础上，WP Post Heatmap 使用 PHP 函数读取文章的日期，字数，标题，和链接；然后将其传给 JavaScript 文件渲染 echarts. 整个开发过程没有遇到太多困难，但的确遇到了字数统计不准确的问题：WordPress 默认的字数统计无法统计中文字符，所以我用了个迂回的方式来解决：

$word_count = mb_strlen(strip_tags(strip_shortcodes($post->post_content)), 'UTF8');

在 JavaScript 里，文章的字数单位是千字，保留两位小数：

const wordCount = (post.word_count / 1000).toFixed(2);// Word count of the post

安装和使用

当前版本：v0.01

项目地址：https://github.com/ann61c/wp-post-heatmap

下载地址：https://github.com/ann61c/wp-post-heatmap/releases/download/v0.01/wp-post-heatmap.zip

安装方式：下载后在 WordPress 后台上传插件并启用

使用方法：在文章或者页面中，输入[_heatmap_]即可（请自行去掉下划线）。

在线演示：

如果你想要添加新功能可以在 GitHub repo 里添加 issue 或者在该文章下评论。

特别感谢 椒盐豆豉 分享的源代码。