thickboxを利用した画像表示
管理パネルを使っているとthickboxを利用した画面をよく見ると思います。画像登録などを行うときに登録画面が中央に表示され周りが半透明の黒色にグレイアウトされる画面です。
これをユーザ画面の画像表示に使ってみたいと思います。thickbox表示プラグインを利用する方法や、新たにthickboxをダウンロードしてそこから読み込む方法などいろいろあるようですが、せっかくwordpress自体にthickboxが組み込まれているわけですから、それを利用できないか調べてみました。
thickbox関連ファイルはどこに？
「wp-includes > js > thickbox」ディレクトリ内に全て揃ってます。
①loadingAnimation.gif
②macFFBgHack.png
③tb-cloase.png
④thickbox.css
⑤thicbox.jp
thickbox関連ファイルを読み込むには？
thickboxを正常に表示させるには、上記ファイル以外にもjquery.jsなど土台となるjavascriptファイルも一緒に読み込む必要があります。ファイルのある場所がわかれば1つ1つ指定して読み込めばいいわけですが、wordpressには「add_thickbox」というthickbox関連ファイルを読み込む関数がありました。この関数は「wp-admin > gears-manifest.php」内に記述されています。
テーマに記述する
thickboxを使えるようにします。「add_thickbox」関数はjavascriptとスタイルシートファイルを読み込みます。私は、デフォルトテンプレートの「header.php」のheadタグ内に記入しました。
<head>
略
<? add_thickbox() ?>
略
</head>
thickbox内画像のパス調整
wordpressのthickboxは管理パネルを前提として作られています。thickbox.jsを開いてみると次のような記述がありました。
var tb_pathToImage = "../wp-includes/js/thickbox/loadingAnimation.gif";
var tb_closeImage = "../wp-includes/js/thickbox/tb-close.png";
管理者パネルから読み込んだときの相対パスなので投稿から読み込むと画像のリンク切れが起こってしまいました。そこで、thickbox.jsを読み込んだ後に、変数「tb_pathToImage 」と変数「tb_closeImage」を正しいパスになるように上書きしました。
<head>
略
<? add_thickbox() ?>
<script type="text/javascript">
var tb_pathToImage = "<?= WPINC ?>/js/thickbox/loadingAnimation.gif";
var tb_closeImage = "<?= WPINC ?>/js/thickbox/tb-close.png";
</script>
略
</head>
「WPINC」は「wp-includes」への相対パスが格納されいる定数です。
「wp-settings.php」内で定義されています。
投稿内での指定方法
<a>タグのclass属性にthickboxを指定します。
例）
<a href="実画像" class="thickbox"><img src="サムネイル画像"></a>
表示確認
画像をクリックすると、正常にthickbox表示されました。
この機能は別ブログ「アメショ ちゃちゃ丸」で使いました。
2009 年 5 月 8 日 金曜日 【 カテゴリー: Wordpress2.7 , テーマ編集 】
2011 年 4 月 20 日 4:02 AM
[...] WPにあるthickboxを活用する方法・・・ WP に搭載されているThickBoxを使う。- thickboxを利用した画像表示-サイト構築日記 [...]
2011 年 11 月 22 日 7:56 PM
[...] WPにあるthickboxを活用する方法・・・ WP に搭載されているThickBoxを使う。- thickboxを利用した画像表示-サイト構築日記 [...]