WordPress

WordPress ブログ記事の読了時間を表示する方法

読了時間: 約453
Code Snippets - ブログ記事読了時間表示スニペット

他の方のブログを見ていると、時々ブログ記事読了時間が表示されているものがありますよね。
この読了時間が表示されていると、「読者の平均滞在時間が長くなるらしい」とどこかの記事で読んだような気がします。

Googleは、たしかブログの滞在時間も評価の対象にしていたと思います。
それなら、効果があるとされているブログ記事の読了時間表示を試してみない手はありませんよね。

というわけで、早速私のブログ(WordPress)でも、ブログ記事の読了時間表示機能を実装してみました。
考え方さえ分かれば、プログラムの実装自体はそれほど難しくは無かったですよ。

ブログ記事の読了時間とは?

ブログ記事の読了時間というのは、あるブログ記事があった時に、その記事を読み終えるのにかかる時間の事を言います。

仮に、毎分800文字で読むことができる人がいるとします。
この時、あるブログ記事の文字数が1,600文字あるとすれば、その人はおよそ2分で読むことができると推測できますよね。

この読了時間の目安をブログ記事の冒頭で表示することで、読者にこれくらいの時間で読むことができるということを知らせます。
すると、「これくらいの時間なら読んでみるか」「時間がかかりそうだから後で読もう」などといった、意思決定をすることができるようになります。
その結果、トータルで見た場合の平均滞在時間が伸びるとのこと。

「本当に?」と思いたくなりますが…。
実際伸びているらしいので試してみる価値は十分ありますね。

ブログ記事の読了時間表示機能の実装

それでは、WordPressにブログ記事の読了時間表示機能を実装してみます。
やり方は色々とありそうですが…。
私は「Code Snippets」というWordPressプラグインに機能を追加するという方法をとってみました。

「Code Snippets」というのは、functions.phpを直接編集せずに、WordPressの機能を追加することができるようにするプラグインです。
スニペット単位で管理できますので非常に扱いやすいですよ。
機能のオンオフもクリック1つ。
追加や編集もすごく簡単。
functions.phpを直接編集していた皆さんは、ぜひ一度この機会に「Code Snippets」をお試しください。

Code Snippetsのインストール

今回の方法では、「Code Snippets」を使いますので、まずはインストールしておいてくださいね。
ダッシュボードから「プラグイン」→「新規追加」で表示される検索ボックスに「Code Snippets」と入力して検索してください。
該当プラグインが表示されたらインストール、有効化することをお忘れなく。

Code Snippetsに読了時間表示用スニペットを追加

「Code Snippets」がインストールできましたか?
インストールできたら、読了時間表示用のスニペットを追加します。

ダッシュボードに「Snippets」というメニューが追加されていますよね?
「Snippets」→「All Snippets」をクリックしてください。
すると、以下のような画面が表示されます。

Code Snippets - All Snippets

「Add New」というボタンをクリックしてください。
すると、新規スニペット追加画面が表示されます。

Code Snippets - ブログ記事読了時間表示スニペット

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');

$wpmというのは、1分間に読むことができる文字数です。
ここでは暫定的に600文字としていますが、好みに応じて変更しても構いません。

処理の流れとしては、まず本文からタグを取り除き、その文字数をカウントします($words)。
そして、その文字数をもとにして読了時間を計算します($min, $sec)。
読了時間が計算できたら、それを表示するためのタグを生成します($tag)。
最後に、元の本文の前に挿入します。

この時、CSSで読了時間表示のカスタマイズができるように、タグにはクラスを設定しています。
全体では「estimated-reading-time」クラス、分の部分には「min」クラス、秒の部分には「sec」クラスを設定しました。

コードを入力したら、コードの実行範囲を「Only run on site front-end」に設定します。
そして、「Description」と「Tags」の部分には、適当に分かりやすい説明文とタグを設定しましょう。
その後、「Save Changes and Activate」をクリックして保存と有効化をします。

以上で、ブログ記事読了時間表示機能は実装完了です。
適当なブログ記事を表示してみると、記事本文の前に読了時間が表示されているはずです。

CSSの設定

このままでは、単純に読了時間が表示されているだけですよね。
せっかくCSSを設定できるようにしてありますので、早速デザインをしてみましょう。

ダッシュボードから、「外観」→「テーマの編集」をクリックしてください。
すると、「style.css」の編集画面が表示されます。
そうしたら、以下のようなCSSを設定してみましょう。

.estimated-reading-time {
	border-top: 2px dashed #aaaaaa;
	border-bottom: 2px dashed #aaaaaa;
	margin: 8px;
	padding: 8px;
	text-align: right;
}

.estimated-reading-time .min {
	font-size: 125%;
	font-weight: bold;
	color: #6d9eed;
}

.estimated-reading-time .sec {
	font-size: 125%;
	font-weight: bold;
	color: #6d9eed;
}

すると、こんな感じの読了時間の表示になります。
このデザインがあまり好きでは無いという方は、各自好きなようにデザインを変更してみてください。

ブログ記事の読了時間表示機能

まとめ

今回の記事では、ブログ記事の読了時間表示機能の実装方法について簡単に解説してみました。
実際にやってみると、それほど難しくは無かったですよね。

ブログ記事の読了時間を表示することで、ブログの平均滞在時間が向上する効果があるらしいですよ。
比較的お手軽に実装ができますので…。
もしこの機能を付けていないという方は、この機会に付けてみてはいかがでしょうか?

書いた人: 鈴木俊吾(すずしん)
フリーランスのライター・ブロガー・プログラマ。

大学卒業後、公務員を目指していたが失敗。
その後、仕事をしようとするも全て不採用に。
そのうち、心を病んで統合失調症を発症。
入退院を繰り返す。

「仕事をもらえないなら自分で作ればいい」「自分の好きな仕事だけをやろう!」と思うようになり、フリーランスに転身。
現在は、ブログの更新やアプリ開発を主な仕事にしている。

趣味は音楽鑑賞・読書・カラオケ・オセロ。
特に好きな歌手は水樹奈々で、ファンクラブにも所属している。
最近ハマっている曲は「恋想花火」。

フィードを登録していただくと、ブログの更新を把握しやすくなります。
あなたからの登録をお待ちしています!

Feedly
RSS

Twitter: @suzushin7

コメントを残す

%d人のブロガーが「いいね」をつけました。