WordPressテーマ「AFFINGER5(WING)」の記事上に、自動的に「この記事は約何分で読めます」と表示させるカスタマイズをご紹介します。
通常ページはもちろん、AMPでも表示できます。
この記事は『「本文を読む目安時間」を表示するWordPressカスタマイズ方法 - 寝ログ」』を参考にカスタマイズさせていただきました。
読む時間を表示する方法

表示例
記事上に「この記事は約何分で読めます」と表示させる方法は以下の通り。
- 「functions.php」に時間取得関数を追加
- 時間取得関数の呼び出し
- CSSで見た目を調整
1つずつ解説します。
「functions.php」に時間取得関数を追加
functions.phpに以下のコードを追記します。一番下の行で大丈夫です。
「functions.php」は重要なファイルなので、変更前に必ずバックアップを取ってください。
function get_time_to_content_read($content){ $count = mb_strlen(strip_tags($content)); if ($count == 0) { return 0; } $minutes = floor($count / 600) + 1; return $minutes; }
600文字ごとに約1分をカウントする計算となっています。
時間取得関数の呼び出し
通常ページのphpファイルと、AMPのphpファイルにそれぞれ以下のコードを記述します。
<div class="read-time"> <?php echo sprintf('<i class="fa fa-hourglass-half" aria-hidden="true"></i> この記事は約%s分で読めます。', get_time_to_content_read(get_the_content())); ?> </div>
「この記事は約何分で読めます」の前に砂時計のアイコンフォントを入れてあります。不要であれば削除してください。
通常ページ
上記のコードを記述するファイルは、「single-type1.php」です。
コードを挿入する箇所は任意ですが、例として「投稿日」「更新日」の下に表示させてみます。
「single-type1.php」の97行目あたりに「get_template_part( 'sns' ); //ソーシャルボタン読み込み
)」があるので、その直前に挿入します。
AMP
AMPの場合、上記のコードを記述するファイルは「single-amp.php」です。
通常ページとおなじく「投稿日」「更新日」の下に表示させてみます。
「single-amp.php」の160行目あたりに<div class="mainbox">
があるので、その直前に挿入します。
CSSで見た目を調整
そのままでは見た目がシンプルなので、CSSで見た目をちょっと変えます。
以下のCSSを追加します。
.read-time { border-top: 1px solid; border-bottom: 1px solid; margin: 10px 0 15px 0; text-align: center; }
テキストをセンター寄せして、テキストの上下にボーダーを引き、余白を付けました。
通常ページ
通常ページは、外観>カスタマイズ>「追加CSS」に先のコードを追記してください。
AMP
AMPは、「st-amp-css.php」に先のコードを追記してください。
追記するのは一番下の行で大丈夫です。
以上です。