ブログ記事の冒頭に「この記事は◯分で読めます。」と表示されていることがありますよね。記事の読了時間を表示しておくことで、ユーザーは読む前に所要時間や記事のボリュームを把握できます。

というわけで今回は、ブログ記事の読了時間を表示できるプラグインをご紹介いたします。以前当メディアでご紹介していた「Insert Estimated Reading Time」は、長らく更新が止まっていますので、代替品となる「Reading Time WP」についてになります。

「Reading Time WP」の機能概要

「Reading Time WP」は、有効化するだけで、記事の冒頭に読了時間を表示できるプラグインです。オプションとして下記の機能がついています。

  • 読了時間のテキスト変更（「この記事は◯分で読めます。」など）
  • 表示する単位の変更（minutes/分など）
  • 時間あたりに読める単語数の設定
  • 読了時間の表示箇所の変更
  • 投稿タイプごとの表示/非表示
  • ショートコードで任意の箇所に設置

プラグインのインストール

管理画面から「Reading Time WP」を検索してインストールするか、下の公式ページからもダウンロード可能です。プラグインファイルを wp-content/pluginsディレクトリにアップした後、管理画面から有効化してください。

reading-time-wp

Reading Time WP

プラグインのインストールにつきましてはこちらで詳しく解説しています。

2010.10.10

2021.04.06

WordPressのプラグインをインストールしてみよう

2021/2/16 情報を更新いたしました。 WordPressで制作したサイトは、プラグインを使って簡単に機能を拡張することができますよね。当記事では、プラグインのインストール方法について解説してきます。 おすすめプラグインを見る プラグインのインストール方法は2つ プラグインのインス...

「Reading Time WP」の使い方

基本的には有効化するだけで読了時間を表示できますが、日本語のサイトなら、文言や単位を日本語に変えておくといいでしょう。また、初期設定では、すべてのページに読了時間が表示されてしまうので、そこも設定しておくのがオススメです。

初期設定のまま使う

初期設定のままでも使えますが、日本語のサイトで使うには、実用的ではありません。

デフォルトの読了時間

有効化しただけだと、↑のように表示されます。伝わるとしても、どうせなら日本語で表示したいですよね。

また、初期設定では1分あたり300単語という設定を元に読了時間が計算されて表示されます。英語圏のプラグインなので単語数で計算されていますが、文字数で計算される日本語だと600文字/分あたりが平均だそうです。1500文字の記事で検証したところ、「2分」と表示されたので、概ね変更は必要なさそうです。

ただ、サイト内のすべてのページで読了時間が表示されてしまうので、次の設定例を参考に変更してみてください。

おすすめの設定例

日本語サイトで使うなら、こちらの設定を最初に済ましておきましょう。変更すべきは、下記4箇所のみです。

日本語サイトで使う際の設定箇所

  1. 読了時間の表示テキスト（例：この記事を読むのにかかる時間：）
  2. 時間の単位（複数形）
  3. 時間の単位（単数系）
  4. 投稿タイプごとの表示設定

❷と❸は、日本語の場合、両方とも「分」でOKです。❹は通常、「投稿」だけでもいいかもしれません。最後に「Update Options」を押して保存します。

ここまで設定するとサイト上に次のように表示されます。

設定変更後の表示例

これで日本語サイトでも違和感なく使えますね。

カスタマイズする

あらかじめ用意されているショートコードを使えば、テキストを自分好みにカスタマイズ可能です。例えば、「この記事は◯分で読めます。」というようにテキストの間に読了時間を挟むこともできます。

「Update Options」ボタンの下部にあるショートコードを一部活用します。

読了時間のショートコード

最後の「postfix_singular」の部分はいらないので、例えば、下記のように本文前に設置してみましょう。

[rt_reading_time label="この記事は" postfix="分で読めます。"]

読了時間の前後に表示するテキストを設定できます。

ショートコードで出力した例

さらにCSSで調整すれば、見た目も綺麗にできますね。

CSSで見た目を調整した例

一例として上記のCSSを載せておきますので、参考にカスタマイズしてみてください。

.rt-reading-time {
border: 2px dotted #ccc;
padding: 0.5em;
display: block;
text-align: center;
margin-bottom: 1.5em;
}

まとめ

ブログ記事の読了時間を表示できるプラグイン「Reading Time WP」をご紹介いたしました。

冒頭にどれぐらいで読める記事なのかを表示しておくことで、読む前に記事のボリュームを確認できます。今読むか、後で読むか、ブックマークしておくかなど。ユーザーに次のフローをスムーズに促せるかもしれません。簡単に使えるプラグインなので、ぜひチェックしてみてください。