画像のポップアップ表示に以前LightBoxを利用していました（LightBoxサイト）。写真を開くときの動きとか見た目はこっちの方がかっこ良かったりするんですが、写真以外にテキストやページを表示できる多機能さに期待してThickBox2.1を導入してみました。上のサムネールをクリックすると同一ウィンドウ内にオーバーレイで画像が表示されます。
これのコアとなっているJavascriptライブラリのJquery自体もかなりいろいろできる感じで、正直そっちの方に興味があってThickBoxを選んだところもあるんです。
- まずThickBox 2.1のサイトにて、ThickBox.js、ThickBox.css、それとローディングアニメーション用のgifファイルをダウンロード。あわせてJquery.jsもダウンロード。
- wordpressのディレクトリ配下にダウンロードしたファイルをアップロードするのですが、今回はThickBox.jsとJquery.jsを新たに作った
js/ディレクトリに、ThickBox.cssも新たにcss/というディレクトリを作ってアップロード。基本的にこれらの３ファイルは後で読み込み先を指定するのでどこでもかまいません。
ローディング用のgifファイルloadingAnimation.gifはimage/ディレクトリを作りその中にアップロード。 - 続いて、WordPressの管理画面、表示→テーマエディタでヘッダーを呼び出して編集、以下の３行を加えます。
[HTML] [/HTML]
path_toの部分は先ほど用意したディレクトリ名となります。
以上で準備は完了。後は画像へのリンクを張る際に、
[HTML]
[/HTML]
という風にclass="thickbox"を指定してやるだけです。