さて、phpコードについては、他のサイトから拝借したものを自分なりに加工して用います。今回参考にしたのは、

• WordPressでこの記事を読むのにかかる時間の目安を表示する方法|IT女子のお気に入りフォルダ
• 【WordPress】ブログに『読むための所要時間』を表示する方法(glad*design)

これらを元に、p要素ではなくh3要素にしてindex.phpに埋め込んでみました。1分あたりの字数は400字に設定。やったー動いたー。

左寄せでは目立たないので、右寄せにしてみました。少しは存在感が出たカナ。

実際のところ、こんなことで訪問者が増えるとか、滞在時間が延びるとかは全く期待していません。だって記事の文字数が全体的に少なすぎる!! ほとんどの記事に「この記事を読むのに必要な時間の目安: 1分ぐらい」と表示されています。3分以上の記事少なっ。いかに文章を書く能力が低いか露呈していますね。ほとんどの内容が「読む」というよりも「見る」というレベルのものばかり。

いや、そんなはずはない。きっと長文も書けるはず。ネタさえあれば…。いや、でもどんなにすばらしい内容でも訪問してもらえなければ意味がないし、あーもーどうしましょ。

その後さらに探してみると、プラグイン化されていました。やっぱり作ってくれる人はいるんだねぇ。

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

もしテーマをいじりたくない場合や、「PHP? ハァ?」な場合にはプラグイン導入もいい選択だと思います。って言っても、デザインを変えるにはCSSの知識は必要なんですけどね。

いつもどおり、formatting.phpをカスタマイズして、勝手な文字の置換をコントロールし、mb_convert_kanaで全角英数字と半角カナを殺します。

メディアアップローダーと管理画面サイドメニューが特に大きな変更点だと思うのですが、でも今までもファイルによってアップローダーを使い分けたことなんてないので、あまり違いがよくわからないなぁ。画面が変わったり、ドラッグアンドドロップができたり、確かに進化している手応えはあります。

もう少し触ってみて、慣れることにしましょ。

しかし残念なことにどうしても取得したtitleが文字化けしてしまうので、$data['og:title'] = get_bloginfo('name');を$data['og:title'] = 'susu type automatic coupler';と固定文字列にカスタマイズ。

さらに、

function get_wpogp_tag($property, $content) {
return "<meta property=\"{$property}\" content=\"".htmlentities($content, ENT_NOQUOTES, 'UTF-8')."\" />";
}

を

function get_wpogp_tag($property, $content) {
return "<meta name=\"{$property}\" content=\"".htmlentities($content, ENT_NOQUOTES, 'UTF-8')."\" />";

というふうに変更して、validなXHTMLにします。名前空間xmlns:ogをhtml-lintが理解してくれればなおさらいいンだケド。

さて、Facebookのキモチイイところは、端的に言えば「連続感」。SNS内外を問わず高速に連携します。そのうちの機能のひとつ「いいね(Like)」ボタンを実装してみました。

初めはWordPressのプラグインをいくつか試してみたのですが、どうも思い通りに動いてくれません。「いいね」ボタンの位置がおかしかったりします。結局いつものようにテーマファイル内に埋め込むことにしました。

1. FacebookでApp IDを取得します。
   http://developers.facebook.com/setup/
   ここに自分のブログのURLとタイトルを入れて取得します。
   
2. 指示に従っていろいろと入力するとApp IDとサンプルコードが手に入ります。
   コピペでもいいのですが、html完全保存しておくといいでしょう。
   
3. 「いいね」ボタン設置に便利なソーシャルプラグイン「Like Button」があります。これを使うと各種設定を入れていくだけでコードを生成してくれます。説明書きは全部英語ですけど。
   
   インラインフレームを使うものと、XFBMLを使うものの2種類のソースを吐き出してくれますが、そもそも当サイトのようにXHTMLで記述している場合はXFBMLしか選択の余地はないです。
4. わざわざLike Buttonで生成しなくても、App IDと同時に書かれているサンプルコードをそのまま使えば、簡単にいいねボタンは作れます。

そうしてコードを埋め込んだものの、これで終わりではありません。というか、ここからがいろいろと大変でした。その理由とは…

早速「いいね」ボタンを押してみると、コメントを入力するフォームが開くのですが、ここに表示される画像がどうも気に入りません。記事内の画像を引っ張ってるようなのですが、関係ない画像(Another HTML-lint たいへんよくできましたバナー)だったりします。これではあまりにも不細工なので、まずはこれを解決します。そのためにはmeta要素をヘッダーに入れてやればよいとのことなので、

<meta property="og:title" content="<?php wp_title(' '); ?>" />
<meta property="og:type" content="blog" />
<meta property="og:image" content="<?php bloginfo('template_directory'); ?>/images/banner.gif" />
<meta property="og:url" content="<?php bloginfo('url'); ?>" />
<meta property="og:site_name" content="<?php bloginfo('name'); ?>" />
<meta property="fb:admins" content="137379896338515"/>

という感じでWordPressの関数を使いながら記述。いつも当サイトのバナーを表示することにしました。

次に、フォームが開いたときに記事のタイトル(日本語部分だけ)が盛大に文字化けします。scriptタグ内に文字コードを指定してもダメ。これを解決するために苦渋の決断をしました。それは「日本語を使った記事のタイトルをあきらめる」こと。

<meta property="og:title" content="<?php wp_title(' '); ?>" />

を、

<meta property="og:title" content="susu type automatic coupler" />

にしました。力任せな方法ですが、タイトルは化けなくなりました。ちっとも根本的な解決ではないですが別にいいんです。(ホントはちょっと悔しい。)

最後に、XHTML1.0 strictに準拠したマークアップの確認。Another HTML-lint gatewayでは<div id="fb-root"></div>の間に何も文字がないということで減点されるので、<div id="fb-root">&#8204;</div>という風に&#8204;(zero width non-joiner)を入れてごまかします。それからmeta要素のproperty属性で減点を喰らうので、name属性に変更しました。それでも正しく動いています。名前空間の宣言については特にいじっていません。

あとは今回の改造には関係ないのですが、WP-PageNaviを最新のものにしたらやたらと減点されたので、プルダウン式にしたりブロック要素で囲んだりして何とか100点を維持しています。

気が向いたら「いいね」ボタンを押してみて下さいませ。

Hello Dolly(ハロー・ドリー)

これはただのプラグインではありません。ルイ・アームストロングによって歌われた最も有名な二つの単語に要約される、同一世代のすべての人々の希望と情熱を象徴するものです。これは世界で最初のWordPress公式プラグインです。このプラグインが有効にされると、プラグイン管理画面以外の管理パネルの右上に「ハロー・ドリー」からの歌詞がランダムに表示されます。

WordPress パッケージに含まれているデフォルトプラグイン

しかし、ルイ・アームストロングなんて知らないし、何かよくわからない…。そんなわけでこのプラグインは停止していました。でも何かに使えそう。

そんなわけで、アレンジして作ったのが「famous 100 poems」。管理画面の右上にランダムに小倉百人一首の歌を表示する、純和風なプラグインです。

• famous 100 poems (zip圧縮)

けど、同じようなことを考えている人はいるようでして、1年も前に先を越されていました。「WordPressのプラグイン Hello Dollyを楽しくカスタマイズ 日本語で使おう」では画像まで入れてもうやりたい放題!!

最近はプラグインの編集も管理画面内でできてしまうので、好きな言葉やメッセージに変えていろいろと楽しんでしまいましょう。