WPに搭載されているThickBoxを使う。

shin2 — Wed, 11 Feb 2009 05:51:25 +0000

このブログのイメージは、サムネールがあってクリックすると別ウィンドウで元ファイルを開くという状態だったけど、あまり好ましくないのでThickBoxを導入してみる。LightBoxの方がが動きがカッコいいけど、動作がちょっと重い感じがするので、サクサク動くThickBoxにした。

ThickBoxを使うに当たっては、次のファイルをダウンロードする必要がある。
jquery.js、thickbox.js、thickbox.css、loadingAnimation.gif、tb-close.png

ただ、WordPressにはもともと、wp-includes/js/に入っているみたいなのでそれを使うことにした。
次のコードをheader.phpのwp_head();の前に記述。
これだけで、搭載されているthickbox.jsとjquery.jsを読み込むことができる。
あとthickbox.cssも忘れずに。


・
・
wp_enqueue_script('jquery');
wp_enqueue_script('thickbox');
wp_head();

あとは、投稿するときの記事内のイメージのaタグにclass=”thickbox” title=”タイトル文字”を追加すればO.K.

そのままだとloadingAnimation.gif、tb-close.pngへのパスが通っていなかったりするので、
thickbox.jsを修正。余裕があれば好みに応じて、見かけもthickbox.cssでカスタムしたら良いと思います。これにてとりあえずは導入終了！

そのうち手書きでclass=”thickbox”を記述するんじゃなくて、ビジュアルリッチエディタにカスタムボタンを追加してできたらいいな。
まぁ後々にしよう…。
あぁ〜面倒だけどサイトのデザイン自体も変えないとなぁ〜。（デフォルト過ぎだからね）

【参考にしたサイト】

wp_enqueue_scriptについて

MujuuLog » jquery

WPに搭載されているThickBoxを使う。