![](https://cxg-design.jp/wp-content/uploads/2024/05/acfslickslider_thumb-1.png)
ACFの画像で、レスポンシブ対応のslickスライダーを作成
スライダーはSmart Sliderなど、プラグインでも多くのものがあります。ただ、シングルページで表示場所が固定の場合、JavaScriptでも対応できます。今回はACFの画像で、レスポンシブ対応のslickスライダーを作成します。
![](https://cxg-design.jp/wp-content/uploads/2024/05/b05b261c03acb899e3af8c939828b627.png)
出典 : slick
今回のDEMOは、ドーナツ画像のスライダーです。
5枚の画像をスライダーにしています。PCでは、左右の画像が見えるようになっています。
ACF設定
5つのフィールドを作成します。フィールドタイプは、画像です。フィールドラベルに編集画面に表示する名前、フィールド名にPHPに入力する名前を設定します。戻り値の形式は、画像配列です。ライブラリはすべてを選択します。
![](https://cxg-design.jp/wp-content/uploads/2024/05/8cd272fb675a3e86b9e9770495700494.png)
フィールドタイプは、画像
設定項目 | 設定値 |
---|---|
フィールドタイプ | 画像 |
フィールドラベル | スライド01 |
フィールド名 | add_slickslide01 |
戻り値の形式 | 画像配列 |
ライブラリ | すべて |
同じように残りのフィールドを作成します。これで、ACF設定は完了です。
![](https://cxg-design.jp/wp-content/uploads/2024/05/4c9f5d3ca19f755d319e8db8a456df46.png)
同じように残りのフィールドを作成
コード
まず、functions.phpにjQuery、SlickのCSS、JavaScriptを読み込みます。
//jQuery
wp_enqueue_script('jq-script', 'https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js');
//slick
wp_enqueue_script('slick-script', 'https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js', array(), '', true);
wp_enqueue_style('slick_styles', 'https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css');
JavaScriptファイルを作成し、下記コードを入力し、読み込みます。
$(".slide-items").slick({
autoplay: true,
autoplaySpeed: 3000,
infinite: true,
cssEase: 'linear',
pauseOnFocus: false,
pauseOnHover: false,
pauseOnDotsHover: false,
centerMode: true,
dots: true,
slidesToShow: 1,
variableWidth: true,
dotsClass: "slide-dots",
prevArrow: '<div class="slide-prev"></div>',
nextArrow: '<div class="slide-next"></div>',
});
シングルページループ内に下記コードを入力します。
<ul class="slide-items">
<?php
$image = get_field('add_slickslide01');
if( $image ):
// Image variables.
$url = $image['url'];
$title = $image['title'];
$alt = $image['alt'];
// Thumbnail size attributes.
$size = 'large';
$thumb = $image['sizes'][ $size ];
?>
<li>
<img src="<?php echo esc_url($thumb); ?>" alt="<?php echo esc_attr($alt); ?>" />
</li>
<?php endif; ?>
<?php
$image = get_field('add_slickslide02');
if( $image ):
// Image variables.
$url = $image['url'];
$title = $image['title'];
$alt = $image['alt'];
// Thumbnail size attributes.
$size = 'large';
$thumb = $image['sizes'][ $size ];
?>
<li>
<img src="<?php echo esc_url($thumb); ?>" alt="<?php echo esc_attr($alt); ?>" />
</li>
<?php endif; ?>
<?php
$image = get_field('add_slickslide03');
if( $image ):
// Image variables.
$url = $image['url'];
$title = $image['title'];
$alt = $image['alt'];
// Thumbnail size attributes.
$size = 'large';
$thumb = $image['sizes'][ $size ];
?>
<li>
<img src="<?php echo esc_url($thumb); ?>" alt="<?php echo esc_attr($alt); ?>" />
</li>
<?php endif; ?>
<?php
$image = get_field('add_slickslide04');
if( $image ):
// Image variables.
$url = $image['url'];
$title = $image['title'];
$alt = $image['alt'];
// Thumbnail size attributes.
$size = 'large';
$thumb = $image['sizes'][ $size ];
?>
<li>
<img src="<?php echo esc_url($thumb); ?>" alt="<?php echo esc_attr($alt); ?>" />
</li>
<?php endif; ?>
<?php
$image = get_field('add_slickslide05');
if( $image ):
// Image variables.
$url = $image['url'];
$title = $image['title'];
$alt = $image['alt'];
// Thumbnail size attributes.
$size = 'large';
$thumb = $image['sizes'][ $size ];
?>
<li>
<img src="<?php echo esc_url($thumb); ?>" alt="<?php echo esc_attr($alt); ?>" />
</li>
<?php endif; ?>
</ul>
CSSで、スタイルを整えます。
.slide-items {
margin: auto;
}
.slide-items img {
height: 60vh;
max-height:700px;
margin: auto;
}
/* Dots */
.slide-dots.slick-slider{
margin-bottom: 30px;
}
.slide-dots{
position: absolute;
bottom: -40px;
display: block;
width: 100%;
padding: 0;
margin: 0;
list-style: none;
text-align: center;
}
.slide-dots li{
position: relative;
display: inline-block;
width: 20px;
height: 20px;
margin: 0 2px;
padding: 0;
cursor: pointer;
}
.slide-dots li button{
font-size: 0;
line-height: 0;
display: block;
width: 20px;
height: 20px;
cursor: pointer;
color: transparent;
border: 0;
outline: none;
}
.slide-dots li button:hover,
.slide-dots li button:focus{
outline: none;
}
.slide-dots li button:hover:before,
.slide-dots li button:focus:before{
opacity: 0.8;
}
.slide-dots li button:before{
font-style:normal;
line-height: 24px;
border-radius:20px;
position: absolute;
top: 0;
left: 0;
width: 12px;
height: 12px;
content: '';
text-align: center;
background: #aaa;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.slide-dots li.slick-active button:before{
opacity: .75;
color: red;
border:none;
background: #000;
}
@media screen and (min-width: 740px) {
.slide-prev,
.slide-next {
position: absolute;
top: 44%;
cursor: pointer;
outline: none;
border-top: 2px solid #272727;
border-right: 2px solid #272727;
height: 20px;
width: 20px;
z-index:5;
}
.slide-prev {
left: 30px;
transform: rotate(-135deg);
}
.slide-next {
right: 30px;
transform: rotate(45deg);
}
}
設置
編集画面に、画像フィールドが表示されるので、画像を追加をクリックし、画像を選択します。これで、1つ目のスライド設定完了です。同じように、5つのフィールド全てに画像を設定します。
![](https://cxg-design.jp/wp-content/uploads/2024/05/08262bf5dbc203b66826439e22ce4689.png)
画像を追加をクリック
![](https://cxg-design.jp/wp-content/uploads/2024/05/830c9bf9f78aaa326f246e7d987eb87d.png)
画像を選択
![](https://cxg-design.jp/wp-content/uploads/2024/05/21a904136d8b70d92d514ca19f747db0.png)
1つ目のスライド設定完了
![](https://cxg-design.jp/wp-content/uploads/2024/05/dc9118094b42a2b0442dacce9e8ea50c.png)
5つのフィールド全てに画像を設定
以上で今回の説明は終了です。画像設定のみで、スライダーが作成できるので、大変便利です。レスポンシブ対応に設定しているので、SP、PC両方で綺麗に見れます。Smart Sliderでもスライダーは作成できますが、スタイル固定で、シンプルなスライダーにする場合、今回の設定がオススメです。