WordPressで画像を新しいウインドウで開くようにするやり方

• 公開日 : 2013年11月1日
• カテゴリ : WordPress

WordPressにおいて本文(記事)内に投稿する写真(画像)をクリックすると別ウインドウで開くようにしたい場合がある。
要するに画像を表示するタグであるa要素にtarget="_blank"の属性を追加すればいいだけなのだが、毎回画像を投稿する度にこれを追加で書き込むのははっきり言って面倒くさい。

どうもWordPressにはテキスト文字のリンクに対しては「リンクを新ウィンドウまたはタブで開く」のオプションがあるのに、

画像のリンクに対して「リンクを新ウィンドウまたはタブで開く」という設定が無いようである。(後日追記：ページ内に貼り付けてから設定できるらしい)

だからといって、HTMLの知識のない一般の人がタグを直接書き込むのは書き込む場所を間違えたりする可能性大なので、あまりおすすめできるやり方ではないだろう。

コアファイルをいじらずに何とかしたい

この件に関してちょっと検索してみると、wp-admin/includes/media.phpファイルを編集することで画像のリンクを新しいウインドウで開くようにできるという記事が何件か見つかった。

しかし、だ。

これ、コアファイルじゃないのか？

コアファイルを編集すると、今後WordPressがアップデートした際にファイルがすべて上書きされるので、編集した内容はすべて無駄になり、毎回同じ編集をやり直す羽目になる。
なのでこのやり方はボツだ。
面倒な作業を減らすためにまた面倒な作業が発生するようでは本末転倒である。

ではどうするか。
これを今回と次回の記事の2回に分けて詳細に解説しよう。

やり方の解説

私のこのブログではすでにずいぶん前から本文内の画像のリンクを新しいウインドウで開くようにしてある。(その後、画像をiOS7のようなズーム演出で開くスクリプトに変更しています)
これはJavaScriptによって実現している。

画像のリンクを新しいウインドウで開くこのJavaScriptファイルを例えばnew-window.jsというファイル名としておき、このファイルをWordPressのheader.phpまたはfooter.phpから読み込めば、すべての画像のリンクが自動的に新しいウインドウで開くようになる。(このブログの場合は各記事ページからのみnew-window.jsを読み込ませてます)

一応このnew-window.jsのファイルをダウンロードできるように以下にリンクを貼っておきますが、設置するサイトに合わせて一部分だけ書き換える必要があるので、それを次回の記事で説明します。

new-window.jsのダウンロード

注意：クリックした際に自動でダウンロードされずにコード内容が画面に表示された場合は、その画面のままメニューバーの「ファイル」から「名前を付けてページを保存」を選べばダウンロードできます。

追記：new-window.jsの設置方法を書きました。
自動的に画像を新しいウインドウで開くスクリプト