为WordPress文章添加阅读时间与字数统计(免插件) 优化用户体验

其实很多国外的主题都有开启“Reading Time”的选项,还有一些添加文章阅读时间的插件,但因为中文和英文字符长度的计算不同,所以使用国外的主题或一些插件会造成计算不准确的情况。本文介绍的方式,可以不使用任何插件实现这个功能。

具体方法如下:

在functions.php中创建函数

打开编辑主题的functions.php文件,在最后部分插入以下代码:

/**
为Wordpress添加文章阅读所需时间提示,单位:分钟
文章出自站长帮,原文链接:https://www.zhanzhangb.com/2020-482.html
以下代码插入到主题的functions.php文件最下方?>之前,没有?>就插入到最底部
*/
function zzb_reading_time() {
    $post = get_post();
    $content = $post->post_content;
    $wpm = 300; // 每分钟阅读字数设定,可根据需求修改
    $clean_content = strip_shortcodes( $content );
    $clean_content = strip_tags( $clean_content );
    $word_count = mb_strlen( $clean_content,'UTF8'); //按UTF8编码统计字数,一个汉字只算1个字
    $time = ceil( $word_count / $wpm );
    return '<span id="read-count">字数' .$word_count . '个</span> <span id="read-time"> 阅读全文: ' .$time . ' 分钟</span>';
}

注意:mb_string不是PHP默认函数,如果报错,请开启 mb_string 扩展,大多数虚拟主机或服务器环境的一键安装包都支持 mb_string,可在php info中查看是否支持。

在合适位置输出函数

将以下代码插入到需要显示的位置,可以是文章页面模板 (single.php)或者LOOP循环中。

<?php echo zzb_reading_time(); ?>

显示结果

字数:866 个 阅读全文:3 分钟

如果不需要显示字数,只显示阅读时间,可将函数代码的第14行改为:

    return '<span id="read-time"> 阅读全文: ' .$time . ' 分钟</span>';

自定义CSS样式

在主题样式文件中 或 WordPress自定义主题面板的额外CSS中,添加以下代码(示例):

/* 统计字数样式 */
#read-count {font-size:14px;color:#707070}
/* 阅读时间样式 */
#read-count {font-size:14px;color:#878787}

  • 微信或QQ扫一扫

留下评论