给博客文章添加预计阅读时间的两种方法

post-read-time

昨天看到一个博友的博客文章开始的地方有一行“本文预计阅读时间”,遂研究了下,有以下两种方法可以实现这一功能:

1、PHP 方法

在主题的 functions.php 文件里加入以下代码,文章内容页内容开始的地方就会自动显示“预计阅读时间 x 分钟”:

function lmsim_read_time($content){
        $text = trim(strip_tags( get_the_content()));
        $text_num = mb_strlen($text, 'UTF-8');
        $read_time = ceil($text_num/400);
        $content = '<div class="read-time">预计阅读时间 <span>' . $read_time . '</span> 分钟</div>' . $content;
        return $content;
}
add_filter ( 'the_content', 'lmsim_read_time');

以上代码中第 4 行的数值 400,是根据百度出来的“一般人的阅读速度平均为(300~500)字/分钟”取中间值,如果你觉得 400 太慢可以自行修改,需要自定义样式的可以对 .read-time 在 css 里自定义样式。

2、jQuery 来实现

在 js 文件里插入以下代码:

var text = $('.entry-content').text().length;
var text_num = read_time/400;
var read_time = Math.round(read_time);
if(read_time>1){
        $('#read-time').text('预计阅读时间'+read_time+'分钟');
}else{
        $('#read-time').text('预计阅读时间 1 分钟');
}

然后在内容页相应的地方插入一个 div <div id="read-time"></div>,就可以自动显示大概的阅读时间了,这个 js 是根据默认主题测试的,所以按照实际情况,代码第一行的 .entry-content 须根据主题正文内容外的 div 实际的 class 来修改。

讲完了,还得去抓个图,忘了。

作者: LMS

天行贱,君子自强自息。

标签

《给博客文章添加预计阅读时间的两种方法》有18个想法

    1. @麦葱 哈哈哈哈,这个不错,不过就怕有的人没滚到位置就关闭页面了。
      倒是可以加个载入进度条,然后计算载入速度,最后来个:你打开本页面的速度打败了 99% 的人。

发表评论

电子邮件地址不会被公开。 必填项已用*标注