[收起] 文章目录

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

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 id="read-time",就可以自动显示大概的阅读时间了,这个 js 是根据默认主题测试的,所以按照实际情况,代码第一行的 .entry-content 须根据主题正文内容外的 div 实际的 class 来修改。