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

[nice_info]090615追記
最新バージョンなどは、こちらで公開しています。
WordPress Plugins/JSeries » AutoExternalLink (外部リンク用アイコン追加)
20090615 0.2リリース
[/nice_info]

先日新規ウィンドウを開く手段を 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 ユーザー向けに初期の内容を変えさせていただきましたが、ほぼそのままです。

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:

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

29件のコメント

  1. 初めまして。

    AutoExternalLinkを使わせていただいたのですが、マックのSafariだとアイコンが表示される所とされない所があります。

    例として、私のブログ(URIの欄に書き込んであります)の右サイドバーの「Reptiles’ sites」にある「やもり通信」さんには表示されず、「やもりギャラリー」さんには表示されるといった具合です。
    右サイドバーのほとんどが外部リンクですが、31リンク中10リンクしか表示されない状況となっています。

    自宅のマックでも職場のマックでも同様ですが、職場のWindowsのFireFoxとIEではすべて表示されていました。

    環境を書いておきます。
    MacOS X 10.4.10
    Safari 2.0.4 (419.3)

    AutoExternalLink.jsの設定は、
    exclusionStr = new Array(‘うちのドメイン’,’javascript’);
    anchorObject のBlogURLをうちのブログのURL
    に変更したのみです。

    マックでも正常に表示できるようになれば、ぜひ利用させていただきたいと思っていますので、よろしくお願いいたします。

    ちなみに、AutoExternalLinkは今は無効状態にしてあります。

  2. すみません。WordPressのバージョンを書き忘れていました。
    ME2.2.1です。

  3. masakazu さん、はじめまして。

    このプラグインは、LogJET さんの「新しいウインドウを開くべき?」という記事
    (http://www.fsiki.com/jet/css-xhtml/open-new-window.html)に
    載っている javascript を、“WordPressで自動的に読み込ませる“
    ということをしているだけのプラグインなので、元々の javascript を
    書いたのは私ではなく LogJET を運営している Fsiki さんになります。

    なので、大変申し訳ないのですが javascript の動作に関しては
    LogJET さんに伺っていただいてもよろしいでしょうか。
    申し訳ないです。

    私のほうでも少しでも何か分かればと思い、
    masakazu さんのサイトのソースを使いローカルで
    この javascript を読み込ませて Windows 版の Safari にて
    きちんと表示されるか検証してみました。
    しかし Windows 版ではしっかり動くようで再現ができませんでした。

    せっかく色々と情報をくださったのに
    頼りないお返事しかできず、すみません。
    javascript 制作者の Fsiki さんならば進展があるかもしれませんので、
    よろしければ一度伺っていただければと思います。

  4. ピンバック: 妖しい…Pe-san.com
  5. あの~っ、リンク文字列の後ろではなく、一段下にgifのマークが出るのですが・・・・
    どうしたらいいのでしょう????
    ご教授お願い致します。

  6. inoccoさん、はじめまして!

    Autoexternallinkを導入してみたんですが、上のさとしさんのおっしゃられているような現象が起こっているのですが、どのような原因が考えられますか?

    宜しくお願いいたします。

  7. >さとしさん
    >Jacknightさん

    初めまして、こんにちはー。お返事遅くなり申し訳ないです。

    一段下にgifのマークがでるのは、おそらく CSS の関係だと思います。
    その状態を見ていないのではっきりとは言えないのですが、a か img が block 要素になっているとか、そういった類が怪しいかもしれません。

    このような現象が起きる原因は、間違いなく CSS の指定だとは思います。
    CSS のどの部分が・・というのは各テンプレートによって違うので分かりかねますが、まずは img や a の指定がブロック要素扱いになっていないか等を探ってみるとよいかもしれません。

  8. ピンバック: WebTecNote
  9. 管理人様、初めまして。
    ミラクルと申します。
    AutoExternalLinkプラグイン使用させていただきました!
    素晴らしいプラグインで感動しました。
    ありがとうございます。m(_ _)m

  10. はじめまして。
    3.1のマルチサイト機能を使って、それぞれのブログを独自ドメイン表示にした状態で使わせてもらってます。
    マルチサイトネットワーク内のブログ同士でリンクした場合に、外部サイトへのリンク画像を表示させられないのでいます。
    こんな感じで使っています。
    var exclusionStr = new Array(‘javascript’, ‘ドメイン’, ‘ドメイン’, ‘ドメイン’);

    プラグインを対応させるご予定はありますか?
    すこしくらい気にしなくてもいいかなとも思うのですが……どうすればいいのかこれから考えてみるところです。

    1. >nocchiさん
      今のところプラグインの更新予定はないです、申し訳ありません。
      AutoExternalLink の元となっている JS は久しく更新されておらず、作者の方もご多忙のようで更新は難しいかなと思っています。

      もしかすると jQuery をフル活用で js 部分から私が書いて出す可能性はあるんですが、これも本業が落ち着かないと手が出せないので、現時点ではいつまでにこうします等のことは何も言えない状態です。すみません…!;

      なんだかもやっとしたお返事でスミマセンm(_ _)m

Jacknight にコメントする コメントをキャンセル

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です