記事を読む所要時間を表示させるWordPress用プラグイン「estimated」作ってみました。 | ITキヲスク

先日、「たった一行追加するだけでサイトの滞在時間を13.8%伸ばす方法･･･」というタイトルでidea*ideaさんが紹介されていた、記事の冒頭に”記事を全て読み終えるまでにかかる、おおよその所要時間”を表示させるというワザですが、自分、勉強も兼ねてWordPressプラグインとして作ってみました！

以下、今スグ使えるzipファイルとともに、今回のプラグイン作成にあたって勉強になったトコや勘所なんかをご紹介したいと思います！

記事を読む所要時間を表示させるWordPress用プラグイン「estimated」

「estimated」の使い方

まずは下記のzipファイルをダウンロードしてください！

「estimated.zip」

こちらが今回作成したプラグイン「estimated」本体になります。

こちらを解凍していただき、お使いのWordPressのプラグイン用ディレクトリ内に（～～/wp-content/plugins/ の中に）、解凍したファイルごとブッ込んじゃってください。

その後、管理画面にログインして「プラグイン」のメニューをクリックすると、プラグイン一覧の中に「estimated」があるかと思います。

あとはそれを有効化してもらえればOK！自動で「本文（もしくは投稿の抜粋部分）の直前」に、その記事を読むのにかかる大体の時間が表示されますですよー！

「estimated」の使い方

表示のされ方は当ブログにあるように「上下に点線のボーダー、時間部分文字は太く、数字部分は赤色」で表示されます。

もしコレを変更したい場合は、ちょっとご面倒ですが先ほど解凍した「estimated.zip」の中にある「estimated.php」を開いてください。

いろいろと書かれてますが、問題の表示部分は43行目と45行目にインラインでCSSが書かれてますので、そこをお好きなように修正しちゃってください。

「estimated」の中身に関して

下記が「estimated」の全ソースになります。

/*
Plugin Name: estimated
Plugin URI: http://smkn.xsrv.jp/blog/2010/08/wordpress-plugin-estimated
Description: 記事を全て読み終えるまでにかかる、おおよその所要時間を表示させるプラグインです。
Version: 1.0
Author: smkn
Author URI: http://smkn.xsrv.jp/blog/
*/

/*
This plugin is inspired Rrian Cray's blog entry.

http://briancray.com/2010/04/09/estimated-reading-time-web-design/

*/

/*
Copyright 2010 smkn (email : smkn.xxx@gmail.com)

This program is free software; you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation; either version 2 of the License, or
(at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU General Public License for more details.

You should have received a copy of the GNU General Public License
along with this program; if not, write to the Free Software
Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA  02110-1301  USA
*/

add_filter('the_excerpt', filter_estimated);
add_filter('the_content', filter_estimated);

function filter_estimated($content) {
	global $post;
	$mycontent = $post->post_content;
	$word = mb_strlen(strip_tags($mycontent));
	$m = floor($word / 500);
	$s = floor($word % 500 / (500 / 60));
	$est = '<div style="border-top:2px dotted #ccc;border-bottom:2px dotted #ccc;padding:0.2em 0;text-align:right;font-size:small;color:#444">'."\n";
	$est .= "\t".'この記事の所要時間： ';
	$est .= '<span style="font-weight:bold">約 <span style="color:#f00">'.$m.'</span>分<span style="color:#f00">'.$s.'</span>秒</span>'."\n";
	$est .= "</div>\n";
	$est .= $content;
	return $est;
}

まず1～8行目、これはプラグインとしてWordPress本体に認識させるための必須記述になります。

そして10～15行目は、このプラグインの元ネタがidea*ideaさんの紹介元でもあるRrian Crayさんであるという明記を。

17～33行目は、このプラグインがGPLライセンスであるということの明記。

35行目以降が、実働部分のプログラムになります。

「estimated」作成にまつわるエトセトラ

まず主題となるネタは前述の通り、idea*ideaさんの記事から、そしてプラグインの原型であるプログラムは、Rrian Crayさんのブログ記事「Estimated reading time in web design」から。この場を借りて御礼申し上げます。ありがとうございました！

また、唯一にして最も詰まったのが「記事の上部に表示させる」というコト。

WordPressのプラグインは「フック」と呼ばれる機能を用いて、そのプラグインを動かすタイミング（≒表示させるタイミング）を指定するんですが、ここに「the_content」（記事本文を表示させる際のフック）を指定すると、本文全てがプラグインの内容に上書きされてしまったんです。

色々と調べに調べ、色々と参考になりそうなプラグインを落としては解析してみた結果、関数の引数に「$content」と指定しとくと、本来表示される内容を $content に保持できるようなので、もろもろ処理した結果に $content を加えてやってみたところ、なんとも上手いコトいきました。