WordPressにこの手のJavaScriptモーダルウィンドウを導入するならお手軽なプラグインが無数にあるけど、プラグインなしでもできるんです。

これまではWPのthickboxを使ってました、スクリプトを新しくダウンロードする必要がなく

headに

add_thickbox();/*wp_head()より前に！*/

リンクに

class="thickbox"

これを加えるだけで効果がでます。簡単です！

でもthickboxで使われる画像のパスが管理画面向けの相対パスで書かれてるのでブログに画像を表示するのにjsを絶対URIに書き換えなければならないのが面倒で…WPアップデートの度に書き換えが必要なのです。

以前試したfancyzoomとかhighslideは重いし…。それでjQueryを使ってるfancyboxにしてみました。もちろんWordPress本体に入ってるjQueryを使いますYO！

jQuery.fancyboxを使えるようにするためには

wp_enqueue_script('jquery');

まず上記のコードをheader.phpに記述。(wp_header()より前に書く)

fancybox本家にてjquery.fancybox-1.3.4.zipをダウンロード。解凍してjquery.fancybox-1.3.4フォルダができます。使うのは中にあるfancyboxフォルダです。これを任意の場所に置きます。

jQuery.fancyboxを読み込む

<link rel="stylesheet" href="fancyboxディレクトリまでのパス/fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />
<script src="fancyboxディレクトリまでのパス/fancybox/jquery.fancybox-1.3.4.pack.js" type="text/javascript"></script>

headに上記のコードを記述します。テーマ(twentytenの子テーマ)ディレクトリにfancyboxディレクトリを設置したので<?php bloginfo("stylesheet_directory");?>/fancybox/jquery.fancybox-1.3.4.pack.jsと書きました。js、cssのファイル名がドットまじりでややこしいですが間違えないように書きます。

かっこいい動きwとかは特に要らないので
jquery.easing-1.4.pack.jsなどは読み込みません。

リンク指定の方法

画像をひとつだけ表示

<a href="サムネイル画像" class="single_image">元画像</a>

class="single_image"を付けたリンク先の画像に効果が付きます。

複数の画像を順番に表示

ナビゲーションボタン付き。

<a href="画像1" class="group_images" rel="group1">画像1</a>
<a href="画像2" class="group_images" rel="group1">画像2</a>
<a href="画像3"  class="group_images" rel="group1">画像3</a>

class=”group_images”を付けたリンク先の画像に効果が付きます。ナビゲーションを付けるにはrel="group1"を付けます。同じrel属性を持った画像がグループ化されます。

jQuery.fancyboxを動かす

<script src="<?php bloginfo( 'stylesheet_directory' );?>/fancybox/jquery.fancybox-1.3.4.pack.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
	/*ひとつだけ画像を表示*/
	jQuery("a.single_image").fancybox();
	/*複数画像をグループ化。ナビゲーション付き*/
	jQuery("a.group_images").fancybox({
		'transitionIn'	:	'elastic',
		'transitionOut'	:	'elastic',
		'speedIn'		:	600,
		'speedOut'		:	200,
		'overlayShow'	:	true
	});

});
</script>

headに以下を記述します。本家のサンプルコードそのままでサーセンw

WordPressでjqueryを使う場合は$()では動かないので$をjQueryに書き換えます。

以上、本家のHow to useを参考にしました。