Own products

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

Freebie

2010
08/02

記事を読む所要時間を表示させる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

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

コメント一覧

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

とみせん店長 より:

2010/08/02 3:21 PM

ご無沙汰しております。

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

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

smkn より:

2010/08/02 11:41 PM

>とみせん店長さま

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

[…] 振り返れば今年は当ブログの全面リニューアルを筆頭に、WordPressのプラグインを自作して公開(コレとかコレとか)したり、微妙ながらもwebサービスを公開(コレとかコレとか)したり、なかなかに充実した一年でした。 […]

[…] ITキヲスク | 記事を読む所要時間を表示させるWordPress用プラグイン「estimated」作ってみました。 先日、「たった一行追加するだけでサイトの滞在時間を13.8%伸ばす方法・・・」というタ […]

[…] んですが、ちょうどいいのを作った方がいました! 記事を読む所要時間を表示させるWordPress用プラグイン「estimated」作ってみました。 このプラグイン、ダウンロードしてインストール […]

[…] 所用時間○○分の優しさ 先日届いたLICのメルマガにて気づいたことがありました blogの表題にもなっている「所用時間」の表記です これはとても読み手側にとって優しい表記だなと思いました 私自信では、twitterからのリンク先のサイトを開いたときにすぐ閲覧することより、 「あとで読む」といった空き時間に閲覧することが圧倒的に多いです なのでブラウザのタブは複数立ち上がっていたり、メーラーのメルマガの未読件 数が多いのは日常茶飯事です そして、ふと生まれた空き時間や読むための時間をつくって サイトやメルマガを読むわけですが、 読みはじめた際の予想に反して意外と時間に追われてしまうこともあり 結局、読まないままにしてしまうか、流し読みで片付けてしまうこともあります そんなときに、記載可能な環境やジャンルにもよりますが サイトやblog、メルマガのファーストビュー内に「所用時間○○分」と記載されていると 読み手側にとっての読む時間のスケジューリングが、とてもしやすくなるのかと思いました 読み手側にて情報を受けとった際の状態に左右されるとはいえ 読み手側に共通しているのは、「時間」です 使いやすさや読みやすさなど、利便性を考えて試行錯誤するWebデザインや お客さんを囲い込むためのメルマガですが 相手への思いやりやおもてなしの心は大事だなと感じました そんなわけで自動ではありますが所要時間を表示してくれるプラグインを、私も取り入れてみたいと思います […]

[…] estimatedっていうプラグイン […]

[…] WordPress のよくあるカスタマイズコード functions.php 多め ITキヲスク | 記事を読む所要時間を表示させるWordPress用プラグイン「estimate… […]

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

[…] estimated […]

sato より:

2012/03/26 12:31 PM

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

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

smkn より:

2012/03/26 1:37 PM

>sato 様

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

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

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

[…] ITキヲスクさんページで公開されていました。 ITキヲスク | 記事を読む所要時間を表示させるWordPress用プラグイン「estimate…プラグイン …プラグインを自作されたそうです。 […]

[…] ちょっと前の記事ですが、IDEA*IDEAさんのブログで「たった一行追加するだけでサイトの滞在時間を13.8%伸ばす方法・・・」というものがありました。それを読んだ方が作ったWordPress用のプラグインが「estimated」です。こちらに詳しいことが載ってます。 […]

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

[…] estimatedっていうプラグイン […]

[…] プラグイン「estimated」を使ってみる。 ITキヲスクさんで配布されている「estimated」というプラグインを利用されていたので、 ITキヲスク | 記事を読む所要時間を表示させるWordPress用プラグイン「estimate…先日、「たった一行追加するだけでサイトの滞在時間を13.8%伸ばす方法・・・」というタイトルでidea*ideaさんが紹介されていた、記事の冒頭に”記事を全て読み終えるまでにかかる、おおよその所要時間 …プラグインありがとうございます! ↓ 早速導入してみると、トップページに読了時間が2ヶ所表示されてしまう。 ITキヲスクさんの記事を読むと”the_excerpt”、”the_content”それぞれに読了記事を表示させるので、トップページで”the_excerpt”を使用しいると”the_content”の読了時間まで表示されてしまうみたい。 これでもいいかなと思いつつ、やっぱり同じ内容が2ヶ所表示されるのは嫌なので、プラグインをちょこっと修正して”the_excerpt”には読了時間を表示させないようにしてみた。 修正は35行目を削除しただけ。 […]

[…] ダウンロード ダウンロード先:ITキヲスク | 記事を読む所要時間を表示させるWordPress用プラグイン「estimated」作ってみました。 […]

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

[…] ITキヲスクさんページで公開されていました。 ITキヲスク | 記事を読む所要時間を表示させるWordPress用プラグイン「estimate…プラグイン …プラグインを自作されたそうです。 […]

[…] プラグインの使い方 こちらのサイトで配布しているプラグインをダウンロード → インストールして有効化します。 […]

[…] している人は簡単に設置できます。 まずは作者さんのサイトからestimatedをダウンロード「ITキヲスク | 記事を読む所要時間を表示させるWordPress用プラグイン「estimated」作ってみました。」 […]

[…] ITキヲスク | 記事を読む所要時間を表示させるWordPress用プラグイン「estimate… […]

[…] 記事を読む所要時間を表示させるWordPress用プラグイン「estimated」作ってみました。 | ITキヲスク   WordPressプラグインを自作しているITキヨスクさん。 滞在時間を表示すると13.8%延び […]

estimatedプラグインの使い方 より:

2015/08/27 8:16 PM

[…] る必要があります。まずは下記リンクよりestimatedを ダウンロードしましょう。 estimatedダウンロードサイト するとこのようなサイトに飛ぶはずです。すぐにestimatedのダウンロードリン […]

WordPressの便利なプラグイン一覧 より:

2015/08/27 8:54 PM

[…] estimated 読む前にその記事のおおよその読破時間を教えて くれる便利なプラグインです。 あるのと無いのでは見た目も違いますよ^^ 参考記事⇒estimatedプラグインの使い方 […]

[…] estimatedのダウンロードサイトへいきましょ。 ☞ http://smkn.xsrv.jp/blog/2010/08/wordpress-plugin-estimated/ zipファイルがあるのでダウンロードし デスクトップへ保管します。 […]

コメントを投稿する

お名前

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

コメント

CAPTCHA


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

Favorite feeds

    Contact

    お名前※必須

    ご連絡先メールアドレス

    お問い合わせ内容※必須

    CAPTCHA

    captcha

    Blog parts

    Affiliate