「投稿記事の読了目安時間（この記事は約◯◯分で読めます）」を表示する

このページにはプロモーションが含まれています

今回はワードプレスで下の図のような「読了目安時間」を表示するための方法について解説します。

あ、よくウェブサイトで見るやつだね

うちのウェブサイトもプラグインで表示させてるよ！

読むのに必要な時間が分かって便利だよね

実はこれは作るのすごく簡単なんだ

自力でもすぐに作れちゃうよ！

このページではこの「読了目安時間」をプラグインなしで表示する方法について解説するよう

Contents

読了目安時間を表示する原理
読了目安時間を表示するプログラム
まとめ

読了目安時間を表示する原理

原理は簡単です。読了目安時間は下記のようにして表示することができます。

記事本文の文字数を取得
取得した文字数から読了時間の目安を計算
計算した読了時間の目安を表示

読了時間の目安は下記のように計算できます。

読了時間 [分] = 文字数 / １分で読める文字数

例えば文字数が 4000 の投稿記事は、１分に 400 文字読めるのであれば 10 分（4000 文字 / 400 文字）くらいで読めるだろうと読了目安時間を計算できます。

読了目安時間を表示するプログラム

読了目安時間は functions.php に下記を追加することで表示することができます。

functions.php

<?php
/**
 * 記事本文に読了目安時間を追加する関数
 *
 * @param string $content : 記事本文.
 */
function add_read_time( $content ) {

	/* １分間に読める文字数 */
	$word_per_minute = 400;

	/* 記事本文の文字数から読了時間の目安を計算 */
	$stripped_content = strip_tags( $content ); /* タグを除去 */
	$count_content    = str_replace( "\n", '', $stripped_content ); /* 改行除去 */
	$word_count       = mb_strlen( $count_content, 'utf8' ); /* 文字数をカウント */
	$read_minute      = floor( ( $word_count + ( $word_per_minute - 1 ) ) / $word_per_minute ); /* 読了時間の目安を計算 */
	$time_str         = '<div class="read-time-str">この記事は約<span class="read-time">' . $read_minute . '</span>分で読めます</div>'; /* HTML分を作成 */

	/* 読了目安時間を含むHTMLに元々の記事本文（$content）を結合してreturn */
	return $time_str . $content;

}

add_filter( 'the_content', 'add_read_time' );
?>

作成している add_read_time 関数を the_content フィルターフックにフックしていますので、the_content 関数が実行される際（ページに投稿記事本文が表示される際）に、この add_read_time 関数も自動的に実行されます。

the_content にフックした関数は、引数の $content に記事本文が格納された状態で実行されます。

また the_contet にフックした関数が return で返却したデータが、新たな記事本文としてページに表示されることになります。

ですので、add_read_time 関数が下記のようなデータを return してやれば、ページに読了目安時間を表示することができます。

「読了目安時間を含んだ HTML 文」と $content を結合した HTML 文

この辺りはフックの仕組みを知っていると理解しやすいと思います。

フックについて詳しく知りたい方は下記のページも参考にしてください。

ワードプレスのフックとは？使い方は？初心者向けに分かりやすく解説します！

そして、読了目安時間を含んだ文字列を作成しているのがプログラム中の下記部分です。

/* 記事本文の文字数から読了時間の目安を計算 */
$stripped_content = strip_tags( $content ); /* タグを除去 */
$count_content    = str_replace( "\n", '', $stripped_content ); /* 改行除去 */
$word_count       = mb_strlen( $count_content, 'utf8' ); /* 文字数をカウント */
$read_minute      = floor( ( $word_count + ( $word_per_minute - 1 ) ) / $word_per_minute ); /* 読了時間の目安を計算 */
$time_str         = '<div class="read-time-str">この記事は約<span class="read-time">' . $read_minute . '</span>分で読めます</div>'; /* HTML分を作成 */

各行では下記のことを行っています。

一行目：HTML タグを除去
二行目：改行文字を除去
三行目：文字数を取得
四行目：読了目安時間の計算（小数点以下切り上げ）
五行目：読了目安時間を含んだ HTML 文の作成

読了目安時間の計算は「１分間に読める文字数」である下記の read_per_minute で行っています。

$word_per_minute = 400;

ですので「１分間に読める文字数」を変更したい場合は read_per_minute の値を変更してやれば良いです。

$word_per_minute = 500;

また５行目で作成した HTML でタグにクラスを設定していますので、このクラスにスタイル設定を行えば表示結果も綺麗にすることができます。

例えば style.css に下記を追記すれば、

.read-time-str {
	background-color: #fdfddd;
	font-size: 1.2em;
}

.read-time {
	color: #ff8888;
	font-size: 1.5em;
	font-weight: bold;
}

表示結果は下の図のようになります。

まとめ

このページでは、ページの読了目安時間を表示する方法について解説しました。

フックさえ使いこなすことができれば簡単に表示できるかなぁと思います！

逆にフックが苦手な方は、こういったプログラムを作成することでフックの理解を深めることもできますので、是非フックを使ういろんなプログラムを作ってみると良いと思います。

今回は the_content フックを利用した方法を紹介しましたが、save_poset フックを利用して、投稿記事のページ表示時にではなく投稿記事を保存する際に読了目安時間を計算しておく方法もあります。

いろんな方法を考えてみて、いろんなワードプレスプログラミングに挑戦してみてください！

読了目安時間を表示する原理

読了目安時間を表示するプログラム

まとめ

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル