memocarilog

WordPressのデフォルトの機能である「ギャラリー」をカスタマイズして、商品ページなどで使えるような画像ギャラリーを作る方法です。jQueryも合わせて使えばよりみやすいギャラリーを作ることができます。

この記事では、テンプレートファイルにギャラリーショートコードを埋め込んで使う方法をご紹介しますが、この場合、投稿に対して添付ファイル（画像のアップロード）があった場合にはすべてギャラリーになってしまうので、あらかじめ、アップロードされる画像の予想がつくような時によいと思います。

サンプルデモ

このブログのページテンプレートで作りました。
「サンプル」

「まとめたコード」が一番下にあります。最終形がこちらになります。
(Galleryショートコードは実際はすべて小文字のgalleryで記入して下さい。)

ギャラリーショートコードをテンプレートに埋め込む

ギャラリーを表示したいテンプレートファイル（single.phpやpage.phpなど）へ以下のように記入するとギャラリーのショートコードを埋め込む事ができます。(↓ショートコードは実際はすべて小文字でgalleryと記入して下さい。)

<?php echo do_shortcode('[Gallery]'); ?>

このショートコードでギャラリーを表示した場合、該当の投稿に対してアップされた画像全てを表示します。その為アイキャッチ画像としてアップされた画像も表示されます。
ギャラリーからアイキャッチ画像を外すには、以下のように exclude=”アイキャッチ画像のid” を指定します。

<?php 
$thumb_id = get_post_thumbnail_id($post -> ID); 
echo do_shortcode('[Gallery link="file" exclude='.$thumb_id.' size="thumbnail" columns="0" ]'); 
?>

上記コードの link= は画像のリンク先になります。”file”と指定することで画像ファイルのリンクになります。

生成されるコードのカスタマイズ

デフォルトのギャラリーのちょっと嫌なところは、下の画像のように、HTMLへstyleタグが勝手に生成されてしまう点と、勝手にdl要素で囲われてしまう点だと思います。

dl要素で囲われてしまうのは、galleryのショートコードに、itemtag（画像とキャプションを囲むタグを指定）・icontag（画像を囲むタグを指定）・captiontag（キャプションを囲うタグを指定）のパラメータを指定する事で任意のものへ変更できます。

例えば、画像とキャプションを囲う要素はpタグ、画像とキャプションはそれぞれspanタグで囲みたい場合は以下のようにショートコードへ値を指定することで、タグを変更できます。

<?php 
$thumb_id = get_post_thumbnail_id($post -> ID); 
echo do_shortcode('[Gallery link="file" exclude='.$thumb_id.' size="thumbnail" columns="0" itemtag="p" icontag="span" captiontag="span"]'); 
?>

勝手に生成されるスタイルタグを削除し、全体を囲うdivのclassをシンプルにする場合には、function.php へ以下のように記入します。

add_filter(
	'gallery_style',
	create_function(
		'$a', 'return "<div class=\'gallery\'><ul>";'
	)
);

これでシンプルなマークアップに変更できました。全体を囲うdivタグはコアファイルで定義されているのを外せなかった（外し方がわからなかった）のでそのままです。

生成されるタグなどを元からul要素などで定義したい場合は、以下の記事がとても参考になると思います。ギャラリーのショートコード自体を独自で作ってしまう方法です。

jQueryを使ってクリックすると大きい画像と入れ替わるギャラリーにする

以下のコードでは、サムネイルをクリックした時に、サムネイルリンク先の画像パス（src）を取得し、メインの画像のsrcと入れ替えるようになっています。ギャラリータグから生成されたコードには丁度よい感じになっています。このコードをjsファイルで読み込みます。

jQuery(function(){
	 jQuery(".gallery-icon a").click(function(){
	  // ↑サムネイル画像を指定
	 jQuery(".gallery-main img").before('<img src="' + jQuery(this).attr("href") + '" alt="' + jQuery(this).attr("title") + '" >');
	 // ↑メイン画像を指定
	 jQuery(".gallery-main img:last").fadeOut(500,function(){
		jQuery(this).remove();
		});
	 return false;
	 }); 
});

あとは、CSS側で .gallery-main に position: relative; 、 .gallery-main img に position: absolute; を指定すればOKです。

メインの大きい画像を投稿内から1つ表示する

メインとなる画像は、投稿の添付ファイルの1つを取り出して表示すると便利です。
以下のコードでは、get_postsで アイキャッチ画像以外の最初に投稿された画像を表示するようになっています。

<?php
$args = array(
	'post_type' => 'attachment',
	'posts_per_page' => 1,　
	'post_parent' => $post->ID,
	'order' => 'ASC',
	'exclude' => get_post_thumbnail_id($post -> ID)
); 
$attachments = get_posts($args);
foreach ($attachments as $attachment) {
	echo wp_get_attachment_image( $attachment->ID, 'lage', false, "" ); 
}
?>

まとめたコード

ここまでをまとめたものは以下の通りです。最終的には条件分岐を使って、投稿に対して画像のアップロードがあった場合にギャラリーショートコードを実行するようにしています。

テンプレートファイルに記入

(↓ショートコードは実際はすべて小文字でgalleryと記入して下さい。)

<?php
$files = get_children("post_parent=$id&post_type=attachment&post_mime_type=image");
if (!empty($files)){
?>
// ↑添付ファイル画像があった場合は以下の処理をする				
<div class="gallery-main">
<?php
$args = array(
	'post_type' => 'attachment',
	'posts_per_page' => 1,
	'post_parent' => $post->ID,
	'order' => 'ASC',
	'exclude' => get_post_thumbnail_id($post -> ID)
); 
$attachments = get_posts($args);
foreach ($attachments as $attachment) {
	echo wp_get_attachment_image( $attachment->ID, 'lage', false, "" ); 
}
?>
</div><!-- gallery-mainここまで -->

<!-- ギャラリーサムネイルここから -->				
<?php 
	$thumb_id = get_post_thumbnail_id($post -> ID); 
	echo do_shortcode('[Gallery link="file" exclude='.$thumb_id.' size="thumbnail" columns="0" itemtag="p" icontag="span" captiontag="span"]'); 
?>		
<!-- ギャラリーサムネイルここまで -->	
<?php } ?>

function.php ファイルに記入

add_filter(
	'gallery_style',
	create_function(
	'$a', 'return "<div class=\'gallery\'>";'
	)
);

jsファイルに記入

jQuery(function(){
	  jQuery(".gallery-icon a").click(function(){
		 jQuery(".gallery-main img").before('<img src="' + jQuery(this).attr("href") + '" alt="' + jQuery(this).attr("title") + '" >');
		 jQuery(".gallery-main img:last").fadeOut(500,function(){
			jQuery(this).remove();
		　});
		 return false;
	 }); 
});

あとは、細かい指定をCSSで行なって完了です。