WP Post Heatmap 给 WordPress 博客添加一个类似GITHUB的统计热力图

文章摘要
scbkw
文章最后更新时间:2025-02-21 09:34:33某些文章具有时效性,若有错误或已失效,请在下方 留言或联系 苏晨博客网

简介

逛推的时候偶然看到椒盐豆豉的《如何给 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_]即可(请自行去掉下划线)。

在线演示:

WP Post Heatmap 给 WordPress 博客添加一个类似GITHUB的统计热力图-苏晨博客

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

特别感谢 椒盐豆豉 分享的源代码,同时感谢雪糕的二开代码插件

原创声明

该文章来自雪糕,原作者没有卖钱,你们也不要卖!!!!

© 版权声明
THE END
喜欢就支持一下吧
分享
评论 抢沙发

请登录后发表评论

    暂无评论内容