この記事は○分で読めます、設置してみた

この記事では、プラグインなしで「この記事は○分で読めます」を設置するコードを紹介します。

数日前の記事で宣言した「次にインターフェース面で実装したいこと2つ」のうちの1つを早速設置してみました。数日前にも挑戦したのですが、細かい調整が出来ず断念。ところがたった数日で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>

こちらの記事を参考にしつつ、Webフォントの時計マークを追加するために多少いじりました。Webフォント無しの場合は下記の1行を削除すればOKです。

<span class="icon-clock"></span> //Webフォントの時計マークを追加

さらに見た目を調整するために、style.cssに以下のコードを追加しました。

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

このブログでの導入方法はこんな感じです。

WordPress歴はまだ1週間です

こんな記事を書いていますが、僕はまだ「CSSやPHPをいじりはじめて1週間のプログラミング初心者」です。そんな僕でもここまで出来ました。基本コピペベースなので、もちろん全部は理解していません。試行錯誤を続けながら今後も改良を重ねていくつもりです。もっと理解が深まったら、コードの詳細を解説する記事も書いてみたいと思います。