自動的に画像を新しいウインドウで開くスクリプト
- 公開日 : 2013年11月1日
- カテゴリ : Web制作
この記事は前回の記事・WordPressで画像を新しいウインドウで開くようにするやり方の続きになります。
前回の記事でも記載しましたが、今回も一応ダウンロードリンクを貼っておきます。
これが今回のスクリプトの完成形になるので、ダウンロードしてから以下の内容を読むと理解しやすいと思います。
new-window.jsのダウンロード
使い方の解説
まず、該当する画像(リンクを新しいウインドウで開きたい画像)を内包しているHTML要素を把握しておく。
例えばこのページの場合だと<div id="content"></div>
内にある画像リンクに対して新しいウインドウで開きたいので、id属性値はcontentになる。
ここの意味が分からない場合はcontentをbodyに差し替えて記述すれば、ページ全体に存在する画像リンクを新しいウインドウで開くように設定できます。
JavaScriptのDOMでその要素を取得するのでid属性やclass属性を付加しておく必要性は必ずしもないが、id属性が付加されていると取得が楽になるので今回はid属性が付加されている前提で進めます。
というわけでまずはこの要素を取得する。
var divContent = document.getElementById('content');
上記コードのcontent
の部分をあなたのページのHTML要素のid属性値に書き換えれば良い。
書き換える必要がある部分はこの一部分だけであるが、一応その後のコードの説明をしておきます。
続いて、その中にあるa要素を取得する。
var linkTag = divContent.getElementsByTagName('a');
このコード以降は書き換える部分は一切ない。
getElementById
と違って、getElementsByTagName
は配列のようなノードリストと呼ばれる形式での取得になる。
が、今回はそんな細かいことは気にする必要がない。
for(var i=0; i<linkTag.length; i++){
var attr = linkTag[i].href;
var point = attr.indexOf('uploads');
if(point !== -1){
linkTag[i].target = '_blank';
}
}
WordPressにアップロードした画像はuploadsディレクトリに自動的に保存されるようになっているため、画像のURLには必ずuploadsという単語が含まれる。
なのでこれを利用し、上記のコードではid属性値contentの要素内にあるa要素(テキストや画像のリンク)のURLを1つ1つ参照し、その中にuploadsという単語が存在する場合にのみ、そのa要素にtarget="_blank"
を追加するようにしている。
つまり、テキスト文字のリンクに関しては自動でtarget="_blank"
は付加されない。
テキスト文字のリンクに関しては以下の画面で毎回自分で設定する必要がある。
そして最初の行の、
function imgNewWindow(){
と最後にある、
}
function addEventSet(elm,listener,fn){
try{
elm.addEventListener(listener,fn,false);
}catch(e){
elm.attachEvent("on"+listener,fn);
}
}
addEventSet(window,"load",function(){imgNewWindow();});
は、Window内のHTML要素が読み込み終わった後に処理を実行するおまじないのようなものと思えばOKなので、編集する必要はありません。
そして、このJavaScriptファイルを好きな名前(例:new-window.js)で保存し、WordPressのheader.phpやfooter.phpなどから読み込ませれば、画像のリンクは自動的にすべて新しいウインドウで開くようになります。
2015年追記:上記のような面倒な編集作業をしなくても汎用的に使えるようにしたものを公開しました。
WordPressで自動的に画像を新しいウインドウで開くスクリプトの無料ダウンロード