！【至急・重要】ウィルスチェックのお願い！

Change Style

WP: 外部リンクに favicon 表示 - Favicon API javascriptライブラリ＋Link Indication Plugin

コメント欄に favicon を表示させるために、ico 形式から PNG 形式に変換してくれる Favicon API というサービスを利用させていただいていますが（導入記事参照）、自分のサイト上のハイパーリンクにリンク先の favicon（PNG変換後）を自動表示させる「Favicon API javascriptライブラリ」も提供されています。

うちのサイトでは元々、記事本文中の外部リンクに専用アイコン（）を表示させていましたが、favicon 好きの血が騒ぎ、このライブラリをお借りして favicon を表示させてみることにしました。

このライブラリを使うには、favicon を表示させたいリンクのアンカータグに class 属性を書く必要がありますが、Wordpress の場合、記事表示時に自動的に class 属性を付加してくれる Link Indication Plugin があるので、自分で書き込まなくて済んで楽。 :-)

以下に、この合わせ技（というほどのものではない）と、気になったことなどをメモ。

導入手順・使い方

詳細は配布元参照。

  1. 配布元より JavaScript ライブラリ faviconapi.js をダウンロード。
  2. 表示オプションを自分好みに修正。
    • うちでは外部リンクに class="ex-ref" を（プラグインで自動で）付けているので、name: 'ex-ref' に。
    • 他のファイルと揃えて一応 UTF-8＋LF で保存。
  3. wp-includes/js/ ディレクトリに置いてみた。1

  4. wp-content/themes/使用中のテーマ/header.php の <head>～</head> 内に、次の行を挿入。

    • JavaScript ライブラリの読み込み： 2

      <script type="text/javascript" src="http://bono.s201.xrea.com/wordpress;/wp-includes/js/faviconapi.js"></script>

    • 次の行が存在しなければ挿入：3

      <meta http-equiv="Content-Style-Type" content="text/css" />

  5. favicon を表示させたいアンカータグの class 属性は、手打ちする替わりに Link Indication Plugin で自動挿入。

    • プラグインの機能・使い方は、導入メモ参照。
      • リンク先 URI で判断して、自サイト内・自サイト以外・プロトコル・ドメイン別に、任意のクラスを付けられる。
      • 適用範囲も指定できる。記事・ページ本文のみ／コメントにも／サイドバー等にも。
    • うちでは、記事・ページ本文中の外部サイトへのリンクにのみ ex-ref クラスを付けている。
    • wikipedia 用クラスも設定していたが、この JavaScript で favicon を表示してくれるので消してみた。

動作メモ

このライブラリを使うと、実際に記事を表示させたときのアンカータグに style 属性が付加される。
生成される XHTML コードは次のような感じ。

  • オプションの margin 以降をデフォルトのままにした場合：
    <a style="margin: 0pt 0pt 0pt 2px; padding: 0pt 0pt 2px 16px; background: transparent url(http://favicon.aruko.net/s/f/http://favicon.aruko.net/) no-repeat scroll 1px; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;" href="http://favicon.aruko.net/" title="Favicon API (ファビコン) α版" class="ex-ref">Favicon API</a>
  • margin 以降を空にした場合：
    <a style="background-color: transparent; background-image: url(http://favicon.aruko.net/s/w/http://favicon.aruko.net/); background-repeat: no-repeat; background-attachment: scroll; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;" href="http://favicon.aruko.net/" title="Favicon API (ファビコン) α版" class="ex-ref">Favicon API</a>

メモ

感想
  • 特にリファレンス系ページでは、リンク先が分かりやすくなっていい感じ。 :-)
  • 表示のタイムラグはそれなりにあるけれども、記事が先に表示されて、後から favicon がポコポコ表示されてくるみたいなので、重い感じはしない。（ブラウザにもよるかな？）
  • これがあれば Favatars は不要かも。。
    • コメントテンプレートの投稿者の URI のところに任意の class を入れるだけでオッケー。
    • favicon の大きさも揃う。
    • Favatars だと、favicon.ico の URI を取得するだけで、画像キャッシュ機能がないため、表示するたびにコメント投稿者のサイトに画像を読みに行くのが迷惑かなあと思っていた。Favicon API なら PNG 画像がキャッシュされる。（替わりに jigen さんとこに読みに行く訳だけれども。(^^; この点は wp-cache を復活させるしかないか。）
気になるところ
favicon があるのにデフォルトアイコンになるケースあり：
Wordpress Codex など。ご相談してみようかな。。
最低限のプロパティのみ書き出したい。
リンク先毎に別の画像（favicon）を表示するので、アンカータグの style 属性に background-image が入るのは仕方ないが、その他のプロパティはここに書かずに CSS ファイル側で定義したい。
ライブラリ中で指定できたほうが便利という人もいると思うので、オプションの書き方 — 例えば、オプションを省略すると style="background-image: url(http://favicon.aruko.net/○/○/サイトの URI);" のみ書き出す、とかにできたらうれしい。

試しにオプションの書き方を変えてみたが、失敗に終わる。4

  • margin 以降を空に → background 関連や -moz-～ プロパティが書き込まれる。
  • margin, padding の行を削除 → 同上。
  • background_color は必須みたい。削除すると style 属性自体が書き込まれず、favicon が表示されない。
favicon が存在しないとき、好きな画像を表示させたい。
リンク先のサイトに favicon がなかった場合、4種類のアイコンを選べるようになっているが、自分のサイトで用意したアイコンが出せるようになるとうれしい。

なんとかできないかなあとぼんやり考えてみた（↓）けれども、これはシステム的に無理を言っているような気がしてきたです。。。

  1. background-image を書き出さない。
    • CSS ファイルで background-image を定義しておけば、その画像が表示されることになる。
    • でも、「favicon がないとき」という条件は、この段階では挟めなさそう…。
  2. fは「ファイル」。eは「地球」。cは「鎖」。wは「白画像」 のほかに、「画像なし」を追加するとか？そうすると、1 と同様に、CSS ファイル側で定義した画像が表示され――ないな。orz
  1. WordPress の場合、こういう JavaScript ファイルはどこに置くのがいいのでしょう。以前はテーマディレクトリに置いたりしていたぼのに、どなたかアドバイスしてやってください。。。[back]
  2. これ（↓）でもいいけれども、URI の決め打ちを避けているので本文のようにした。
    <script type="text/javascript" src="/wordpress/wp-includes/js/faviconapi.js"></script>[back]
  3. この JavaScript によって、対象のアンカータグに style 属性が書き込まれるため。参照： Another HTML-lint : 解説 [back]
  4. あれこれ試すより JavaScript のソースを見たほうが的確だけれども、すっかり JavaScript を忘れてしまったです。。。（・；） [back]

3 Responses to “WP: 外部リンクに favicon 表示 - Favicon API javascriptライブラリ＋Link Indication Plugin”

  1. jigen :

    February 10th, 2007 at 12:53

    favicon API にご意見ありがとうございます～。
    cssはクラスで指定するとかの方が良いかも知れませんね。
    検討してみます。時間かかるかもしれませんがその時はスンマセン。

  2. ぼの :

    March 3rd, 2007 at 0:52

    jigenさん、はじめまして。こんにちはー。(^-^)
    Favicon API を知って以来、興味深い記事とかっちょいいサイトデザインを楽しみに、ちょくちょくお邪魔しておりました。今のデザイン好きです…。(*’-'*)

    後日希望を書き込みに…と思っていたのですけれど、すみません！わざわざありがとうございます。
    検討していただけたらうれしいです。気は長いので大丈夫ですー。（笑）

  3. power source* :

    November 21st, 2007 at 13:02

    WP[up]: 外部リンクに favicon 表示 - Favicon API javascriptライブラリ（jQuery版）＋Link Indication Plugin…

    サイト外へのハイパーリンクへの favicon 表示に使っていた JSライブラリ＋プラグインセットを、WP2.3 に上げる際に一旦外していたが、改めて最新版を導入しました。ライブラリの方は、ち…

コメントをどうぞ