WordPress: Lightbox 2 (画像表示プラグイン)
Lightbox 2 は記事に貼り付けられたサムネイル画像をクリックすると実サイズの画像を同じウィンドウ上に見栄えよく表示するプラグインです。
サンプル画像：
利用方法と画像挿入時に追加する必要があるアトリビュートを自動的に付加する改造方法も合わせて解説します。
提供元: Lightbox 2 Wordpress Plugin
セットアップ
- プラグインファイルを設置
- 管理ツールで Lightbox 2プラグインを有効にする
ダウンロードしたファイルを解凍し、lightbox2.php と lightboxフォルダを WordPress の pluginsフォルダに設置する。
保存先：/path/to/your_site/wp-content/plugins/
管理ツールのメニューにある「プラグイン」をクリックしてプラグイン管理ページを開き、「Lightbox JS v2.03.3 Plugin」の「使用する」をクリックする。
利用方法
画像リンクに以下のアトリビュートを追加する。
追加アトリビュート：rel="lightbox"
スクリプト改造
（注意）WordPress をアップデートしたら再度修正する必要がある。
- rel='lightbox' を自動挿入する
- 「エディタに送る」で挿入した画像は LightBox が有効なリンクになるので、無効にしたい場合は挿入後 rel='lightbox' を削除する必要がある。
-
先頭行：
-
// LightBox 2 プラグイン用のアトリビュート
-
var Rel_LightBox2 = "'" + " rel='lightbox";
-
-
addLoadEvent( function() {
-
-
240行目：
-
if ( 'none' != link )
-
//h += "<a href='" + ( 'file' == link ? ( this.currentImage.srcBase + this.currentImage.src ) : ( this.currentImage.page + "' rel='attachment wp-att-" + this.currentImage.ID ) ) + "' title='" + this.currentImage.title + "'>";
-
// 上記（オリジナル）行末の this.currentImage.title + "'>"; の部分に下記のように + Rel_LightBox2 を追加する。
-
h += "<a href='" + ( 'file' == link ? ( this.currentImage.srcBase + this.currentImage.src ) : ( this.currentImage.page + "' rel='attachment wp-att-" + this.currentImage.ID ) ) + "' title='" + this.currentImage.title + Rel_LightBox2 + "'>";
- 画像の URL からドメイン部分を省略する
-
45行目：
-
//$r .= "\t\t\t\t<input type='hidden' name='attachment-url-base-$id' id='attachment-url-base-$id' value='$src_base' />\n";
-
// LiteBox 2 プラグインのため下記のように修正
-
$r .= "\t\t\t\t<input type='hidden' name='attachment-url-base-$id' id='attachment-url-base-$id' value='' />\n";
-
-
54行目：
-
//$r .= "\t\t\t\t<input type='hidden' name='attachment-thumb-url-base-$id' id='attachment-thumb-url-base-$id' value='$thumb_base' />\n";
-
// LiteBox 2 プラグインのため下記のように修正
-
$r .= "\t\t\t\t<input type='hidden' name='attachment-thumb-url-base-$id' id='attachment-thumb-url-base-$id' value='' />\n";
記事に画像を挿入するのは簡単だが、その度に Lightbox2 のためのアトリビュートを追加する作業は面倒である。
「エディタに送る」をクリックした時に rel='lightbox' というアトリビュートを画像のリンクタグに自動的に挿入するように改造する。
file: wp-admin/upload.js
投稿画面にある画像ツールで「エディタに送る」をクリックして記事フォームに挿入される画像の URLパスを http:// からではなくトップディレクトリからのパスに変更する。
なぜこのような改造をしたいかというと、サーバの引っ越しなどドメインが変わった場合、記事内の画像パスやリンクURLを書き換えなくてはならなくなるが、そもそも記事ツールでは同一サーバに画像を保存するわけであるからプロトコルとドメイン部分が無ければドメインが変わった時に書き換える必要がなくなる。
具体的には WordPress の下記システムプログラムに記述されている部分で value値を空データにする。
file: wp-admin/upload-functions.php