ACFの拡張機能、繰り返しフィールドの使い方【WordPress】

WPのカスタマイズでとっても役に立つカスタムフィールドですが、Advanced Custom Fields(以下ACF) というプラグインに繰り返しフィールド(Repeater Field)という拡張機能があります。

この繰り返しフィールドを活用することで、カスタマイズの幅が広がります。

※繰り返しフィールドを使用するにはPRO版へのアップデートが必要です。

繰り返しフィールドでできること

通常、カスタマイズフィールドは必要な分だけフィールド枠を増やしていく必要がありますが、繰り返しフィールドを使うことで、投稿画面でフィールド枠の増減をすることができます。

例)会社概要の情報をWPで編集可能にする場合

<通常のカスタムフィールドだと>
・会社名の入力欄
・住所の入力欄
・連絡先の入力欄
・代表者の入力欄
など、項目の数だけフィールドを用意する必要がありました。

数を減らしたい、増やしたい場合はACFの編集画面から変更するだけでなく、コーディングデータも編集する手間があります。

<繰り返しフィールドを使えば>
・会社名などの項目名と内容を入れる欄
これをセットするだけで終了です。
あとは使いたい分だけ増やしていくだけです。

繰り返しフィールドにすることで、項目名と内容を自由に記入できるだけでなく数も自由に変更することができ、順序もドラッグアンドドロップで入れ替えることができます。

リピーターフィールドの出力方法

該当ページで使う場合

<?php if(have_rows('繰り返しフィールドのスラッグ')): ?>
<?php while(have_rows('繰り返しフィールドのスラッグ')): the_row(); ?>
<!-- 繰り返しフィールドの内容ここから -->
<?php the_sub_field('サブフィールドスラッグ'); ?>
<!-- 繰り返しフィールドの内容ここまで -->
<?php endwhile; ?>
<?php endif; ?>

入力したページと表示するページが同じ場合は上記のコードで表示できます。

該当ページ以外で使う場合

<?php
$page_id = get_page_by_path('固定ページのスラッグ');
$page_id = $page_id->ID;
?>
<?php if(have_rows('繰り返しフィールドのスラッグ', $page_id)): ?>
<?php $page_counter = 2; ?>//表示件数
<?php while(have_rows('繰り返しフィールドのスラッグ', $page_id)): the_row(); ?>
<?php $page_counter--; ?>
<!-- 繰り返しフィールドの内容ここから -->
<?php the_sub_field('サブフィールドのスラッグ'); ?>
<!-- 繰り返しフィールドの内容ここまで -->
<?php if ($page_counter === 0) break;?>
<?php endwhile; ?>
<?php endif; ?>

入力したページとは違うページで使う(例:Aの固定ページで入力して、Bの固定ページで表示する)場合はコードの書き方が違うので注意してください。

さらに応用することで…

繰り返しフィールドの中に繰り返しフィールドを作ることも可能です。

例)レストランのメニューを編集可能にする

▼ジャンル…前菜
 ∟メニュー名&値段
 ∟メニュー名&値段

▼ジャンル…パスタ
 ∟メニュー名&値段
 ∟メニュー名&値段

という風に各ジャンルに紐づくメニュー名と値段の枠を増やせるだけでなく、ジャンルそのものを増やすことができます。

<?php if(have_rows('繰り返しフィールド(ジャンル)のスラッグ')): ?>
<?php while(have_rows('繰り返しフィールド(ジャンル)のスラッグ')): the_row(); ?>
<!-- ジャンルの内容ここから -->
<?php the_sub_field('ジャンル名のスラッグ'); ?>
<?php if(have_rows('繰り返しフィールド(メニュー)のスラッグ')): ?>
<?php while(have_rows('繰り返しフィールド(メニュー)のスラッグ')): the_row(); ?>
<!-- メニューの内容ここから -->
<?php the_sub_field('メニュー名のスラッグ'); ?>
<?php the_sub_field('値段のスラッグ'); ?>
<?php endwhile; ?>
<?php endif; ?>
<!-- メニューの内容ここまで -->
<?php endwhile; ?>
<?php endif; ?>
<!-- ジャンルの内容ここまで -->

今回はACFの拡張機能のひとつの繰り返しフィールドの使い方を紹介しました。
通常のカスタムフィールドに比べて、入れ子になっていたり同じスラッグを複数書く必要があったりと少しわかりにくいですが、一度覚えてしまえば色々と活用できてとても便利です。

おすすめ記事はこちら!

この記事をシェアする

関連記事

  • 2023.12.30

    案件を切り替える拡張機能「Project Manager」が便利!

    コーディング

  • 2023.12.29

    記事タイトルを行数で制御するCSS

    CSS

    コーディング

  • 2023.12.29

    CSSのホバーを工夫するようになった話

    コーディング

    制作

おすすめ記事

  • 2022.05.31

    超簡単!GoogleMapの色をサイトにあわせて変える方法

    コーディング

    制作

  • 2022.04.22

    【動画編集ソフト】アフターエフェクトとプレミアプロってなにが違うの?違いと使い分けを解説!

    制作

    動画

  • 好きなフォントは?現役WEBデザイナーに聞いてみた!

    2022.06.01

    デザイナーなら好きなフォントの1つや2つあるでしょ?現役WEBデザイナーに好きなフォント聞いてみた!

    デザイン

    制作

×