WordPress ブログ記事の読了時間の目安を表示させる方法

スポンサーリンク
読了時間: 約328

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

他の方のブログ記事を読んでいると…。
時々、ブログ記事の読了時間の目安が表示されていることがあります。

ブログ記事に読了時間が表示されていることで…。
読者側からすれば、どれくらいの時間があればブログ記事を読みきれるかの目安が分かります。
すなわち、ユーザービリティの向上につながりますよね!

というわけで…。
早速、私もPHPを使って、ブログ記事の読了時間の目安を表示させるカスタマイズをしてみました。
ちなみに、ブログ環境はWordPressです。
それほど難しいということはなく、案外シンプルにプログラムを組むことができましたよ。

せっかく作成した機能ですので、どうせなら他の方にも使ってもらいたい!
そこで、今回は「ブログ記事読了時間表示機能」を実装するための方法について解説します。
基本的には、コピペで大丈夫です。
すぐに導入ができますので、ぜひあなたも試してみてくださいね。

スポンサーリンク

ブログ記事読了時間の目安を表示することのメリット

あるブログ記事を読もうとした際に、その記事の読了時間の目安が表示されていると…。
読者としては、大体これくらいの時間があれば読むことができるという基準ができますよね。
すると、「今のうちに読んでしまおう」と思って記事を読んでくれる、または「後でじっくり読もう」と思ってブックマークしてくれたりする、かもしれません。

また、読了時間の目安が表示されていると、ウェブページの滞在時間が伸びるというデータがあるようです。
ウェブページの滞在時間が長くなるほど、Googleとしては良いコンテンツだと判断します。
そのため、検索順位の上昇に貢献してくれる可能性があります。

私としては、どちらかと言うと、読了時間の目安はあったほうが便利だと思っています。
実際、時間がある時と無い時では、読む記事の長さは結構変わりますので。
記事を読む前から、読了時間の目安が分かっているというのは、読者側からすればメリットなのではないでしょうか?

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

それでは、早速ブログ記事読了時間表示機能の実装に移りたいと思います。
ここでは、以下のステップに従って作業をしていきます。

  1. 「Code Snippet」のインストール
  2. 「ブログ記事読了時間表示機能」のコードを登録
  3. デザイン(CSS)の設定

通常、WordPressで機能拡張をする際には「functions.php」をいじることが多くなるのですが…。
直接このファイルを編集すると、機能の管理が面倒だったりします。
そこで、ここでは「Code Snippets」というプラグインで、拡張機能を管理することにします。

Code Snippetsのインストール

まず、最初のステップとして、「Code Snippets」というWordPressプラグインを導入しましょう。
導入方法は、普段プラグインをインストールする手順と同じです。
ダッシュボードの「プラグイン」→「新規追加」と進んでいき、プラグインの検索ボックスで「Code Snippets」と入力して検索します。
おそらく、一番左上に表示されると思いますので、それをインストール・有効化します。

Code Snippets

「ブログ記事読了時間表示機能」のコードを登録

次のステップとしては、Code Snippetsに「ブログ記事読了時間表示機能」のコードを登録する作業を行います。

ダッシュボードから「Snippets」→「Add New」をクリックします。
すると、「Add New Snippet」という画面が表示されます。

この画面上の「Enter title here」と書かれている部分に、拡張機能名を入力します。
分かりやすい名前なら何でも構いませんが、ここでは「ブログ記事の読了時間を表示」としておきましょう。

そして、「Code」の下のテキストエリアに以下のコードをコピペします。

function show_estimated_reading_time($content) {
  $cpm = 1000;
  $words = mb_strlen(strip_tags($content));
  $min = floor($words / $cpm);
  $sec = floor(($words % $cpm) / ($cpm / 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');

$cpmの値は、1分間に読むことができる文字数を表しています。
ここでは暫定的に1,000文字にしていますが、適宜変更してもらって構いません。

このプログラムの処理の流れを簡単に説明すると…。
まず、記事のコンテンツからタグを取り除いたものの文字数をカウントします。
その文字数から、読了時間を計算で求めます。
後は、その読了時間を表示するためのタグを生成して、記事の本文前に挿入しています。
やっていること自体は非常に単純ですよね。

Codeの下にある実行範囲の設定は、「Only run on site frond-end」を選択します。
これは、サイトのフロントエンドのみで実行するという意味になります。

Descriptionには、この拡張機能の説明を記述します。
ここでは省きますが、適宜分かりやすく説明文を書いておいても良いでしょう。

Tagsは、拡張機能にタグを付けておける機能です。
ここでは、「記事」「読了時間」としてみました。
好みに合わせて、適宜設定してみてください。

ここまでの設定が終わったら、一番下にある「Save changes and Activate」をクリックします。
これで、読了時間表示機能は有効化されます。

実際に、適当なブログ記事を表示させてみてください。
「読了時間: 約○分○秒」という形で、記事本文前に表示されていれば大丈夫です。

デザイン(CSS)の設定

上記までで、一応必要な機能は実装できました。
ただ、そのままだと単純に文字が表示されているだけですので、ちょっと味気ないですよね。
そこで、読了時間のデザインをCSSで変更してみましょう。

ダッシュボードから「外観」→「カスタマイズ」と進んでください。
すると、テーマの外観をカスタマイズする設定画面が表示されます。
そのメニューの中の「追加 CSS」を選択してください。
そして、以下のCSSコードを追記して保存します。

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

.estimated-reading-time .min, .estimated-reading-time .sec {
  font-size: 125%;
  font-weight: bold;
  color: #f46555;
}

以上の設定をした後に、読了時間の表示を確認してみると…。
上下ダッシュのボーダー付き、かつ数字が赤文字で表示されるようになったのが分かると思います。

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

まとめ

今回の記事では、ブログ記事の読了時間を表示する機能の実装方法について解説してみました。
いかがでしょうか?
意外と簡単に実装できましたよね。

ブログ記事の読了時間を表示することは、ユーザービリティの向上につながると思いますので…。
もしあなたがWordPressでブログを運営しているのなら、この機会に機能を実装してみてはいかがでしょうか?

コメント