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 或者在该文章下评论。

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

6 Comments

obaby 2024-01-21 Reply

这个不错,终于找到现成的了

Aria 2024-01-18 Reply

从豆豉老师博客那儿爬过来www 友友好厉害!我也把热力图加到自己wp站里啦 > < 超级超级感谢!! :!: :oops: :wink:

Bamboobone 2024-01-16 Reply

太感谢了!!已经在首页用上了,点击小方块还会跳转对应文章,好贴心哦 :wink:

发表回复

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据