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

Change Style

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

サイト外へのハイパーリンクへの favicon 表示に使っていた JSライブラリ＋プラグインセットを、WP2.3 に上げる際に一旦外していたが、改めて最新版を導入しました。ライブラリの方は、ちょうど jQueryプラグイン版 が公開されたところで、jQuery といえば WordPress に同梱されているんジャマイカ？、ということで、こちらを試してみることに。。

役割分担：

作業途中のため、後で必ず記事に修正が入ります。

Link Indication Plugin

Link Indication Plugin
機能概要記事・ページ・コメント等（任意）内のアンカータグに、リンクの種類別の CSS クラスを付加する。
バージョン3.2
作者（web)Michael Wöhrer さま
配布元Software Guide » Link Indication Plugin
ドキュメント同上
動作見本
「ページ」対応
適用したWPWordPress 2.3.1 [UTF-8]
導入手順
  1. 配布元よりダウンロード。
  2. 解凍した link-indication.php でもサブディレクトリごとでもよいようなので、link-indication フォルダごと wp-content/plugins/ ディレクトリへアップロード。
  3. 管理パネルにて有効化。
  4. オプション設定 — Oprions > Link Indication 画面にて。
    • 設定項目は旧バージョンと同様。
    • Blog URLs に内部リンク扱いとしたいドメインを複数指定したいときは改行。
    • うちの場合、Favicon API を使うしファイル配布などもしないので、External links: ex-ref のみ指定。
    • と思ったら、Specific link types に一つも指定しないとエラーが出たので、ダミーを一つ登録。

Favicon API javascriptライブラリ [jQueryプラグイン版]

注： WordPress のプラグインではありません。

Favicon API javascriptライブラリ [jQueryプラグイン版]
機能概要任意の class 名を持つアンカータグに、リンク先の favicon を表示する。
バージョン0.0.1
作者（web)hirotomo kunimatsu(jigen) さま
配布元jigelog » favicon API javascriptライブラリ [jQueryプラグイン]
ドキュメント同上
動作見本
「ページ」対応
適用したWPWordPress 2.3.1 [UTF-8]
導入手順
  1. 配布元よりダウンロード（右クリックして「名前を付けてリンク先を保存…」）
  2. サーバへアップロード
    今回は、テーマ/js/jquery.faviconapi.js に置いてみた。
  3. jQuery は WordPress 同梱のものが使えるんじゃないかと思ったが、動作しなかったので、とりあえず jQuery から「jQuery 1.2.1 (14kb, Minified and Gzipped)」をダウンロード。テーマ/js/jquery.js としてアップロード。

  4. テーマ/header.php を修正

    <script type="text/javascript" src="http://bono.s201.xrea.com/wordpress/wp-content/themes/sara/js/jquery.js"></script>
<script type="text/javascript" src="http://bono.s201.xrea.com/wordpress/wp-content/themes/sara/js/jquery.faviconapi.js"></script>
<script type="text/javascript">
<!--
$(document).ready(function(){
    $("a.ex-ref").faviconapi({
        size:'s'
    });
});
//-->
</script>
<meta http-equiv="Content-Style-Type" content="text/css" />
    • $(document).～ どこに書こうか迷ったので、とりあえず生で。XHTML なので、スクリプトの括り方は //<![CDATA[ とかかも。後で調べて直す。
    • $("a.ex-ref") — Link Indication Plugin でクラスを付けた <a href="～" class="ex-ref">～</a> のリンクに favicon を表示させる。
    • size:'s' — favicon サイズ指定オプション
    • 最終行 meta — body 内の要素に直に style 属性が入るので。
つまづいている箇所
ページ内の最初の favicon が、次以降のリンクにも表示されてしまう

例えばこのページの場合、最初のリンク先が http://jigen.aruko.net/memo/faviconapi/libjquery/ なので、favicon 表示用の style 属性値に background: transparent url(http://favicon.aruko.net/s/f/http://jigen.aruko.net/memo/faviconapi/libjquery/) が入るが、次以降のリンクにも同じ background url が入ってしまう。

なぜ。。（・；）

WordPress 同梱の jQuery だと動かない

呼び方自体がまずいのかも？

  • 管理パネルでは <script type='text/javascript' src='http://bono.s201.xrea.com/wordpress/wp-includes/js/jquery/jquery.js?ver=1.1.4'></script> のように呼んでいる。
  • <script type="text/javascript" src="http://bono.s201.xrea.com/wordpress/wp-includes/js/jquery/jquery.js"></script> と書いてみたが、アンカータグは書き換わらず、favicon が表示されない。
  • jQuery のサイトからダウンロードした 「Download jQuery 1.2.1 (14kb, Minified and Gzipped)」 だと動いたので、とりあえずこれを使う。
$() を記述する場所
  • header.php の <head> 内に書くか？
    • XHTML の場合の書き方を調べる
  • 別ファイルに書くか？
    • 横着して jquery.faviconapi.js とか。。（動く）

関連リンク

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

  1. 【WordPress】「Link Indication Plugin」導入 » Telmina :

    November 21st, 2007 at 2:12

    [...] WP[up]: 外部リンクに favicon 表示 - Favicon API javascriptライブラリ（jQuery版）＋L… ＠ power source* [...]

  2. Sa・Ga :

    November 21st, 2007 at 2:22

    　ぼの様、ご紹介いただきありがとうございました。
    　おかげで助かりました。

    　自分のところにも書きましたが、とりあえず私はまず「Link Indication Plugin」のほうだけ先に導入いたしました。
    　ところで、「jQuery」っておいしいですか？（ぉぃ）

    　このプラグイン、すでにリンクにclass属性を設定しているときは二重に設定することがないようですね。
    　おかげで、導入前にfaviconを読んでいた箇所の挙動がおかしくなるようなこともありませんでした。

  3. jigen :

    November 22nd, 2007 at 13:16

    ゴメンなさい。バグありました～。
    今修正していますので、修正終わり次第連絡します。m(_ _)m

  4. jigen :

    November 22nd, 2007 at 14:57

    申し訳ないです。直しました！
    http://jigen.aruko.net/2007/11/22/plugin-of-jquery-which-can-use-faviconapi-002/

コメントをどうぞ