外部サイトのリンクを別タブで開くjQuery

外部サイトのリンクを別タブで開くjQuery | Inhale n’ Exhaleコンテンツ上にあるリンク先に飛んだ後、いちいちブラウザの「戻る」操作をするのが面倒なので、リンクを右クリックして「リンクを新しいタブで開く」習慣は誰でもあるだろう。この右クリックという操作自体が煩わしくなってきたので、とりまこのブログ内だけでもなんとか自動化できないかとjQueryを組んでみる。

WordPress 3.2以降はリンク挿入時に「リンクを新ウィンドウまたはタブで開く」というチェックボックスがあるのでそれほど手間ではないが、ホスト先のサーバーの事情で3.1系を使っているので、エントリ内でリンクを作るときに、「target=”_blank”」をいちいち書いてやらないと別タブで開かれない。むしろ右クリックより面倒。ビジュアルエディタを使っていれば、リンク挿入時にターゲットウィンドウを指定できるようだが、HTMLモードでWordPressの編集をしているので無縁。

理想型は「ブログ内部のリンクは同じタブで開かれて、外部サイトのリンクは別タブで開かれる。」である。

これを実現するためにやったこと。
テーマのheader.phpを編集して、</head>の直前に以下のコードを追加する。

<script type="text/javascript">
jQuery(function() {
    jQuery("div#content a:not([href^='<?php echo get_settings('home'); ?>'])").attr("target", "_blank");
});
</script>

使っているiFeatureのテーマが内部でjQueryを読み込んでくれているのだが、なぜか「$」でjQueryオブジェクトにアクセスできなかった。テーマによっては自前でjQueryのコードを読み込むように

<script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>

を先立って書く必要があるかも。

「get_settings(‘home’);」の戻り値は「http://h2plus.biz/hiromitsu」になるので、「href属性が”http://h2plus.biz/hiromitsu”で始まらないaタグの、target属性をすべて”_blank”にする」というもの。意外と簡単ね。