ワードプレスに「この記事は○○分で読めます」を設置する方法

有名ブロガーさんの多くが導入している「この記事は○○分で読めます。」という表示。この表示があるだけで、「2分なら読んでみようかな。」という気持ちになります。

さっそく僕も設置してみたので、その方法を備忘録的に残しておきます。そのための記事。コピペで簡単に設置できるので、ぜひ試してみて下さいね。

ちなみに、このブログはWordPressの公式テーマ「Twenty Twelve」をベースにカスタマイズしています。他のテーマにも応用可能です。

それでは、さっそく説明していきます。

Contents

content.phpに記述するコード
当ブログの実際のCSSコード
まとめ

content.phpに記述するコード

このコードをcontent.phpにコピペするだけで設置出来てしまいます。

<?php $mycontent = $post->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) ;
?>
<div class="countdown">
<span class="icon-clock"></span> //Webフォントの時計マークを追加
<span>この記事は <b><?php echo $est; ?></b> 分くらいで読めます</span>
</div>

これは実際に僕が使っているコードです。当ブログと同様にウェブフォントの時計マークを設置する場合は、こちらの記事↓↓を参考にしてみて下さい。不要な場合は、該当部分を削除すればOKです。

ワードプレスにウェブフォントを導入する方法

当ブログの実際のCSSコード

これはどのカスタマイズにも共通することですが、見た目の調整を担当するのが、「CSS」さんです。これも当ブログで実際に使っているコードです。

/*--------------------------------------
この記事は○分で読めます
--------------------------------------*/
.countdown {
color: #696969;　
float:right;
background-color: #ffcccc;
padding: 5px;
margin: 5px 0
}

自由にカスタマイズしてみて下さい。