WordPress是如何添加文章预计阅读时间

avatar 2019年1月17日22:24:15 评论 3,228

前言

有朋友问本站文章中的预计阅读时间怎么弄的,其实很简单,话不多少,直接上代码。

正文

方法一

将下面代码放到functions.php中即可

//预计阅读时间
function lmsim_read_time($content){
 $text = trim(strip_tags( get_the_content()));
 $text_num = mb_strlen($text, 'UTF8');
 $read_time = ceil($text_num/400);
$content = '<div class="read-time" style="color:#F86B06"><center>本文预计阅读时间 <span>' . $read_time . '</span> 分钟</center></div>' . $content;
return $content; }
add_filter ( 'the_content', 'lmsim_read_time');

由于时间太长,少羽只记得上面的“400”可能是人每分钟大约可以阅读的字数,如果觉得不合适,可自行修改。

方法二

1、将以下代码加到主题的 functions.php 文件最后一个 ?> 的前面。

//字数统计
function count_words ($text) {
global $post;
if ( '' == $text ) {
   $text = $post->post_content;
   if (mb_strlen($output, 'UTF-8') < mb_strlen($text, 'UTF-8')) $output .= '本文共' . mb_strlen(preg_replace('/\s/','',html_entity_decode(strip_tags($post->post_content))),'UTF-8') . '个字';
   return $output;
}
}

2、再把调用统计代码加到自己认为适合的位置,如 single.php 文件的某个位置。

<?php echo count_words ($text); ?>

方法三(优化后)

1、将以下代码加到主题的 functions.php 文件最后一个 ?> 的前面。

//字数和预计阅读时间统计
function count_words_read_time () {
global $post;
   $text_num = mb_strlen(preg_replace('/\s/','',html_entity_decode(strip_tags($post->post_content))),'UTF-8');
   $read_time = ceil($text_num/400);
   $output .= '本文共' . $text_num . '个字,预计阅读时间需要' . $read_time  . '分钟。';
   return $output;
}

其中,以上的 400 为阅读速度,可以更改。如只需要输出阅读时间或文章字数,只需要修改删除第 6 行某些代码即可,具体请自行 DIY 吧。

2、再把调用统计代码添加到 single.php 文件适合的位置即可。

<?php echo count_words_read_time(); ?>

预计阅读时间代码优化前后对比

经过 boke112 测试,当字数小于等于 400,也就是阅读时间小于等于 1 分钟时,本文两段统计的预计阅读时间都一样,都是 1 分钟。但是如果超过 400 时,就会有所偏差。比如把上文中的 290 个字符再粘贴 3 次达到 1160 个字符,那么第二点的预计阅读时间将为 4 分钟,而第三点优化后的代码则为 3 分钟。所以从数字上来看,优化后的代码统计的预计阅读时间更为精准。具体如下图所示:

拓展阅读(ceil() 函数)

ceil() 函数向上舍入为最接近的整数。意思就是说返回不小于 x 的下一个整数,x 如果有小数部分则进一位。ceil() 返回的类型仍然是 float,因为 float 值的范围通常比 integer 要大。

例子

  • ceil(0.60),输出 1;
  • ceil(0.4) ,输出 1;
  • ceil(5),输出 5;
  • ceil(5.1),输出 6;
  • ceil (-5.1),输出 -5;
  • ceil(-5.9),输出 -5;
  • 我的微信
  • 这是我的微信扫一扫
  • weinxin
  • 我的微信公众号
  • 我的微信公众号扫一扫
  • weinxin
avatar

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: