外部リンクをもっとわかりやすくしてみた　|　Katawara.*

最近、wordpressのメンテをさっぱりしてこなかったので、久しぶりにちょっといじりました。
地味に行間を広げてみたりなど、非常に細かいところばかりなんですけれど、その中のひとつとして、外部リンクの表示の部分があります。
今回、たとえば、こんな風にしてみました。

例1：
Google

例2：

Netvibes

リストの頭にfaviconは前からやっていたのですけれど、今回は後ろに別ページを開くかどうかのアイコンを用意してみました。
両方とも欲しかった欲張りなワタクシとしては、なかなかよい感じです。

用意するもの

頭にfaviconをつけるのは、ここから。

外部リンクにFaviconを表示するjavascript | caramel*vanilla

リンクに別ページを開く専用（以下、長いので、別ページ用）のアイコンをつけるのは、ここからいただきました。

リンクに、新しいウィンドウで開くためのアイコンを自動で追加(Wpプラグイン) - Numb.

基本的な手順

基本的には、リンク先のページに書かれているとおりなので、省略。

faviconのほうは、Javascriptをダウンロードしてきて（faviconize.jsとか名前をつけます）、自分用に修正。
FTPでアップロードしたら、<head>タグの間にこう書いてしまえばOK。wordpressなら、header.phpとか、そういう名前のところに該当箇所があると思われます。

PLAIN TEXT

HTML:

<script type=“text/javascript” src=“faviconize.jsへのパス”></script>

別ページ用のほうは、AutoExternalLinkというプラグインをダウンロードしたら、同梱のJavascriptを自分好みに編集して、FTPでアップロードして、wordpressの設定画面でプラグインを有効にすればOK。

ちなみに、ここでの設定はこんな感じ。

PLAIN TEXT

JAVASCRIPT:

/*
* openType : [1:target="_blank"][2:window.open(this.href)]
* checkArea : 適用するエリアのid(ページ全体なら [checkArea = ''])
* exclusionStr : 除外する文字列(リンクすべてに適用するなら [exclusionStr = new Array()])
* inclusionClassName : 除外文字列を含んでいても<a class="nw">テキスト</a>と書かれていれば適用する。
* anchorObject : 表示するオブジェクト(テキストの場合[var anchorObject = 'テキスト';])
*/
var openType = 1;
var checkArea = 'primary';
var exclusionStr = new Array('ドメインのURL','サーバーのURL','javascript','faviconimg');
var inclusionClassName = 'nw';
var anchorObject = '<img src="http://www.ドメインのURL/wp-content/plugins/AutoExternalLink/external.gif" width="12" height="11" alt="リンクを新しいウインドウで開く" title="リンクを新しいウインドウで開く" />';

openType = 1のほうにしてみたのは、Javascriptだとタブブラウザでもウィンドウごと新しいのを開いて、気持ち的に微妙だったから（自分のローカル設定が悪いのかもだけど）。
どっちも手順に難しいということはありません。……単体で使うのなら。

こっからカスタマイズ

で、両者とも有効にするとですね。
冒頭の例2の外部リンクに不具合が現れます。
別ページ用のアイコンの手前にもう一個faviconが出現してしまいます。

プラグインのほうは、リンクの後ろにもう一個別ページ用のリンクを作るものだし、faviconのほうは、<ul>タグのclassが"favilist"だったらその配下の<li>タグの中のリンクひとつひとつの前にfaviconを追加するというものだし、当たり前といえば当たり前。

というわけで、プラグインかfaviconize.jsを直さないと、という話になるのですが、今回は、faviconize.jsをちょっといじります。
22行目の下にこれを追加。

PLAIN TEXT

JAVASCRIPT:

if (links[j].className == "newWin") {
continue;
}

プラグインのほうでは、外部リンクを"newWin"というクラスで生成するらしいので、そのクラス名が出てきたらスルーする、ということで。
何か微妙な実装の気がするけど、結果は、冒頭で紹介したとおり。
求める機能が2箇所に分かれてしまってるってのが、そもそもよくないって話だと思うんですけどね。

Via：

Katawara.*