ブルーシュ

IT技術の勉強記録

ホーム > Tips > WordPress

ACF無料版で無限に画像を追加して、Swiperで動かす方法!

, ,

WordPressにて、たくさんの画像をスライドさせたい場合の解説をします。
スライダーライブラリSwiperと、WordPressのプラグインAdvanced Custom Fieldsを使用します。
Swiperのバージョンは8です。
Swiperを設置するまでの方法はこちら→Swiper 基本の使い方
 
さて、前回のACFとlightgallery.jsで無限に画像を追加するに引き続き、ACF画像便利シリーズです。今回はSwiperを使います。
前回と同じく、ACFでフィールド作成し、画像の追加まで済ませてください。
 

HTMLマークアップ

テンプレートには以下のソースコードを追加します。

<div class="swiper">
	<div class="swiper-wrapper">

<?php
	$photo = get_field("画像");
	$photo_ids = array();
	if(!empty($photo)){
		preg_match_all( '/wp-image-([0-9]+)/', $photo, $matches );
		if($matches) {
			$photo_ids = $matches[1];
		}
	}

	foreach ($photo_ids as $photo_id) {

		$attr = array(
			"loading"=> "lazy",
			"alt"	=> get_bloginfo( 'name' ),
			"class" => "swiper-slide"
		);

		echo wp_get_attachment_image($photo_id, "full", 0, $attr);
	}
?>

	</div>
	<div class="el"></div>
	<div class="swiper-button-prev"></div>
	<div class="swiper-button-next"></div>
</div>

前回と同様、画像IDを取り出して画像作成しています。
ポイントはクラス名にswiper-slideを追加してる点です。
Swiperはswiperクラスのブロックとswiper-wrapperクラスのブロックで囲み、スライドする要素にはswiper-slideクラスを付与するのが決まりです。
 

swiper-conf.jsで実際に動かす

const swiper1 = new Swiper('.swiper', {
	loop: true,
	speed: 600,
	autoplay:{
		delay:3000,
		disableOnInteraction: false
	},
	effect:"slide",

	navigation: {
		nextEl: '.swiper-button-next',
		prevEl: '.swiper-button-prev'
	},

	pagination: {
		el: '.el',
		type: 'bullets',
		clickable: true
	}

});

上記のJSファイルはswiper-bundle.min.jsのあとに読み込んでください。
スライドとかフェードとか設定はお好みで変更してください。
 

参考になりそうなTips

ACF無料版で無限に画像を追加して、Swiperで動かす方法! #WordPress #ウェブデザイン #ウェブ制作 #WEBデザイン #WEB制作 #ACF #AdvancedCustomFields #Swiper

作者の似顔絵

秋田市在住のプログラマーです。
プログラミングを始めて18年、まだまだ日々勉強。調べたことをブログにまとめていきます。
記事の感想・質問・間違い指摘などはツイッター ( @blooshcompany ) へお願いします。