PHP

【WordPress】「この記事は約○○分で読めます」（読了時間）を投稿に挿入する方法

更新日：2023/03/31

「この記事は約5分で読めます」などの読了時間が表示されているWebページを時々見ます。
忙しい時などは短い時間で読めるなら、読んでみようという気持ちになりますね。

そこで今回は、WordPressの投稿記事に読了時間を挿入する方法をお伝えします。

読了時間を挿入するコード

非常にシンプルですが、次のよう読了時間を挿入してみます。

読了時間を投稿に挿入するときは、the_contentフィルターを使用します。

add_filter( 'the_content' , function($content){
	$length = mb_strlen(strip_tags($content)); // タグを削除して文字数計測
	$read_per_minute = 600; // 一分間に読める文字数
	
	$read_time = floor( $length / $read_per_minute) + 1; // 読了時間
	
	$add_content = '<div id="read_time"><p>'
				. 'この記事は約' . $read_time . 'で読めます'
				.'</p></div>';
	
	return $add_content.$content;
	
},1,999);

まずはタグを全て除去して文字数を計測します。
次に一分間に読める文字数で割ります。

一分間に読めるのは400から800文字程度らしいです。
この範囲で、「すぐ読めるから読んでね！」という印象を持たせたいなら大きめの値を、「じっくり読めます」という印象なら小さい数値を設定しましょう。

読了時間は切り捨ててから、プラス1しています。
もっと細かく、秒単位でもいいかもしれません。
しかし小数を60秒に換算するのは少し面倒なので、今回は見送りました。
計算方法に正解はないので、好みの形式に変更してください。

次に、スタイルを登録します。
スタイルは、外観→カスタマイズ→追加CSSで設定しましょう。

#read_time{
	border:solid 1px gray;
	padding:1em;
}

これで、最初の例の読了時間が投稿記事に表示されます。

最初のh2タグの直線に挿入する

前項は記事の冒頭に挿入しました。
記事のデザイン的に、h2タグの前に挿入した方が見栄えがよいケースもあります。

前項のコードのreturn行を変更します。

return $add_content.$content;

$h2 = '<h2';
return preg_replace('/'.$h2.'/', $add_content.$h2 , $content , 1);

正規表現を使って<h2を探して、置き換えをしています。

正規表現を変更すれば、他の場所に挿入することもできます。
Webページの構造を調べる必要がありますが、見やすく効果的な個所に挿入してみてください。

抜粋に読了時間が含まれるケースの対処

ここまで紹介したコードは、記事一覧などに表示される抜粋に「この記事は約○○分で読めます」が含まれてしまいます。
投稿の抜粋欄を設定すればそちらが優先されますが、記事数が多いと難しいですね。

そこで手順を変更します。

the_contentフィルターでショートコードを出力します。
出力したショートコードは、投稿に含まれているものと同じように適用されます。
しかし、抜粋に使用されるときは削除されます。
つまり、読了時間が生成されません。

この特徴を活かして作成したのが、次のコードです。

add_shortcode( 'insert_read_time' ,function($atts){
	$atts = shortcode_atts( array(
		'length' => 0,
	), $atts );
	$read_per_minute = 600; // 一分間に読める文字数
	
	$read_time = floor( $atts['length'] / $read_per_minute) + 1; // 読了時間
	
	return '<div id="read_time"><p>'
				. 'この記事は約' . $read_time . 'で読めます'
				.'</p></div>';
});
add_filter( 'the_content' , function($content){
	$length = mb_strlen(strip_tags($content));
	
	return '[insert_read_time length="'.$length.'"]'."\n".$content;
	
},1,1);

最初から、このコードで良かったかもしれない…

関連記事

スポンサーリンク

記事の内容について

こんにちはけーちゃんです。
説明するのって難しいですね。

「なんか言ってることおかしくない？」
たぶん、こんなご意見あると思います。

裏付けを取りながら記事を作成していますが、僕の勘違いだったり、そもそも情報源の内容が間違えていたりで、正確でないことが多いと思います。
そんなときは、ご意見もらえたら嬉しいです。

掲載コードについては事前に動作確認をしていますが、貼り付け後に体裁を整えるなどをした結果動作しないものになっていることがあります。
生暖かい視線でスルーするか、ご指摘ください。

ご意見、ご指摘はこちら。
https://note.affi-sapo-sv.com/info.php

 

このサイトは、リンクフリーです。大歓迎です。