AFFINGER5に「この記事は約何分で読めます」を表示する方法

WordPressテーマ「AFFINGER5（WING）」の記事上に、自動的に「この記事は約何分で読めます」と表示させるカスタマイズをご紹介します。

通常ページはもちろん、AMPでも表示できます。

読む時間を表示する方法

表示例

記事上に「この記事は約何分で読めます」と表示させる方法は以下の通り。

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」に先のコードを追記してください。

追記するのは一番下の行で大丈夫です。

以上です。