WordPressで記事を読むのにかかる所要時間をプラグインなしで表示する方法

ブログを読んでいると、下記の画像のように「この記事は○○分○○秒で読めます」という表示を見たことがある人は多いかと思います。

この表示があればユーザが最後まで記事を読み切ってもらうなどの効果があります。そうなるとサイトの滞在時間も増えるので、サイトの評価も上がり、検索上位に上がりやすくなるでしょう。

今回は、記事を読むのにかかる時間を表示する方法を解説します。本記事で紹介するコードを貼り付けるだけで、簡単に表示させられるので、ぜひ試してみてください。

「この記事は○○分○○秒で読めます」を表示する手順を解説

では早速、読むのにかかる時間を表示する方法を解説していきます。

➀表示させたい箇所に以下のコードを追加する

以下のコードを貼り付けるだけで、読むのにかかる時間を表示できます。

 <?php
 $mycontent = $post->post_content;
 $words = mb_strlen(strip_tags($mycontent));
 $m = round($words / 600);
 $s = round($words % 600 / (600 / 60));
 ?>
<div class="read_time_text"><i class="fa-solid fa-clock"></i>この記事は<span class="color_red">約<?php echo $m; ?>分<?php echo $s; ?>秒</span>で読めます。</div>

では上記のコードを順に解説します。

▢ $mycontent = $post->post_content;

「$post->post_content;」は記事の本文を出力できる記述です。

▢$words = mb_strlen(strip_tags($mycontent));

strip_tagsはHTMLタグを含む文字列から、タグを取り除いてくれるタグです。そして「mb_strlen」は文字列の数を取得してくれるタグです。これによりタグを除いた文字数を取得できます。

▢$m = round($words / 600);

このコードでは「600」という数字が表示されていますが、「600」というのは1分間で読める文字数を表しています。1分間に読めるのは、600字と言われているので、600で設定しています。

▢$s = round($words % 600 / (600 / 60));

さきほど1分間に600字の設定をしましたが、こちらは秒数を表示させる記述です。

▢この記事は<span class="color_red">約<?php echo $m; ?>分<?php echo $s; ?>秒</span>で読めます。

このコードでは、「この記事は」「約」「分」「秒」という文字を表示させています。これらの文字は自由に変更できます。

➁CSSでデザインを調整する

読むのにかかる時間を表示できたら、CSSでデザインを調整しましょう。今回は次のようにデザインを調整しました。

▢CSS

.read_time .read_time_text {
  background-color: #e4e4e4;
  padding: 5px 5px;
}
 
.read_time .read_time_text .fa-clock {
  margin-right: 5px;
}
 
.read_time .read_time_text .color_red {
  color: #ff0000;
  font-weight: bold;
}

上記のCSSを反映させると、以下のように読むのにかかる時間を表示できるようになりました。