アトリエロワ

Advanced Custom Fieldsとslick.jsスライダー

Advanced Custom Fields

フィールドタイプ：ギャラリー
返り値のフォーマット：画像 配列
フィールド名：voice_images

slick.jsの画像呼び出し（サムネイル付き）

テンプレートに記述
●●voice_images●●をフィールド名に書き換え

<?php // ACF Gallery Field の表示
$images = get_field('●●voice_images●●'); // フィールド名の指定
if( $images ):
?><ul class="slider">
<?php foreach( $images as $image ): ?>// ループ処理の開始
<li>
<img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />
</li>
<?php endforeach; ?>
<?php endif; ?><?php wp_reset_query();?>
</ul>

<?php // ACF Gallery Field　サムネイル の表示
$images = get_field('●●voice_images●●'); // フィールド名の指定
if( $images ):
<ul class="thumb">
<?php foreach( $images as $image ): ?>// ループ処理の開始
<li>
<img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />
</li>
<?php endforeach; ?>
<?php endif; ?><?php wp_reset_query();?>
</ul>

HOME > wordpress設計術 > Advanced Custom Fieldsとslick.jsスライダー

wordpress設計術

wordpress設計術

+ More