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

先日新規ウィンドウを開く手段を Valid と両立させる考察という記事で

• リンクを新しいウィンドウで開くかどうかはユーザーに選択してもらうのが良いのでは
• でも両方のリンクを書いていくのは手間がかかる、ソースも長くなる
• せめて、手間を減らすために「Firefox」+「CopyURL+」で一発リンク制作をしてみるのはどうだろう

という内容を書きましたが、その後「javascript を使いリンクに新規ウィンドウを開くたアイコンを自動追加する」という方法を公開している方を発見しまして。これが本当にすごい！

新しいウインドウを開くべき？ – LogJET

1 回設定してしまえば記事を書くときには手間いらず、しかもリンクを 2 回書かなくて良いのでソースも長くならず、本当に素敵です。
あまりに素敵だったので他の方々にも手軽に利用してもらえればいいなと思い、Fsiki さんに許可をいただき WordPress のプラグインにさせていただきました！
有用な javascript を公開し、プラグイン化することを承諾してくださった Fsiki さんに感謝いたします :smile:

具体的には、以下のような javascript です。

• リンクに自動で「新規ウィンドウを開くためのリンク」を追加。
• 除外したい URL 等の文字列を指定可能。これによって自分のサイト内リンクに新規ウィンドウ用のリンクを追加しないようにできる。
• 除外したい URL 等の文字列を含んでいても、特定の class 名を付けてある場合は追加できる。
• この追加する動作を、サイトの全体に適用するか、指定した id の部分のみに適用するか選択可能。
• target=”_blank” で開くか javascript を使い window.open で開くかも選択可能。

Download AutoExternalLink

プラグインの名前はそのままずばり AutoExternalLink です。
このプラグインは Fsiki さんの javascript を簡単に実装できるようにしたものです。
概要は以下のとおりです。

• javascript を読み込みさせるためにテーマを編集する必要がなくなる。そのため、テーマの変更時にもヘッダーの書き換え作業が不要になり手間が省ける。
• アイコン位置の調整用 CSS をテーマに追記しなくて良いように CSS を追加。この CSS も自動で読み込まれる。

Download：AutoExternalLink.lzh
最新バージョンはWordPress Plugins/JSeries » AutoExternalLink (外部リンク用アイコン追加)から DL してください。

external.gif 用に画像を 2 パターン× 青とグレーの 2 色、計 4 つ作り同梱しました。お好きな画像を external.gif にリネームしてお使いください。
もちろん他の画像にしても OK です。

07/07/17 追記
上記プラグインの文字コードは UTF-8 です。必要に応じて文字コードは変えてしまって OK です

初期設定

AutoExternalLink.js の以下の場所を、まず設定します。テキストエディタで開いて書き換えてください。
※この AutoExternalLink.js は Fsiki さんが作られたものです。多少 WordPress ユーザー向けに初期の内容を変えさせていただきましたが、ほぼそのままです。

/*
 *  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 = 2;
var checkArea = '';
var exclusionStr = new Array('BlogURL','example.com','javascript');
var inclusionClassName = 'nw';
var anchorObject = '<img src="http://BlogURL/wp-content/plugins/AutoExternalLink/external.gif" width="12" height="11" alt="リンクを新しいウインドウで開く" title="リンクを新しいウインドウで開く" />';

9 ～ 15 行目が設定についての詳細で、17 ～ 21 が設定する箇所です。

openType

1 なら target=”_blank”、 2 なら window.open。どちらを使うか設定。
特に必要がなければそのままで OK。

checkArea

どこにこのスクリプトを適用するかの設定。
ページ全体に適用ならそのままで OK。ページ内で適用したいエリアを指定する場合はその場所の id を記入。

例.) id が content のエリアにのみ適用したい場合
var checkArea = ‘content’;

exclusionStr

ここに書いた文字列が含まれるリンクには、新規ウィンドウ用のリンクを追加しない。
*BlogURL に自分のサイトのドメイン部分を記入。*

例.) 私の場合なら
var exclusionStr = new Array('graphact.com','javascript'); となります。

javascript へのリンクには適用したくないので上記のようにしていますが、適用してもよい場合は
new Array('graphact.com') という形に。

inclusionClassName

除外文字列を含んでいても、この class 名があった場合にはスクリプトを適用。
特に必要がなければそのままで OK。

anchorObject

追加するテキストや HTML の設定。
*BlogURL に自分のサイトの URL を記入。*

例.) 私の場合なら
「http://wp.graphact.com」が私のブログ URL なので、BlogURL と書いてあった場所に「wp.graphact.com」と書きます。
個人個人のブログの URL にあわせてください。

画像を変更したい、等があればこの部分を変更。

例.) リンクを画像ではなく、テキストで追加したい場合
var anchorObject = '新しいウィンドウで開きます'

設置

初期設定が終わったら設置です。

1. wp-content/plugins/ 内に AutoExternalLink フォルダをアップロード
2. WP の管理画面＞プラグインで、AutoExternalLink を有効にする

以上です。 :mrgreen:

なにか不具合等ありましたらコメントお願いいたします。