「この記事は◯分で読めます」を表示してみたーい！
興味は些細なことから…
「この記事は約 5 分で読めます。」みたいなのを最近？ブログとかでよく見かけますよねー？すみません、あまり見た記憶なかったです＞＜
冒頭から嘘言いましたが、これを当ブログでも表示させたかったんです〜ｗ
きっかけは以下の記事です！
「この記事は約 5 分で読めます。」みたいなのを表示するだけで滞在時間が 13.8% も伸びるならやってみたい！と、随分前に思っていました。本当だったらやらないと損そん〜ｗ
具体的な方法！
思い付いてっから結構時間が経っていますので、どうやれば良いのか方法は考えていたのですが WordPress 上でプラグイン無しで簡単にやりたかったので実行に移せていなかったのですが、最近 $content を学習したのでさっそくやってみたいと思います！
人間が文字を読む速度…
まず人間が文字をどの位の速度でどの程度の量を読めるのか分からなかったので調べてみました！色々と調べてみましたが、やはり個人差があるようで正確な数値はでません。
日本人の平均読書スピードは1分間に400～600文字程度。例えば、大学入試センター試験の国語の問題で18,000字前後使われている試験を考えてみると、分速400字では問題を読むだけで45分もかかってしまいます。分速4,000字ならば4～5分で。その差は実に40分です。分速400字で1時間勉強する人に対して、分速4,000字の人は同じ勉強量でも5～6分、分速8,000字の人は2.5～3分しかかかりません。高校・大学受験はもちろん、社会人の資格試験などにおいても、参考書をたくさん読むことができれば受験対策を有利に進めることができます。
1分間に400～600文字程度とありました。
わたしも何回か計ってみました。大体 500 〜 600 文字程度で一般みたいです。考えながら読むことを考慮して今回はキリ良く 500 文字にしてみます。
肝心のコードを書こー！
書いてみたらすぐ出来たのでとりあえず載せます！
いつもと同じで functions.php に書く関数にしていますよー！
function countdown($content){
$count = round(mb_strlen(strip_tags($content)) / 500);
return '<p class="countdown">このポストは約 '.$count." 分で読めます。</p>".$content;
}
add_action('the_content','countdown');
5 行で書けました〜ｗ
もっと早くやっていれば良かったですねｗ
functions.php にコピペしてみてください！
記事の先頭に表示されますので楽ですよー！
CSS やタグを変更したりしてみてくださいね！
コードの説明！
一応説明しますと $content には single.php などで使う the_content() で表示されてる記事のソースが入っています。その記事のソースには HTML タグも含まれているのでまず strip_tags() でタグを除去しています。
次に mb_strlen() で文字数を数えて、それを 500 文字で割って分にしています。
round() で半端を丸めて $content の前に結合させて表示させています！
本当に簡単にできました〜ｗ（手抜きですけどｗ）
是非使ってみてくださーい！
追記です！
色々とわたしが手抜き記事書いたので、みなさんに一手間かけていただくことになりましたのでフィードバックさせていただきたいと思います。
それとブログにまで書いていただいてありがとうございます＞＜っ
０分になるよ！
そぷさん、できパソさんのブログで書いていただいているとおり、上のコードで短い記事だと０分になってしまいます〜ｗ
ほんと手抜きですみません〜ｗ
０分にならないコード！
一応その部分を考慮したコードを書かせていただきます！
できパソさんの方でも０分にならないコードを書いていただいていますので、参考にしてみてくださいｗ
できパソさんのコードの真似ですよー！
// 記事本文の前に記事文字数と読む時間を表示する
function countdown($content){
$count = floor(mb_strlen(strip_tags($content)) / 500) + 1;
return '<p class="countdown">この記事は約 '.$count.' 分で読めます。</p>'.$content;
}
add_action('the_content','countdown');
小数点は floor で切り捨てして１足しています！
これで０にはならないはずですｗ
読めます → 読めましたか？
これもアイデアですね〜ｗ
面白いです〜ｗ
nully さんのブログで jQuery を追記して例えば「この記事は１分で読めます。」をアクセスしてから１分経過すると「この記事は１分で読めます。読めましたか？」と動的に変化するみたいです！
しゅ、しゅごい！
