こんにちは、インスパイアの岩下です。

本日はWordPressプラグインのAdvanced Custom Fieldsの繰り返しフィールドで
サムネイル付きのスライダーを実装します。

1.slickスライダーの導入

スライダーにはslickスライダーを使用するので
下記からダウンロードしてヘッダーに読み込みをさせてください。

slick公式サイト

下の方に「Download Now」があるのでダウンロードして
slick.jsとslick.cssをサーバー上にアップロードしてください。

 

2.acfで画像とキャプションの繰り返しフィールド作成

acfで繰り返しフィールドを作成します。
今回は例として

繰り返しフィールド：photo-group
画像フィールド：p-photo
テキストフィールド：p-photo-cap

と設定しました。ラベルはお好みで自由にどうぞ。

 

3.フィールドを吐き出すPHPを用意

カスタムフィールドを出したい箇所に書きコードを記述

<div class="slider-box">
<div class="slick-box type_img main-slide asNavFor">
    <?php if ( have_rows( 'photo-group' ) ) : ?>
    <?php while ( have_rows( 'photo-group' ) ) : the_row(); ?>
    <div class="slide">
        <p class="titles"><?php the_sub_field( 'p-photo-cap' ); ?></p>
        <p class="image">
            <?php $p_photo = get_sub_field( 'p-photo' ); ?>
            <img src="<?php echo esc_url( $p_photo['url'] ); ?>" alt="">
        </p>
    </div>
    <?php endwhile; ?>
    <?php endif; ?>
</div>
<div class="thumb-box"></div>
</div>

 

4.上記HTMLのクラスを入れたslickカスタムJSを追記

下記JSを追記します。

/*custam*/
jQuery(function($){
var s_count = $('.slick-box.type_img .slide').length;
var plusAll = '';
for(var i=0; i<s_count; i++){
    var img = $('.slick-box.type_img .slide').eq(i).find('.image');
    $('.thumb-box').append('<div class="slide"></div>');
    var slide = $('.thumb-box .slide').eq(-1);
    img.clone().appendTo(slide);
}
$('.slick-box.type_img.asNavFor').slick({
    infinite: true,
    slidesToShow: 1,
    slidesToScroll: 1,
    prevArrow: '<i class="fas fa-chevron-left"></i>',
    nextArrow: '<i class="fas fa-chevron-right"></i>',
    fade: true,
    autoplay: true,
    autoplaySpeed: 6000,
    draggable: false,
    swipe: true,
    swipeToSlide: true,
    touchMove: false,
    pauseOnFocus: false,
    pauseOnHover: false,
    pauseOnDotsHover: false,
    asNavFor: '.thumb-box' //サムネイルのクラス名
});
$('.thumb-box').slick({
    infinite: true,
    slidesToShow: 8,
    slidesToScroll: 1,
    asNavFor: '.slick-box.type_img.asNavFor', //スライダー本体のクラス名
    focusOnSelect: true,
    pauseOnFocus: false,
    pauseOnHover: false,
    pauseOnDotsHover: false,
    responsive: [{
        breakpoint: 767,
        settings: {
            slidesToShow: 2,
            slidesToScroll: 1,
        }
    }]
});
    $('.slideNext').on('click', function () {
        $(slider).slick("slickNext");
    });

    $('.slidePrev').on('click', function () {
        $(slider).slick("slickPrev");
    });

});

 

5.調整用CSSを追記

CSSは用途に合わせて変えてください。

/* slick */
.slick-box.type_img .slide{
    padding: 0;
    background-color: #f3f8e3;
    border: 1px solid #ffffff;
    border-right: none;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    position: relative;
    margin-bottom: 50px;
}
.slick-box.type_img .titles{
    display: block;
    padding: 10px 15px;
    font-size: 125%;
    font-weight: bold;
    letter-spacing: 1pt;
    text-align: center;
    background-color: rgba(255,255,255,0.8);
    position: absolute;
    bottom: -45px;
    left: 50%;
    transform: translate(-50%, 0%);
    -webkit-transform: translate(-50%, 0%);
    -ms-transform: translate(-50%, 0%);
}
.slick-box.type_img .image{
    margin-bottom: 0;
    line-height: 0;
}
.thumb-box .slick-slide p.image img {
    height: 125px;
    width: 125px;
    object-fit: cover;
}

.slick-box.type_img .image img {
    width: 100%;
    height: 575px;
    object-fit: contain;
}
.slick-slider i {
    font-size: 2.5em;
    position: absolute;
    top: 50%;
    transform: translate(0%, -50%);
    -webkit-transform: translate(0%, -50%);
    -ms-transform: translate(0%, -50%);
    z-index: 1;
}

.slick-slider i.fa-chevron-left {
    left: 3%;
}

.slick-slider i.fa-chevron-right {
    right: 3%;
}

 

後は作成したカスタムフィールドにいくつか画像を入れて動作確認をしてください。
single.phpに入れて使うことで記事毎にスライダーを入れられるので複数画像で詳細を紹介したい
商品紹介や不動産の物件情報などに使えるかと思います。