投稿記事の読む時間の目安を表示する方法

2016/11/24

概要

他のブログの記事を見ていると、投稿記事の更新日付などが表示されている部分やタイトル付近に、この記事は〇〇分で読めますなど表示しているブログがあります

WordPressでは、そのようなプラグインもあるみたいですが、本ブログではテンプレートに直接コードを書く方法で実施します

readtime01

読む時間の目安を表示する方法

single.php」に読む時間の目安を表示するPHPコードを挿入して、そのコードを呼び出して表示します。具体的に追加するコードを以下となります

読む時間の目安を表示するPHPコード

<?php
$mycontent = $post->post_content;
$word = mb_strlen(strip_tags($mycontent));
$m = floor($word / 600)+1;
$time = ($m == 0 ? '' : $m) ;
?>

この記事は約<b><?php echo $time; ?></b>分で読むことができます。

コードは比較的にシンプルで、読む時間は600文字を1分で読めるように設定しています。「$m = floor($word / 600)+1;」の箇所を編集すれば、1分あたり文字数を変更できます

実際に、「single.php」に追加する手順を紹介します

1.管理画面より「外観」→「テーマの編集」を選択し、「編集するテーマを選択」より現在使用しているテーマを選択します

readtime03

2.個別投稿のsingle.phpを選択します。本ブログではsingle.phpですが、使用しているテーマによっては違う場合がありますので注意してください

readtime04

3.表示する箇所を探します。私の場合は更新日付の横に表示しますので以下のコード(php if ($mtime = get_mtime('Y/m/d’)) echo〜)の下に追加する予定です

コードを追加する前のテンプレートの一部(追加するコードの位置)

<div class="blogbox">
  <p><span class="kdate"><i class="fa fa-calendar"></i>&nbsp;
    <time class="entry-date" datetime="<?php the_time('c') ;?>">
      <?php the_time('Y/m/d') ;?>
    </time>
    &nbsp;
    <?php if ($mtime = get_mtime('Y/m/d')) echo ' <i class="fa fa-repeat"></i>&nbsp; ' , $mtime; ?>
/* ------------------------
ここにコード追加して表示するようにします
------------------------
 */
<!?  ?>
	</span> </p>
</div>

4.実際に追加したら、以下のようになります

コード追加したテンプレートの一部

<div class="blogbox">
<p><span class="kdate"><i class="fa fa-calendar"></i>&nbsp;
<time class="entry-date" datetime="<?php the_time('c') ;?>">
<?php the_time('Y/m/d') ;?>
</time>
&nbsp;
<?php if ($mtime = get_mtime('Y/m/d')) echo ' <i class="fa fa-repeat"></i>&nbsp; ' , $mtime; ?>
<!? ここから何分で読めます ?>
<?php
$mycontent = $post->post_content;
$word = mb_strlen(strip_tags($mycontent));
$m = floor($word / 600)+1;
$time = ($m == 0 ? '' : $m) ;
?>
この記事は約<b><?php echo $time; ?></b>分で読むことができます。
<!? ここまで何分で読めます ?>
</span> </p>
</div>

5.追加しましたら「ファイルを更新」して終了です

下記ように、この記事は約◯分で読むことができます。 と表示されていればOKです

readtime02

スポンサーリンク

Word Press

Posted by admin