ボクのアフィリエイト日記

ボクアフィ

AFFINGER5

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

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

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

この記事は『「本文を読む目安時間」を表示するWordPressカスタマイズ方法 - 寝ログ」』を参考にカスタマイズさせていただきました。

読む時間を表示する方法

AFFINGER5の「この記事は約何分で読めます」の表示例

表示例

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

  1. 「functions.php」に時間取得関数を追加
  2. 時間取得関数の呼び出し
  3. 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」に先のコードを追記してください。

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

以上です。

おすすめ記事

EWWW Image Optimizerの設定画面
画像を「EWWW Image Optimizer」でWebPに変換する方法

2019/5/17  

WordPressプラグイン「EWWW Image Optimizer」を使い、次世代画像フォーマット「WebP(ウェッピー)」に変換する方法を解説します。

AdSenseの「ページビュー」と「表示回数」の違い
AdSenseの「ページビュー」と「表示回数」の違い

2019/4/3  

AdSenseのレポートでよく見る「ページビュー」と「表示回数」の意味の違いを解説します。

プラグイン不要!Googleフォームでお問い合わせフォームを作る方法
プラグイン不要!Googleフォームでお問い合わせフォームを作る方法

2019/4/3  

WordPressで人気のプラグイン「Contact Form7」を利用せずに、Googleが提供する「Googleフォーム」を使ったお問い合わせフォームの作り方をご紹介します。

-AFFINGER5

Copyright© ボクアフィ , 2019 All Rights Reserved.