WordPressに「この記事を読むのに必要な時間の目安」を表示してみた。

2011年12月15日 18:00 正午の月齢：20.3 月名：二十日余の月 潮汐：中潮 月齢:20.3[二十日余の月] 潮汐:中潮 | In WordPress | No Comments(旧暦2011年11月21日・ 先勝)

← ‌

この記事を読むのに必要な時間の目安: 3分ぐらい

当サイトもすっかり成熟して機能・デザイン面でいじりたいところがほとんどなかったのですが、たまたま見かけたサイトに「この記事を読むのに必要な時間の目安: 3分ぐらい」と書かれていて、思わずこの機能がほしくなってしまいました。なんていうか、顧客満足度の向上につながりそう。「10分時間があるから、この記事ともうひとつくらい読めるな。」なんてね。

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

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

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

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

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

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

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

関係あるかも知れない記事

WordPress 3.3にしてみました。

| In WordPress | No Comments(旧暦2011年11月21日・ 先勝)

← ‌ →

この記事を読むのに必要な時間の目安: 1分ぐらい

知らないうちに、3.3日本語版が公開されていたので、自動アップグレードしてみました。

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

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

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

関係あるかも知れない記事

WordPressプラグイン WP-OGPの実装とカスタマイズ

2011年06月21日 18:16 正午の月齢：19.6 月名：更待月 潮汐：中潮 月齢:19.6[更待月] 潮汐:中潮 | In WordPress | No Comments(旧暦2011年05月20日・ 赤口)

← ‌ →

この記事を読むのに必要な時間の目安: 2分ぐらい

「いいね」ボタンをさらに有効にするために、OGPをパワーアップ!! テーマファイルに直接埋め込むのをやめて、プラグインWP-OGPを使ってみました。fb:adminsとfb:appidを設定してあげるだけで、meta要素を生成してくれます。また記事の1つ目の画像ファイルを引用してくれるので、Facebookでの訴求効果もバッチリ。

しかし残念なことにどうしても取得した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が理解してくれればなおさらいいンだケド。

関係あるかも知れない記事

WordPressにFacebookのいいねボタンをつけてみた。

2011年06月17日 0:33 正午の月齢：15.6 月名：満月 潮汐：大潮 月齢:15.6[満月] 潮汐:大潮 | In WordPress | No Comments(旧暦2011年05月16日・ 友引)

← ‌ →

この記事を読むのに必要な時間の目安: 6分ぐらい

「Second Life」の虚無感、「mixi」の閉鎖感、「Twitter」の孤独感。巷で流行したwebサービスはことごとく肌に合わなかったのですが、なぜか「Facebook」だけは結構楽しんでいます。(今のところ、ですが…)

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

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

  1. FacebookでApp IDを取得します。
    http://developers.facebook.com/setup/
    ここに自分のブログのURLとタイトルを入れて取得します。
    create-new-app
  2. 指示に従っていろいろと入力するとApp IDとサンプルコードが手に入ります。
    コピペでもいいのですが、html完全保存しておくといいでしょう。
    create-an-app
  3. 「いいね」ボタン設置に便利なソーシャルプラグイン「Like Button」があります。これを使うと各種設定を入れていくだけでコードを生成してくれます。説明書きは全部英語ですけど。
    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点を維持しています。

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

関係あるかも知れない記事

WordPress プラグイン「famous 100 poems」公開。

2011年06月01日 0:49 正午の月齢：29.2 月名：月隠 潮汐：大潮 月齢:29.2[月隠] 潮汐:大潮 | In WordPress | No Comments(旧暦2011年04月30日・ 先負)

← ‌ →

この記事を読むのに必要な時間の目安: 2分ぐらい

WordPressには、もともとプラグインが1つ入っています。

Hello Dolly(ハロー・ドリー)

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

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

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

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

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

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

関係あるかも知れない記事

次のページ→

powered by WordPress. designed by susu. Entries and comments feeds.