WordPressにプラグイン無しで「この記事は○分で読めます。」を実装する

この記事が良ければ、ぜひシェアお願いします

「コメントが20件もある!」と思いきや全てスパムだったことに悲しんでしまいました、管理人どらごんです。こんにちは!(そういえば、テレビを見ていたら、『こんにちわ』ではなく『こんにちは』だ!と説教していた方がいたので、誤表記せずに言ってみましたw)

WordPressにプラグイン無しでどこまでテーマに実装できるか考えていたところ、たまに見かける「この記事は○分で読めます。」の実装について書かれている記事を見たので、それを参考にしながらご紹介したいと思います。

参考サイト : WordPressで「この記事は○分で読めます。」の一文を実装 | できパソ

「この記事は○分で読めます。」の実装について

この方法を使えば、functions.phpへのコード追加とCSSでの表現用の記述をしてあげるだけで実装することができます。どれくらいの規模の記事か事前に分かると、読んでても心理的に負担になりにくいですよね。また、こういう発想をされた方は本当にすばらしいと思います。

当サイトでは、なるべくCSSの定義を減らしたいと思ったのと、見せ方をちょっと変えたいと思ったので、参考にさせてもらったサイトから変更を加えています。仕組みとしては、記事の文字数を600で割った値をround関数で丸めたものに1を加えて”○”分として、記事中に含めているものになります。

【PHP】

//記事を読む時間の目安を表示
function countdown($content){
    $count = round(mb_strlen(strip_tags($content)) / 600) + 1;
    return '<div class="post-readtime">この記事は約 '.$count.' 分で読めます。</div><br /><br />'.$content;
}
add_action('the_content','countdown');

【CSS】

.post-readtime {
    font-size: 12px;
    color: #ff6347;
    float: left;
    margin: 2px 0 2px 2px;
    font-weight: bold;
}

.post-readtime:before{
    content: url('http://blog.info-architecture.jp/img/icon_clock.png');
    margin-right: 3px;
    vertical-align: baseline;
}

機能としてはサイトの特性にも依るのかなぁと思いますので、テーマとしては持たせずに個人のカスタマイズとした方が良いかもしれないですね。

ブログサイトにはあった方が良い機能だと思いますので、WordPressでブログサイトを運営されている方のご参考になればと思います。

スポンサーリンク

この記事が良ければ、ぜひシェアお願いします

もぐ
年齢 : 30代半ばの1児の新米パパ。ITネットワークから始まり、WEBディレクター、WEBシステム系のプロマネ、データ分析など色々やってるエンジニアです。WordPress、Webサービス構築、BIツール、IoTなどがトレンド。新しくて面白い仕事募集中。
スポンサーリンク