基本的な出力方法と応用方法
WordPressの必須プラグインACF(Advanced Custom Fields)の有料アドオンに「 Repeater Field」がある。個人的には持っていないが勤務先で使う。あらためて基本的な出力方法と応用である一つ目だけを出す(もしくは一つずつ個別に出す)方法をメモ。
基本的な出し方(表示する方法)
公式なドキュメントはRepeater。
基本
have_rows、the_rowとthe_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; ?>