記事を読むのにかかる時間を表示する、おすすめのプラグイン

記事を読むのにかかる時間を表示するメリット

よく記事の冒頭に、「この記事を読むのにかかる時間は約○○分です」といった感じの表示があるのを見たことがあると思います。

記事を読むのにかかる時間があらかじめ分かると、読者としてはずいぶんと助かります。

なぜかと言うと、たとえば紙の本を考えてみて下さい。

本のメリットは、その「厚み」にあります。厚みから、あとどれくらいで読み終わるかな、というのが概ね想像できる。

この「終わりが想像できる」というのはとても大事なポイントです。

これが隙間時間に読む本なのか、勉強の時間にがっつり読む本なのか、はたまた寝る前にさらっと読めるものか、といったことが、その「厚み」から判別できます。

また読んでいる最中でも、中盤は流して読もうとか、そろそろ結論だなと気合を入れて読むなど緩急をつけることができます。

しかし、残念ながら、記事は、読むのにかかる時間がわかりづらい、という難点がありました。

読者が、記事を読むのにどれくらいかかるか、ということは、右側のスクロール表示や目次を見る以外になかったのです。

そこで、文字数から読了時間を表示する設定をすることで、もう一つ読者に本で言う「厚み」を提供することができます。

読者がブログの記事で読む時間を推測する方法

右側のスクロール表示
目次
読むのにかかる時間の表示

ただし、デメリットもあり、時間が長くかかりすぎる（文章量が多すぎる）記事については、「読了までの所要時間２０分」などと言われると逆に引いてしまうかもしれません。

その場合は、表示はせずに、逆にすうっと読み始めてもらって、気づいたら２０分経っていたけど気にならずに読み終わっていた、というほうがいいでしょう。

読むのに時間がかかっても短く感じる「読ませる文章」もあるので、この辺りのさじ加減は難しいですね。

ただ、３分、４分くらい（１０００〜１５００字程度）なら、表示されていたほうが気軽な気持ちで読み始めてくれる効果があると思います。

おすすめプラグイン「Code Snippets」

それでは、この記事を読むのにかかる時間を表示してくるおすすめのプラグインの設定方法を紹介したいと思います。

読了時間を表示するプラグインとして僕が使ったのは、「estimated」「Insert Estimated Reading Time」「Code Snippets」の三つです。

その三つを比較して、個人的におすすめのプラグインは、「Code Snippets」です。

基本的な機能はそれほど変わらないのですが、デザインのカスタマイズも含めて、いちばん気に入ったのが「Code Snippets」でした。

この「Code Snippets」のインストールの手順と設定方法について解説したいと思います（参考 : WordPress ブログ記事の読了時間を表示する方法）。

「Code Snippets」インストールの手順

ダッシュボード左＞＞プラグイン＞＞新規追加＞＞プラグインの検索に「Code Snippets」を入力＞＞インストール＞＞有効化

有効化が済んだら、設定方法に入ります。

またダッシュボード左から、今度はプラグインのすぐ下あたりに「Snippets」という項目が出ていると思うので、そこにカーソルを合わせ、「Add New」を選択しましょう。

すると、次のような画面が表示されます。

このCodeの部分に、以下のコードをコピーして入力します。

function show_estimated_reading_time($content) {
  $wpm = 600;
  $words = mb_strlen(strip_tags($content));
  $min = floor($words / $wpm);
  $sec = floor(($words % $wpm) / ($wpm / 60));
  $tag = '<div class="estimated-reading-time">読了時間: 約<span class="min">'.$min.'</span>
分<span class="sec">'.$sec.'</span>秒</div>';
  return $tag . $content;
}
add_filter('the_content', 'show_estimated_reading_time');

このコードの600の部分は、一分間で読める文字数です。

このままで問題ないと思いますが、お好みに合わせて変更してみて下さい。

コードを入力したら、下の設定を「Only run on site front-end」に変更し、「Save Changes and Activate」をクリックして変更と有効化をしましょう。

これで記事の冒頭に表示されるようになります。