カスタムフィールドで登録した画像の一番目をメイン画像に、そして、それ以外をサムネイル表示。

しかも、枚数を指定して表示させたい。

そのうえ、サムネイルをクリックで、メイン画像と切り替える!

そのコードがこれ。

<!– 投稿のループ開始 –>
<?php if(have_posts()): while(have_posts()): the_post(); ?>

<div class=”works_box small-12 large-6 columns”>

<!– メイン画像表示 –>
<div class=”main_img”>
<?php
// 一覧写真はループ行の最初の写真を表示する
$photos = $cfs->get(‘photo’);
$first_photo = reset($photos);

// ラージサイズ(560×440)
$first_photo_src = wp_get_attachment_image_src( $first_photo[‘image’] , array(560, 440));
$first_photo_src = $first_photo_src[0];
?>
<img src=”<?php echo esc_attr($first_photo_src); ?>” style=”width:560px” alt=””>
</div>

<!– サムネイル画像5枚 表示 –>
<ul class=”clearfix”>
<?php
$i = 0; //カウンターをセット 0から開始

foreach($photos as $photo): //カスタムフィールドのループを回す
?>

<?php
if( $i > 5 )
continue; //カウンター 5以上になったらcontinueでループを抜ける

// サムネイル(150×150)
$thumbnail_photo_src = wp_get_attachment_image_src( $photo[‘image’] , ‘thumbnail’);
$thumbnail_photo_src = $thumbnail_photo_src[0];
// ラージサイズ(560×440)
$large_photo_src = wp_get_attachment_image_src( $photo[‘image’] , array(560, 440));
$large_photo_src = $large_photo_src[0];
?>

<li class=”small-2 large-2 columns”><a onclick=”changeThumbnail(1, ‘<?php echo esc_attr($large_photo_src); ?>’, ‘ ‘)”><img src=”<?php echo esc_attr($thumbnail_photo_src); ?>” ></a></li>

<?php
$i++; //カウンター ループ1回で1カウントup
endforeach;
?>

</ul>

<a href=”<?php the_permalink(); ?>”><h3><?php the_title(); ?></h3></a>
</div>

<?php endwhile; endif; ?>

 

解説すると。