WordPress – 画像をランダムに表示させる

画像をランダム表示といっても色々な方法がありますがこの記事では【管理画面】＞【メディア】>【メディアライブラリ】に投稿されている画像をランダムで表示させる方法とサムネイル画像のみを取得してランダムで表示させる方法をご紹介します。

メディアライブラリの画像をランダム表示

このコードを使用すると【管理画面】＞【メディア】>【メディアライブラリ】に格納されている画像すべてを取得してランダムに表示する仕様になっています。つまり【投稿】以外にも【固定ページ】などで使われている画像も取得する仕様になっています。

サンプルコード

簡単に説明すると「メディア」に格納されている画像を10件取得してそれをランダムで表示させるコードになっています。

<div class="gallery">
	<?php
		$args = array(
			'post_type' => 'attachment',
			'posts_per_page' => 10,
			'orderby' => 'rand',
			'post_mime_type' => 'image',
		);
		$gallery_post = get_posts($args);
	if(have_posts()):
		foreach($gallery_post as $post):
	?>
		<a href="<?php the_permalink();?>"><img src="<?php echo wp_get_attachment_url($post->ID); ?>"></a>
	<?php 
		endforeach;
	endif;
	?>
</div>

• posts_per_page‥画像を表示する件数。
• orderby‥ランダムで表示。その他にも、更新日順などもある。
• wp_get_attachment_url‥添付ファイルのURLを取得。

画像一覧表示の仕組みについて

<img src="<?php echo wp_get_attachment_url($post->ID); ?>">のみのコードだと画像だけ表示されてちょっと寂しかったので、どこの画像で使用されている画像なのかわかるように記事ページへリダイレクトしています。

上記のコードだけだと遷移先はattachment.phpへ遷移するのでattachment.phpに下記のコードを記述します。

<?php 
	if($post->post_parent){
		wp_redirect(get_permalink($post->post_parent), 301);
	}else{
		wp_redirect(home_url(), 302);
	}
?>

サムネイル画像のみを取得してランダム表示

こちらもget_posts()を使用してサムネイル画像をランダムで表示させます。

サンプルコード

'post_type' => 'post'とすることで投稿タイプ「投稿」からデータを取ってきてくれます。

<div class="gallery">
	<?php
		$args = array(
			'post_type' => 'post',
			'posts_per_page' => 5,
			'orderby' => 'rand',
		);
		$gallery_post = get_posts($args);
	if(have_posts()):
		foreach($gallery_post as $post):
	?>
		<a href="<?php the_permalink();?>"><?php the_post_thumbnail(); ?></a>
	<?php 
		endforeach;
	endif;
	?>
</div>