WordPressにすべての画像一覧ページを設置する

各投稿画面には、さまざまなメディアを一緒にアップロードすることができます。各記事ごとに見るには十分ですが、

「え~いっ!まとめてみたいわぁー」

っというときに便利な画像一覧ページを設置してみようと思います。

まず新規にテンプレートを作成します。「images.php」とします。

「images.php」の中には以下のように記述します。

以下をテンプレートのトップディレクトリに保存し、管理画面から「ページ新規追加」⇒「作成したテンプレートを選択」で内容を空のまま更新してください。

これまで掲載されたすべての画像が一覧表示されるはずです!
画像一覧のページSample

<?php
/*
Template Name: 画像一覧
*/
?>
<?php
// 変数の初期化
$per_page =20;
$per_row = 4;
$max_width = 160;
$max_height =160;
/*
$per_page = 10;
$per_row = 2;
$max_width = 200;
$max_height = 150;
*/
// 画像の数を得る
$sql = <<< HERE
SELECT COUNT(a.ID) FROM $wpdb->posts a, $wpdb->posts p
WHERE a.post_parent = p.ID
AND a.post_mime_type LIKE 'image/%'
AND a.post_type = 'attachment'
AND p.post_status = 'publish'
HERE;
$count = $wpdb->get_var($sql);
// 画像の数から全ページ数を求める
$page_counts = ceil($count / $per_page);
// URLからページ番号を得る
$page_no = intval($wp_query->get('paged'));
if ($page_no < 1) {
	$page_no = 1;
}
else if ($page_no > $page_counts) {
	$page_no = $page_counts;
}
// オフセットを求める
$offset = ($page_no - 1) * $per_page;
// ページ内の先頭と最後の画像の番号を求める
$page_start = ($page_no - 1) * $per_page + 1;
$page_end = $page_no * $per_page;
if ($page_end > $count) {
	$page_end = $count;
}
// 画像を読み込む
$sql = <<< HERE
SELECT a.* FROM $wpdb->posts a, $wpdb->posts p
WHERE a.post_parent = p.ID
AND a.post_mime_type LIKE 'image/%'
AND a.post_type = 'attachment'
AND p.post_status = 'publish'
ORDER BY a.post_date DESC
LIMIT $offset, $per_page
HERE;
$attachments = $wpdb->get_results($sql);
?>

<?php get_header(); ?>

	<div id="listimage" class="clearfix">

		<div id="contentimage" class="maincontent">

			<h1>画像の一覧(<?php echo $count; ?>件中<?php echo $page_start; ?>~<?php echo $page_end; ?>件目)</h1>

			<?php
			$ctr = 0;
			// 画像を順に出力する
			foreach ($attachments as $attachment) :
				// 画像の貼り付け先投稿のタイトルとアドレスを得る
				$post = get_post($attachment->post_parent);
				setup_postdata($post);
				$attached_title = get_the_title($post->ID);
				$attached_url = get_permalink($post->ID);

				// 画像のアドレス/概要/タイトルを得る
				$post = $attachment;
				setup_postdata($post);
                                $url = wp_get_attachment_url($post->ID);
                                $alt = $post->post_content;
				$title = $post->post_excerpt;

				// 画像の幅と高さを求める
				$at_data = wp_get_attachment_metadata($post->ID);
				$width = $at_data['width'];
				$height = $at_data['height'];
				if (!$width || !$height) {
					$width = $max_width;
					$height = $max_height;
				}

				// 画像の縦横比を維持したまま、
				// 幅が$max_width/高さが$max_heightに収まるように
				// サイズを計算しなおす
				if ($width > $max_width || $height > $max_height) {
					// 横長の画像の場合
					if ($width / $height >= $max_width / $max_height) {
						$rate = $max_width / $width;
						$width = $max_width;
						$height = $height * $rate;
					}
					// 縦長の画像の場合
					else {
						$rate = $max_height / $height;
						$width = $width * $rate;
						$height = $max_height;
					}
				}

				// 行の先頭/最後かどうかを、変数$row_first/$row_endに代入する
				$row_first = ($ctr % $per_row == 0);
				$row_end = ($ctr % $per_row == $per_row - 1);
			?>

<!-- 一枚分 -->
<div class="imagebox">
<p><a href="<?php echo $url; ?>" class="thickbox">
<img src="<?php echo $url; ?>" width="<?php echo $width; ?>" height="<?php echo $height; ?>" alt="<?php echo $alt ?>" title="<?php echo $title ?>" />
</a></p>

<span><a href="<?php echo $attached_url; ?>" title="<?php echo $attached_title; ?>の記事にジャンプ"><?php echo $attached_title; ?></a></span>
</div>

			<?php endforeach; ?>
			<?php if ($ctr % $per_row != 0) : while ($ctr % $per_row != 0) : ?>

<div class="imagebox">&nbsp;</div>

			<?php $ctr++; endwhile; ?>

			<?php endif; ?>

<!-- ここまで画像 -->
<div style="clear:both;"></div>

			<?php if ($page_counts > 1) : ?>
			<p class="page-list">
			<?php if ($page_no != 1) : ?>
				<span class="mark"><a href="<?php echo get_pagenum_link(1); ?>">最初のページ</a></span>
				<span class="mark"><a href="<?php echo get_pagenum_link($page_no - 1); ?>">前のページ</a></span>
			<?php endif; ?>
			<?php for ($i = 1; $i <= $page_counts; $i++) : ?>
				<?php if ($i == $page_no) : ?>
				<span class="namber now"><?php echo $i; ?></span>
				<?php else : ?>
				<span class="namber"><a href="<?php echo get_pagenum_link($i); ?>"><?php echo $i; ?></a></span>
			<?php endif; ?>
			<?php endfor; ?>
			<?php if ($page_no != $page_counts) : ?>
				<span class="mark"><a href="<?php echo get_pagenum_link($page_no + 1); ?>">次のページ</a></span>
				<span class="mark"><a href="<?php echo get_pagenum_link($page_counts); ?>">最後のページ</a></span>
			<?php endif; ?>
			</p>
			<?php endif; ?>

</div>

<?php get_footer(); ?>

右の本を参考にしました。実際にはもっと豊富なサンプルと解説で、確実に覚えることができるはず。本にも合う人と合わない人がいますが、わかりやすい本の1冊です。
PHPによるWordPressカスタマイズブック
藤本 壱

3 Responses

  1. Yushi Udagawa より:

    とても参考になる情報ありがとうございました!助かりました。

  2. falcon より:

    質問させてください。こちらのコードはメディアフォルダに保管された全ての画像を表示する仕様となっているようですが、これを特定のカテゴリの画像全てを表示する仕様に変更することは可能でしょうか?もしお分かりでしたら変更箇所を教えていただけると嬉しいです。よろしくお願いいたします。

  1. 2011年2月23日

    […] 投稿した画像の一覧が欲しいなという単純な動機からページ作成に掛かり、なんとか投稿画像 一覧の追加が出来ました。 WordPressにすべての画像一覧ページを設置するのページを元にいじりました。 […]

コメントを残す

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください