【WordPress】に「記事を読むのにかかる時間」を表示させる方法

前にブログをやっていた時に入れようと思って忘れていた機能に「この記事は○分○秒で読めます」という様な情報があります。

今回「LEO LOG」でブログを再開してこの機能は入れておこうと思ったので入れてみました。

「この記事は○分○秒で読めます」の挿入方法

このブログは無料テーマの「Simplicity」を元にカスタマイズして作っていますが、「この記事は○分○秒で読めます」を入れるのは実に簡単です。

<?php
$mycontent = $post->post_content;
$word = mb_strlen(strip_tags($mycontent));
$m = floor($word / 600)+1;
$s = floor($word % 600 / (600 / 60));
$time = ($m == 0 ? '' : $m) ;
$times = ($s == 0 ? '' : $s) ;
?>
この記事は約<b><font color=#cc0000><?php echo $time; ?></font></b>分<b><font color=#cc0000><?php echo $times; ?></font></b>秒で読めます。

こんな感じの文言を入れたいところに挿入するだけ。

ボクは投稿日、更新日の後ろに入れたかったので「entry-body.php」内の<?php get_template_part(‘datetime’) //投稿日と更新日?>の後にぶち込みました。

log-161019readtime-03

こんな感じで出てきました!非常に簡単です。

細かいカスタマイズ

4行目、5行目の600という部分が1分間に何文字読む前提での時間算出かというもので、日本語だと大体400〜600文字くらい読めるらしいのでここでは600に設定しています。

あとは「この記事は約○分○秒で読めます」とするか、「この記事の所要時間:○分○秒」にするかなどは好みでいじりましょう。

ボクは数字の部分だけ赤色に変えていますがそこまで時間を強調しなくてもいいかとも思います。

まあ、ブログデザインとの調和とか、好みの問題でしょう。

プラグインを使う方法も

テーマをいじるのが怖いという人にはプラグインを使う方法もあります。

「Estimate」というプラグインで簡単にできるそうです。下記の作者ページからゲットしてみて下さい。

記事を読む所要時間を表示させるWordPress用プラグイン「estimated」作ってみました。

プラグイン追加には検索では出てこないので、上記サイトからプラグインをダウンロードして、自分のWordpressにアップロードします。

log-161019readtime-02

プラグインを有効にするだけでこんな感じの記述が登場します。おそらくテーマをいじれば点線を消したりソリッドにするなどカスタマイズも出来ると思います。

気軽に「この記事は約○分○秒で読めます」を入れてみようという方はお試しあれ。

※コード挿入でやった場合とこのプラグインを使った場合で時間が違っているのはプラグインでの設定が500文字/分計算だからだと思います。

シアトル生まれ、大阪育ち。6年前に独立・起業しましたが、コロナ禍で事業が大ダメージを受け、人生の方向転換に悪戦苦闘の日々です!とにかく、「ワクワク」に満ちた毎日を目指してできることから地道に頑張っています〜!


Fatal error: Uncaught ErrorException: md5_file(/home/users/1/leoism88/web/LeoLog/blog/wp-content/litespeed/js/ffdc68aaea2cbdc8c60ba8faa744d961.js.tmp): failed to open stream: No such file or directory in /home/users/1/leoism88/web/LeoLog/blog/wp-content/plugins/litespeed-cache/src/optimizer.cls.php:130 Stack trace: #0 [internal function]: litespeed_exception_handler(2, 'md5_file(/home/...', '/home/users/1/l...', 130, Array) #1 /home/users/1/leoism88/web/LeoLog/blog/wp-content/plugins/litespeed-cache/src/optimizer.cls.php(130): md5_file('/home/users/1/l...') #2 /home/users/1/leoism88/web/LeoLog/blog/wp-content/plugins/litespeed-cache/src/optimize.cls.php(837): LiteSpeed\Optimizer->serve('https://blog.le...', 'js', true, Array) #3 /home/users/1/leoism88/web/LeoLog/blog/wp-content/plugins/litespeed-cache/src/optimize.cls.php(382): LiteSpeed\Optimize->_build_hash_url(Array, 'js') #4 /home/users/1/leoism88/web/LeoLog/blog/wp-content/plugins/litespeed-cache/src/optimize.cls.php(264): LiteSpeed\Optimize->_optimize() #5 /home/use in /home/users/1/leoism88/web/LeoLog/blog/wp-content/plugins/litespeed-cache/src/optimizer.cls.php on line 130