WordPressサイトで記事を読むのにかかる時間を先頭に表示させる方法

色んなブログを読んでいると、「この記事は約xx分で読めます」といった所要時間が記事の先頭に表示されていることがあります。当ブログにも設置してみたのですが、以下のような感じのヤツですね。

所要時間が表示されていると、今読むか後で読むかの判断にもなりますし、訪問者にとって親切ですよね。

ということで、WordPress サイトに所要時間を設置する方法を紹介したいと思います。

所要時間を表示させる方法

手順は非常に簡単で、利用しているテーマの functions.php に以下のコードをコピペするだけで OK です。

function countdown($content){
$count = round(mb_strlen(strip_tags($content)) / 600) + 1;
return '<div class="time"><span class="countdown">この記事は約 <b>'.$count.'</b> 分で読めます。</span></div>'.$content;
}
add_action('the_content','countdown');

コードをコピペするだけで、記事の先頭部分に「この記事は約〇分で読めます。」という内容が表示されるようになります。

所要時間の計算は、1 分間でだいたい 600 文字読むことができると言われているので、記事全体の文字数を 600 で割っています。文字数が少ないと 0 分になってしまうので、それに 1 をプラスしています。

スタイルの変更

ただ所要時間を表示させるだけでは味気ないので、CSS を変更して見た目を整えましょう。

例えば、所要時間が 4 分だったら、以下のような HTML が出力されます。

<div class="time"><span class="countdown">この記事は約 <b>4</b> 分で読めます。<span></div>

あとは、上記コードに合わせて好きなようにスタイルを変更すればいいのですが、参考までに当ブログの CSS を紹介しておきます。


.countdown {
 color: #999;
}

.countdown:before{
 content: url('images/clock.png');
 margin-right: 3px;
 vertical-align: top;
}

.time {
 margin: 7px 0;
}

時計の画像はアイコン素材などから自分の好みのものを探してください。

記事ページ以外に表示させたくない場合

functions.phpをカスタマイズする場合

トップページとか固定ページには表示させたくない場合もあると思います。

上記で紹介したコードは、the_content 関数の前に「この記事は約〇分で読めます。」という文字を追加するという仕組みなので、テーマ内の the_content 関数がある場所には表示されてしまいます。

当ブログの場合、WP Limit Posts Automatically というプラグインを使ってトップなどの記事一覧を抜粋表示させていたので、トップページとかアーカイブページにも表示されていました。

そんなときは、functions.php に追加するコードを以下のように変更します。


function countdown($content){
 if( is_single() ){
 $count = round(mb_strlen(strip_tags($content)) / 600) + 1;
 return '<div class="time"><span class="countdown">この記事は約 <b>'.$count.'</b> 分で読めます。</span></div>'.$content;
 }
}
add_action('the_content','countdown');

これで、記事ページだけに表示されるようになります。

single.phpなどに直接記述する場合

functions.php を使うのではなく、そもそも表示させたいテンプレートにだけコードを追加する方法もあります。

その場合、上述した functions.php のコードは削除して、single.php などテーマファイルの所要時間を表示させたい場所に以下のコードを記述します。


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

<div class="time"><span class="countdown">この記事は約 <b><?php echo $est; ?></b> 分で読めます。</span></div>

この方法でも functions.php にコードを追加した時と同じ結果を得られます。自分の好きな場所に配置できるので、こちらのコードの方が自由度は高いですね。

ショートコードや空白を除外したい場合

上述した方法だと、記事内のショートコードや空白も文字数に含まれてしまうと思います。ショートコードで記述した内容や空白を除外したい場合は、以下のように記述しましょう。

functions.phpをカスタマイズする場合


function countdown($content){
$mycontent = strip_shortcodes( $content ); //ショートコードを除外
$mycontent = preg_replace( '/(\015\012)|(\015)|(\012)/', '', $mycontent ); //空白を除外
$count = round(mb_strlen(strip_tags($mycontent)) / 600) + 1;
return '<div class="time"><span class="countdown">この記事は約 <b>'.$count.'</b> 分で読めます。</span></div>'.$content;
}
add_action('the_content','countdown');

single.phpなどに直接記述する場合


<?php $mycontent = $post-&gt;post_content;
$mycontent = strip_shortcodes( $mycontent ); //ショートコードを除外
$mycontent = preg_replace( '/(\015\012)|(\015)|(\012)/', '', $mycontent ); //空白を除外
$word = mb_strlen(strip_tags($mycontent));
$m = floor( $word/600 )+1;
$est = ($m == 0 ? '' : $m) ;
?&gt;

<div class="time">
<span class="countdown">この記事は約 <b><?php echo $est; ?></b> 分で読めます (文字数:<?php echo $word; ?>)</span>
</div>

これでショートコードや空白が除外された文字数で計算されるようになります。

あとがき

所要時間が表示されていた方が訪問者に優しいですし、コピペで簡単に設置できちゃうのでぜひ試してみてください。

WordPressサイトで記事を読むのにかかる時間を先頭に表示させる方法