基本的な出力方法と応用方法
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; ?>