ACFのギャラリーをSlickスライダーのサムネ付きで表示する

ACF（Advanced Custom Fields）本当に便利だ。彼なしには商売が成り立たない！と思うほど。今後多くなりそうなACFのギャラリーを、Slickスライダーのサムネイル付きギャラリーで表示する方法のメモです。

ギャラリーフィールドはの名前は「product_gallery」です。「slider-nav」はサムネイルナビゲーション。「slider-for」がメイン画像です。サムネイルが上にある形式になっています。

<!--ギャラリーがあればギャラリー、ない場合はアイキャッチ画像表示-->
<?php 
$images = get_field('product_gallery');
if( $images ): ?>
	    <div class="slider-nav">
        <?php foreach( $images as $image ): ?>
            <div>
                     <img src="<?php echo esc_url($image['sizes']['thumbnail']); ?>" alt="<?php echo esc_attr($image['alt']); ?>" />
            </div>
        <?php endforeach; ?>
    </div>
    <div class="slider-for">
        <?php foreach( $images as $image ): ?>
            <div>
                <img src="<?php echo esc_url($image['sizes']['large']); ?>" alt="<?php echo esc_attr($image['alt']); ?>" />
                <p><?php echo esc_html($image['caption']); ?></p>
            </div>
        <?php endforeach; ?>
    </div>

<?php else: ?>
<figure><?php 
$post_thumbnail_id = get_post_thumbnail_id( get_the_ID() );
$image = wp_get_attachment_image_src( $post_thumbnail_id, 'post-thumbnail' );
$thumbnail_title = get_post(get_post_thumbnail_id())->post_title; 
if ( $image ) {
  list($src, $width, $height) = $image;
  echo '<img src="' . esc_attr( $src ) .'" alt="'.$title.'" class="mb10"><div class="small">'.$thumbnail_title.'</div>';
} else {
	echo '<img src="'.get_template_directory_uri().'/assets/img/visual_nowprinting.png">';
}
?></figure>
<?php endif; ?>	

$('.slider-for').slick({
  speed: 500,
  fade: true,
  slidesToShow: 1,
  slidesToScroll: 1,
  arrows: false,
  asNavFor: '.slider-nav'
});
$('.slider-nav').slick({
  slidesToShow: 3,
  slidesToScroll: 1,
  asNavFor: '.slider-for',
  dots: true,
  centerMode: true,
  focusOnSelect: true
});	

これだけで、自由にギャラリーが表示できます。クライアントも入力出来るくらい入力方法も簡単だし。重宝するわ。今度swiperバージョンも作っておこう。