はじめに
ブログ記事に「読了時間の目安」を表示すると、読者の安心感がアップし、直帰率の低下や滞在時間の延長につながります。
今回は「1分あたり600文字」を基準に、記事本文の文字数から読了時間を算出し、[reading-time] ショートコードで表示する方法を紹介します。
※サンプルコードはテーマの functions.php（子テーマ推奨）に追記する、もしくは管理プラグインで新規スニペットとして作成してください。
事前準備
- WordPress
- PHP
- 子テーマがあればそちらを利用（アップデートで削除されないように）
- functions.phpもしくは管理プラグイン（私は『Code Snippets』を利用しています）を触れる程度の能力
実装手順
functions.phpに追記するか、管理プラグインで新規スニペットとして登録してください。
ショートコードの作成
ここでは、calculate_reading_time()という関数を定義します。
記事の文字数をカウントして、読了時間を計算。
HTMLとして出力するようにしています。
そして、add_shortcode()でショートコードを登録します。
function calculate_reading_time() {
$content = get_post_field('post_content', get_the_ID());
$text = wp_strip_all_tags($content);
$char_count = mb_strlen($text);
$chars_per_min = 600;
$minutes = ceil($char_count / $chars_per_min);
return return '<div class="reading-time">読了時間：約<span class="minute">'.$minutes.'</span>分</div>';
}
add_shortcode('reading-time', 'calculate_reading_time');
あとは読了時間を表示したいところで、以下のように表記すればOKです。
[reading-time]
私の場合は、ウィジェットの『記事はじめ』の部分に追加しています。
CSSのカスタマイズ
読了時間の見た目を整えます。
この例では、点線のボーダーで、読了時間の分の部分が赤い太字になります。
.reading-time {
padding: 5px;
border: 1px dashed #999999;
text-align: right;
}
.reading-time .minute {
color: #cc0000;
font-size: 1.25em;
font-weight: bold;
}
実装が完了すると、以下のような表示になるはずです。
まとめ
読了時間表示機能の実装自体は、意外と簡単にできます。
ちょっとした時間で実装できますので、もし良かったらあなたも導入してみてはいかがでしょうか？
この記事は、ブログで公開した内容の再構成版です。
詳細を確認したい方は、ぜひブログもチェックしてみてくださいね。