Bloosh Company

2021年8月7日

Development>WordPress

ACFとlightgallery.jsで無限に画像を追加する

, ,

Advanced Custom Fields(以下、ACF)っていう便利なプラグインがありますが、同じ項目のものを無限に追加できるようにするには有料版が必要になります。(繰り返しフィールドのこと。)
無料版でも、画像をたくさん追加したい!追加した画像をギャラリーにしたい!という記事です。
 
今回はlightgallery.jsを使用します。
設置方法は基本のページを見てください。ギャラリーを作成する前で止めてね。
 
そして、ACFではWysiwigエディタ項目を設置します。
Wysiwygって聞き慣れないですね。「What You See Is What You Get」の略で「見たまま表示」とかそんな意味だそうです。

タブ・・・ビジュアル&テキスト
ツールバー・・・Full
メディアアップロードボタンを表示するか?・・・はい
に設定してください。
 
保存したらACFのフィールドが出てきます。

「メディアを追加」から好きなだけ画像を追加してください。
 
そしたら、テンプレートに下記のソースコードを追加します。

<?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];
		}
	}
?>
<div id="gallery">
<?php
	foreach ($photo_ids as $i => $id) :
		$thum = wp_get_attachment_image_src($id, "thumbnail")[0];
		$full = wp_get_attachment_image_src($id, "full")[0];
?>

	<a href="<?php echo $full ?>" data-exthumbimage="<?php echo $thum;?>">
		<img src="<?php echo $thum ?>">
	</a>

	<?php endforeach; ?>
</div>

 
preg_match_all()wp-image-から始まる画像IDを取り出してるわけであります。
そして、最後にJSのソースコードで動かします。

<script type="text/javascript">
	lightGallery(document.getElementById('gallery'), {
		thumbnail:true
	});
</script>

 
本文がなければ、ACFを使わずに本文に画像のみ追加して、get_the_content()でも応用できます。

ACFとlightgallery.jsで無限に画像を追加する #WordPress #ACF #AdvancedCustomFields #lightgalleryjs

<<次の記事

ACFとswiper.jsで無限に画像を追加する

前の記事>>

Welcartにメッセージカードオプションを追加する!