ワードプレスに『この記事は何分で読めます』を追加する簡単な方法

「この記事は何分で読めます」という表示があるのを目にした事はありませんか?

 

この表示があることで、どれくらいで読めるのかを読者に教えてあげられるので、忙しい読者にも親切な感じがしますよね?

 

で、これが以外にも簡単に追加できちゃったので、今回はその方法をご紹介していきます。

プラグインを使う方法のほか、single.phpに追加する方法もご紹介するので、必ずバックアップを取ってから行うようにしてくださいね。

プラグインを使って『この記事は何分で読めます』を追加する方法。

使うプラグインはこちら、【 Insert Estimated Reading Time 】です。

 

「この記事は何分で読めます」を追加するプラグイン。

 

【 Reading Time WP 】というプラグインもほぼ同じ機能のようですが、『この記事は何分で読めます』の表示を固定ページにも表示してしまいます。

固定ページには特に読んで欲しい記事を書くことが多いと思いますので、時間の表示は避けたいところ。

【 Reading Time WP 】では個別記事と固定ページで表示を切り替えられないので、このプラグインは却下しました。

 

それでは、【 Insert Estimated Reading Time 】をインストールして有効化しましょう。

有効化したら、ワードプレス管理画面の設定の項目に【 Insert Estimated Reading Time 】が追加されていますので、これをクリック。

 

Insert Estimated Reading Timeの設定画面

 

設定画面が日本語です。

わかりやすくて嬉しいですね!

 

1分間当たりの文字数についてですが、日本人はだいたい1分間に500~600文字程度読めるといわれています。

ですので、この間の数字を入力すると良いでしょう。

私は550にしました。

 

フォーマットに関してはそのままでもいいのですが、このままだと本文に混ざってしまいがちです。

こんな感じ↓↓↓

 

Insert-Estimated-Reading-Timeの設定2

 

そのため、フォーマットの部分を以下のように書き換えましょう。

See the Pen xLbKgg by hayabusa design (@hayabusadesign) on CodePen.

 

こうすることで、本文との区別が付けやすくなりました↓↓↓

 

Insert-Estimated-Reading-Timeの設定3

 

うん、なんかプロのブログっぽいですね!(笑)

single.phpを編集して『この記事は何分で読めます』を追加する方法。

プラグインを使えば、簡単に『この記事は何分で読めます』を追加することができました。

 

しかし、先ほどご紹介した【 Insert Estimated Reading Time 】の最終更新は4年前。

ちょっと古いプラグインなので、安全性とかが不安です。

しかも、プラグインが増えるとブログ全体が重くなりがちです。

 

ということで、プラグインを使わずに直接phpを編集して同じ機能を追加したいと思います。

phpファイルを編集するので、くれぐれもバックアップを取ってからやりましょうね!

phpファイルを編集するのが恐い場合は、やらないほうが良いです。

 

今回編集するのは、single.php。

個別記事を生成しているphpファイルですね。

 

『この記事は何分で読めます』を追加するために、single.phpに以下のコードを追記します。

See the Pen yoyBqY by hayabusa design (@hayabusadesign) on CodePen.


使っているワードプレスのテーマによっても少し変わるかと思いますが、私のブログと同じようにするにはh1の閉じタグ直後に追加すると良いでしょう。

 

こんな感じに追加できました。

 

ワードプレスに『この記事は何分で読めます』を追加

 

追加する場所には少し神経を使いますが、まぁやることはコピペなのでそんなに難しくないと思います。

おわりに

今回はワードプレスのブログに『この記事は何分で読めます』を追加する方法をご紹介してきました。

プラグインを追加してちょっといじったり、phpをコピペするだけなので、実際にやってみると結構簡単だと思います。

 

しかも、なんだか一流のブログっぽくなって、かっこいいと思いません?(笑)

 

かっこよさは置いとくにしても、ユーザビリティ向上のために導入を検討してみてはいかがでしょうか?

それでは、今回はこのへんで。