WordPress の ThickBox を使ってみる

画像をクリックするとポップアップで拡大表示する「Lightbox」を WordPress で使うには、LightBox を組み込む WordPressプラグインを利用するのが一般的ですね。テーマに組み込まれている場合もありますが。

ところが、WordPress には元々、jQueryプラグイン「ThickBox」が含まれていて、簡単に利用できます。「含まれている」とはいってもデフォルトでロードされるわけではありませんが、動作に必要なファイル (thickbox.js と thickbox.css) を組み込んでくれる add_thickbox() という関数が用意されているので、これを利用すれば簡単です。

利用手順は下記2ステップです。

1. テーマの functions.php に add_action( 'init', function() { add_thickbox(); } ); を書き加える
2. 投稿や固定ページ内の画像のアンカータグに class="thickbox" を書き加える

アンカータグの title 属性の値が、ThickBox表示時にキャプションとして表示されます。

ただ、デフォルトのままだと、キャプションや[閉じる]ボタンが下にズレて表示されたり、モバイル表示時のバランスがイマイチだったりします。2007年で開発が終了している thickbox.js を使っているので仕方ないのかもしれません。

thickbox表示サンプル

下記表示サンプルでは、CSS でキャプションと閉じるボタンの位置を調節してごまかしています。

#TB_caption {
	padding-top:0;
}
#TB_closeWindowButton {
	bottom:0;
}