Own products

  • 新規事業のアイディア創造機

Freebie

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

この記事の読了時間:約726

  • このエントリーをはてなブックマークに追加

先日、「たった一行追加するだけでサイトの滞在時間を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 を加えてやってみたところ、なんとも上手いコトいきました。

なにせ初めてのプラグイン作成なので、いろいろ回りくどいやり方してたり、異端な方法を取ってるような気もしますが、それでもやるコトに意義があると思って作ってみました。

もし需要がありそうなら、表示CSSの部分とかを管理画面で設定できるようにしたりとか、いろいろやってみたいと思います。

もっと良い方法やご要望、間違いや叱咤激励やラブコールやヘッドハンティングやコラボレーションなどなどありましたら、ぜひとも教えてくださいませm(_ _)m

  • このエントリーをはてなブックマークに追加

コメント一覧

13 Responses to [記事を読む所要時間を表示させるWordPress用プラグイン「estimated」作ってみました。]

とみせん店長 より:

2010/08/02 3:21 PM

ご無沙汰しております。

さっそくプラグインいれてみました。

ちょっとだけ文字を変えましたが、
ナイスなプラグインありがとうございます。

smkn より:

2010/08/02 11:41 PM

>とみせん店長さま

こちらこそお久しぶりですっ!
お気に召して頂けたなら幸い至極です☆
どんどんとイジっちゃって構いませんよー♪

sato より:

2012/03/26 12:31 PM

これはトップページには表示できないのでしょうか?

よろしければコードを教えてください。

smkn より:

2012/03/26 1:37 PM

>sato 様

コメントありがとーございます!
当ブログのトップページでも各、記事のトコに表示させています。

このプラグインは、WordPressの独自関数「the_content(記事を表示する関数)」「the_excerpt(記事の要約を表示する関数)」が使用された場合に、表示される文章の先頭に所要時間を挿入するという仕組みです。

なので、トップページでこの2つの関数のどちらかを使っていれば、自動的に反応すると思いますー!

メンチ より:

2018/06/07 1:01 PM

プラグインを利用させていただいております
作ってくれてありがとうございました!!!

ところで、私のサイトは画像を多用するのですが、画像1枚あたりの所要時間を計上できるようにすることはできませんか?
Phpの知識が全くないのでぜひとも教えていただきたいです。よろしくお願いします!!

コメントを投稿する

お名前

ご連絡先メールアドレス※非公開

コメント

CAPTCHA


  • このブログのRSSを購読する
  • このブログをtwitterでつぶやく
  • このブログをFacebookで共有する
  • このブログをはてなブックマークで共有する

Contact

    お名前※必須

    ご連絡先メールアドレス

    お問い合わせ内容※必須

    CAPTCHA

    captcha

    Blog parts

    Affiliate