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

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

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

具体方法如下:

在functions.php中创建函数

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

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

在合适位置输出函数

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

  1. <?php echo zzb_reading_time(); ?>

显示结果

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

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

  1. return ‘<span id=”read-time”> 阅读全文: ‘ .$time . ‘ 分钟</span>’;

自定义CSS样式

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

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

未经允许不得转载:作者:admin, 转载或复制请以 超链接形式 并注明出处 夜河资源网
原文地址:《为WordPress文章添加阅读时间与字数统计(免插件) 优化用户体验》 发布于2020-03-21

分享到:
赞(0) 打赏

评论 抢沙发

8 + 2 =


撰写不易~如果您觉得文章对您有帮助的话可以打赏我哦~谢谢亲亲~

支付宝扫一扫打赏

微信扫一扫打赏

外服网游加速器破解版
包含腾讯网游加速器、海豚网游加速器等八款知名加速器,可加速外服游戏,永久包售后包更新,不定时添加新款破解版加速器!
切换注册

登录

忘记密码 ?

切换登录

注册