Advanced Custom Fields PROの繰り返しフィールドで画像を表示する方法を解説します。
目次
繰り返しフィールドの画像を表示する
繰り返しフィールドの名前をimage-repeat、サブフィールドの名前をimageと仮定した場合、以下のコードで画像を繰り返し表示することができます。
<!-- ループ開始 -->
<?php if (have_posts()): ?>
<?php while (have_posts()) : the_post(); ?>
<!-- 繰り返しフィールドを表示 -->
<?php if( have_rows( 'image-repeat' ) ): ?>
<?php while( have_rows( 'image-repeat' ) ): the_row(); ?>
<?php
$img = get_sub_field( 'image' );
$url = $img['sizes']['medium'];
$alt = $img['alt'];
?>
<img src="<?php echo $url ?>" alt="<?php echo $alt ?>">
<?php endwhile; ?>
<?php endif; ?>
<?php endwhile; ?>
<?php endif; ?>$url = $img['sizes']['medium'];のmediumは画像のサイズを指定しています。
画像サイズはthumbnail、medium、large、full、もしくはadd_image_sizeで追加した画像サイズを指定することが出来ます。
繰り返しフィールドの画像を1枚だけ表示する
トップページやアーカイブページでは繰り返しフィールドの画像を1枚だけ表示したいことがあります。
その場合は以下のコードで画像を最初の1枚だけ表示することが出来ます。
<!-- ループ開始 -->
<?php if (have_posts()): ?>
<?php while (have_posts()) : the_post(); ?>
<!-- 繰り返しフィールド画像を1枚のみ表示 -->
<?php
$i = 0;
if( have_rows( 'image-repeat' ) ):
?>
<?php while( have_rows( 'image-repeat' ) ): the_row(); $i++; ?>
<?php
if( $i > 1 ) {
break;
}
$img = get_sub_field( 'image' );
$url = $img['sizes']['medium'];
$alt = $img['alt'];
?>
<div><img src="<?php echo $url ?>" alt="<?php echo $alt ?>"></div>
<?php endwhile; ?>
<?php endif; ?>
<?php endwhile; ?>
<?php endif; ?>繰り返しフィールドの画像をスライダーで表示する
繰り返しフィールドの画像をイメージスライダーで表示したい場合があります。
SlickというjQueryプラグインで繰り返しフィールドの画像をスライドさせる方法を解説します。
Slickを読み込む
<head>タグ内に以下のコードを追加してSlickのcssファイルを読み込みます。
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css"/>
</body>タグの直線に以下のコードを追加してSlickのjsファイルを読み込みます。
すでにjQueryを読み込み済みの場合はslick.min.jsだけ読み込めばOKです。
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>functions.phpで読み込む場合は以下のコードを追加してください。
function my_theme_scripts() {
// cssファイルを読み込む
wp_enqueue_style( 'slick-css', '//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css', array(), null );
wp_enqueue_style( 'slick-theme-css', '//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css', array(), null );
// jsファイルを読み込む
wp_enqueue_script( 'slick-js', '//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js', array('jquery'), null, true );
}
add_action( 'wp_enqueue_scripts', 'my_theme_scripts' );繰り返しフィールドの画像を表示する
イメージスライダーを表示する箇所に以下のコードを追加してください。
繰り返しフィールドの画像を表示するコードとほぼ同じですが、.image-sliderというクラスを付けた<div>を追加しています。
<!-- ループ開始 -->
<?php if (have_posts()): ?>
<?php while (have_posts()) : the_post(); ?>
<!-- 繰り返しフィールドを表示 -->
<?php if( have_rows( 'image-repeat' ) ): ?>
<div class="image-slider">
<?php while( have_rows( 'image-repeat' ) ): the_row(); ?>
<?php
$img = get_sub_field( 'image' );
$url = $img['sizes']['medium'];
$alt = $img['alt'];
?>
<img src="<?php echo $url ?>" alt="<?php echo $alt ?>">
<?php endwhile; ?>
</div>
<?php endif; ?>
<?php endwhile; ?>
<?php endif; ?>Slick用のjQueryを記述する
jsファイルにSlick用のjQueryを記述します。
$(document).ready(function(){
$('.image-slider').slick({
arrows: false,
dots: true,
autoplay: true
});
});WordPressに初めから読み込まれているjQueryを使用する場合、上記のコードではSlickが動作しない場合があります。その場合は以下のコードを試してみてください。
jQuery(function ($) {
$('.image-slider').slick({
arrows: false,
dots: true,
autoplay: true
});
});Slickには色々なオプションがるので、公式サイトか以下の記事で確認してください。
以上で繰り返しフィールドで表示した画像がスライドで表示されます。
まとめ
今回はAdvanced Custom Fields PROの繰り返しフィールドで画像を表示する方法を解説しました。
イメージスライダーにしたりギャラリーのように表示したり色々な活用方法があります。
繰り返しフィールドは有料のAdvanced Custom Fields PROでしか利用できませんが、カスタムフィールドで表現できることが増えるのでぜひ試してみてください。
参考にさせていただいた記事