HOME > WordPress > ACF Repeater Field の基本な出し方と一つ目だけ出す方法

ACF Repeater Field の基本な出し方と一つ目だけ出す方法

基本的な出力方法と応用方法

WordPressの必須プラグインACF(Advanced Custom Fields)の有料アドオンに「 Repeater Field」がある。個人的には持っていないが勤務先で使う。あらためて基本的な出力方法と応用である一つ目だけを出す(もしくは一つずつ個別に出す)方法をメモ。

基本的な出し方(表示する方法)

公式なドキュメントはRepeater

基本

have_rowsthe_rowthe_sub_fieldを使って入力したデータを表示するには以下のソースでOK。

<?php

// リピーターフィールドに値があるか
if( have_rows('repeaterを指定したカスタムフィールドのフィールド名') ):

 	// ループで値がある限り繰り返す
    while ( have_rows('repeaterを指定したカスタムフィールドのフィールド名') ) : the_row();

        // サブフィールド(sub_field_name)の値を表示する
        the_sub_field('repeater fields内のフィールド名');

    endwhile;

else :

    // no rows found

endif;

?>

より実用的

get_sub_fieldを使って各サブフィールドの値を整形して表示するにはこちら。実際はこの形が基本になる。

<?php if( have_rows('repeaterを指定したカスタムフィールドのフィールド名') ): ?>

	<ul class="slides">

	<?php while( have_rows('repeaterを指定したカスタムフィールドのフィールド名') ): the_row(); 

		// vars
		$image = get_sub_field('repeater fields内のフィールド名例「image」');
		$content = get_sub_field('repeater fields内のフィールド名例「content」');
		$link = get_sub_field('repeater fields内のフィールド名例「link」');

		?>

		<li class="slide">

			<?php if( $link ): ?>
				<a href="<?php echo $link; ?>">
			<?php endif; ?>

				<img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt'] ?>" />

			<?php if( $link ): ?>
				</a>
			<?php endif; ?>

		    <?php echo $content; ?>

		</li>

	<?php endwhile; ?>

	</ul>

<?php endif; ?>

$image[‘url’]とか$image[‘alt’]というのは、get_sub_field(‘repeater fields内のフィールド名例「image」’)で取得した内容のうち、’url’だったり’alt’の値だけを抽出しているという感じかな。

応用:一つ目だけを出す(もしくは一つずつ個別に出す)方法

とても基本の話だけど、カウントは0が1個目(→$rows[0])。

<?php

$rows = get_field('repeaterを指定したカスタムフィールドのフィールド名' ); // すべてのrow(内容・行)をいったん取得する
$first_row = $rows[0]; // 1行目だけを$first_rowに格納しますよ~
$first_row_image = $first_row['repeater fields内のフィールド名' ]; // get the sub field value 

// Note
// $first_row_image = 123 (image ID)

$image = wp_get_attachment_image_src( $first_row_image, 'full' );
// url = $image[0];
// width = $image[1];
// height = $image[2];
?>
<img src="<?php echo $image[0]; ?>" />

サブフィールドを1~3個目まで個別に表示する

画像用のサブフィールドがあって

<?php 
if( have_rows('repeaterを指定したカスタムフィールドのフィールド名') ): 
$rows = get_field('repeaterを指定したカスタムフィールドのフィールド名'); ?>
<tr>
   <td>
      <?php //1つ目の画像
      $first = $rows[0];
      $first_image = $first['image'];
      $image = wp_get_attachment_image_src( $first_image, 'medium' );
      if($image) { ?>
         <img src="<?php echo $image[0]; ?>" width="<?php echo $image[1]; ?>" height="<?php echo $image[2]; ?>" alt="xxxx" />
      <?php } ?>
   </td>
   <td>
      <?php //2つ目の画像
      $second = $rows[1];
      $second_image = $second['image'];
      $image = wp_get_attachment_image_src( $second_image, 'medium' );
      if($image) { ?>
         <img src="<?php echo $image[0]; ?>" width="<?php echo $image[1]; ?>" height="<?php echo $image[2]; ?>" alt="xxxx" />
      <?php } ?>
   </td>
   <td>
      <?php //3つ目の画像
      $third = $rows[2];
      $third_image = $third['image'];
      $image = wp_get_attachment_image_src( $third_image, 'medium' );
      if($image) { ?>
         <img src="<?php echo $image[0]; ?>" width="<?php echo $image[1]; ?>" height="<?php echo $image[2]; ?>" alt="xxxx" />
      <?php } ?>
   </td>
</tr>	
<?php endif; ?>
参考サイト

今回の事例用のメモ

今回、リピーターフィールドのサブフィールドから文章(htmlタグあり)を取得して、htmlタグなどもろもろを無くして表示する必要があり、以下のようなソースとなりました(後半は自分が書いてないが)。

<?php 
if( have_rows('repeaterを指定したカスタムフィールドのフィールド名') ): 
$rows = get_field('repeaterを指定したカスタムフィールドのフィールド名'); ?>

<?php
   $first_row = $rows[0];
// vars
   $sample = $first_row['repeater fields内のフィールド名'];
   $sample_str = mb_strimwidth($sample, 0, 300, '...');
   $sample_dump = str_replace('<p>', '', $sample_str);
   $sample_dump = str_replace('</p>', '', $sample_dump);
   $sample_dump = str_replace('<br />', '', $sample_dump);
   $sample_dump = str_replace('<a href="http', '', $sample_dump);
   $sample_dump = str_replace('">', '', $sample_dump);
   $sample_dump = str_replace('</a>', '', $sample_dump);
 ?>

<?php if( $sample ): ?><?php echo $sample_dump; ?><?php endif; ?>">
   
<?php endif; ?>