WordPressで「この記事は○分で読めます」と表示する方法

この記事は約6分で読めます。

  • LINEで送る

この記事は○分で読めます

WordPressの記事タイトル下辺りに、よく「この記事は○分で読めます」と表示されているのを見かけると思います。
これは、文字数から自動で計算し表示させることができます。

この表示によって、記事の精読率が上がるという意見や、記事ヘッダー部に情報が増えるので表示する意味がないなど
見解は人・ブログによってわかれると思いますが、ヘッダ部で邪魔にならなければ表示して良いでしょう。
これによりユーザーも、どのぐらいのボリュームなのかをある程度把握することができます。

○分を取得する関数

まずは、○分を取得する関数を追加します。
賢威の場合は、「外観 > テーマ編集」から「functions.php」の1番下に追加します。

function count_time(){
	$content = get_the_content();
	$count = round(mb_strlen(strip_tags($content)) / 500);
	if ($count == 0) {
		$count = 1;
	}
	return 'この記事は約'.$count."分で読めます。";
}

8行で実現できてしまう簡単なphpソースです。

	$count = round(mb_strlen(strip_tags($content)) / 500);

この行で「○分」を取得しています。「$content」には、記事部が含まれているので(HTMLも含め)、
これを「strip_tags」により、「HTML」や「PHP」部分を取り除いています。

そして、残った文章部分を500で割って数値の丸め処理をします(小数点第1位の四捨五入)。
これにより、500文字を1分と判断して、記事を読み終える時間を算出します。

500文字で1分というのは、日本語を基準とした標準的な数値なので
ブログの内容や文章構成によって、数値を大小に変化させても良いと思います。

	if ($count == 0) {
		$count = 1;
	}

説明は不要かもしれませんが、時間が「0分」となってしまった場合に、
強制的に「1分」と置き換える処理をしています(短くても0分は変ですので)。

単一記事など好きな位置に挿入

「functions.php」への追加が完了したら、以下のphpコードを記事などに挿入します。

<?php echo count_time(); ?>

賢威の場合は、「外観 > テーマ編集」から「single.php」に追加することで記事のみに表示できます。

<h2 class="post-title"><?php the_title(); ?></h2>
<p class="post-meta"><span class="post-data"><?php the_time('Y年m月d日') ?></span> <?php if (!is_attachment()) { ?>[<span class="post-cat"><?php the_category(', ') ?></span>]<?php } ?></p>
<?php echo count_time(); ?>
<?php get_template_part('social-button'); ?>
:

上記の部分を「post-meta」等で探し、4行目のように追加してください。

ちょっとしたスタイルの調整

「この記事は○分で読めます」の表示位置などのスタイルを調整し、
記事ヘッダー部をすっきりさせるとさらに見やすくなります。

賢威のPC表示とレスポンシブデザインのCSS調整を説明します。

PC表示のスタイル対応

この記事は○分で読めます

当ブログでは、画像のように投稿日と横並びの右寄せで表示しています。
関数とスタイルを少し調整するだけで可能なので、方法を説明します。

function count_time(){
	$content = get_the_content();
	$count = round(mb_strlen(strip_tags($content)) / 600);
	if ($count == 0) {
		$count = 1;
	}
	return '<p class="post-time">この記事は<span class="red b">約'.$count."分</span>で読めます。</p>";
}

「functions.php」に追加したソースの7行目にタグを追加しています。

<div class="post">
<h2 class="post-title"><?php the_title(); ?></h2>
<div class="post-hedinfo">
<p class="post-meta"><span class="post-data"><?php the_time('Y年m月d日') ?></span> <?php if (!is_attachment()) { ?>[<span class="post-cat"><?php the_category(', ') ?></span>]<?php } ?></p>
<?php echo count_time(); ?>
</div>
<?php get_template_part('social-button'); ?>

「single.php」に追加したソースの3行目と6行目にdivタグを追加しています。

.post-hedinfo{
	clear: both;
	overflow: hidden;
	font-size: 0.9em;
}

.post-hedinfo .post-meta{
	float: left;
}

.post-hedinfo .post-time{
	float: right;
}

「外観 > テーマ編集」から「design.css」の1番下に上記スタイルを追加しました。
これで、投稿日・カテゴリと横並び右寄せになり記事ヘッダー部がすっきりします。

レスポンシブデザイン対応

この記事は○分で読めます

レスポンシブデザインを有効にしている場合は、横並びを解除します。
文字が重ならないようにするためです。

.post-hedinfo{
	font-size: 0.7em;
}

.post-hedinfo .post-meta{
	float: none;
	margin-bottom: 0.2em!important;
}

.post-hedinfo .post-time{
	float: none;
}

「外観 > テーマ編集」から「mobile.css」の1番下に上記スタイルを追加しました。

  • LINEで送る

“WordPressで「この記事は○分で読めます」と表示する方法” への1件のフィードバック

コメントを残す

このページの先頭へ