ACFの繰り返しフィールドの中に繰り返しフィールドを入れる時のコード

執筆・編集 板浪 雅樹2005年から WEB 業界一筋。500サイト超を手がける SEO・WordPress のエキスパート。「公開後こそ本番」を掲げ、データ分析とユーザー視点で成果を引き出す運用を提案。

2005年に制作会社へ入社後、プログラマーからキャリアをスタート。サーバー構築・データベース設計で培った技術を強みに、WordPress テーマ/プラグイン開発やサイト移行の難案件を多数担当してきました。
2010年以降は SEO エンジニアとしても活動領域を拡大。コンテンツ設計・内部リンク最適化・高速化チューニングにより、競合の激しいビッグキーワードで上位獲得を実現してきました。
現在は TREVO のウェブディレクターとして、要件定義から運用改善まで一気通貫でリード。AI ライティングや GA4/Looker Studio を活用したレポーティング手法を開発し、「数字で説明できるサイト運用」をポリシーにクライアントの ROI 最大化を支援しています。
趣味/強み:筋トレとランニングで日々の集中力をキープ。複雑な課題を“仕組み”で解決するのが得意。
モットー:「サイトは資産。改善を止めた瞬間から価値は目減りする」
WordPressのACF(Advanced Custom Fields)を使用すると、カスタムフィールドで繰り返しフィールド(リピートフィールド)を作成できます。この記事では、繰り返しフィールドの中にさらに繰り返しフィールドを入れ、データを制御・表示する方法について解説します。
繰り返しフィールドの中に繰り返しフィールを入れる
親フィールド名:○○○
子フィールド名:△△△
以下のコードを使用して、親フィールドのループ内で子フィールドを表示します。
<?php if (have_rows('○○○')): ?>
<?php while (have_rows('○○○')): the_row(); ?>
<!-- 親フィールド○○○の中身をここに記述 -->
<div class="parent-item">
<h2><?php the_sub_field('親フィールド内のタイトル'); ?></h2>
<!-- 子フィールド△△△のループ -->
<?php if (have_rows('△△△')): ?>
<ul class="child-list">
<?php while (have_rows('△△△')): the_row(); ?>
<li>
<p><?php the_sub_field('子フィールド内のテキスト'); ?></p>
</li>
<?php endwhile; ?>
</ul>
<?php endif; ?>
</div>
<?php endwhile; ?>
<?php endif; ?>
コードの説明
親フィールド(○○○)のループ
have_rows('○○○')
で親フィールドの繰り返しをチェック。
while (have_rows('○○○')): the_row();
でループを開始し、親フィールド内のデータを処理。
子フィールド(△△△)のループ
親フィールドのループ内で have_rows('△△△')
をチェック。
while (have_rows('△△△')): the_row();
で子フィールド内のデータを処理。
the_sub_field()
を使用
親や子フィールドの各データを取得して表示します。
HTML構造
親フィールドの内容を <div>
で囲み、その中に子フィールドを <ul>
と <li>
でリスト表示。
出力結果
<div class="parent-item">
<h2>親アイテム1</h2>
<ul class="child-list">
<li><p>子アイテムA</p></li>
<li><p>子アイテムB</p></li>
</ul>
</div>
<div class="parent-item">
<h2>親アイテム2</h2>
<ul class="child-list">
<li><p>子アイテムC</p></li>
<li><p>子アイテムD</p></li>
</ul>
</div>
応用例:段落番号やカスタムスタイルの追加
段落番号の追加
段落番号を追加したい場合、PHPのカウンター変数を使用します。
<?php if (have_rows('○○○')): $parent_count = 0; ?>
<?php while (have_rows('○○○')): the_row(); $parent_count++; ?>
<div class="parent-item">
<h2><?php echo $parent_count . '. '; ?><?php the_sub_field('親フィールド内のタイトル'); ?></h2>
<?php if (have_rows('△△△')): $child_count = 0; ?>
<ul class="child-list">
<?php while (have_rows('△△△')): the_row(); $child_count++; ?>
<li><?php echo $child_count . '. '; ?><?php the_sub_field('子フィールド内のテキスト'); ?></li>
<?php endwhile; ?>
</ul>
<?php endif; ?>
</div>
<?php endwhile; ?>
<?php endif; ?>
出力結果
<div class="parent-item">
<h2>1. 親アイテム1</h2>
<ul class="child-list">
<li>1. 子アイテムA</li>
<li>2. 子アイテムB</li>
</ul>
</div>
<div class="parent-item">
<h2>2. 親アイテム2</h2>
<ul class="child-list">
<li>1. 子アイテムC</li>
<li>2. 子アイテムD</li>
</ul>
</div>
注意点
フィールドの存在確認
have_rows()
を使ってフィールドの存在を必ず確認し、エラーを防ぎます。
フィールドの構造
ACFの管理画面で、親フィールドと子フィールドの階層構造が正しく設定されていることを確認します。
スタイルの調整
必要に応じてCSSを使い、親フィールドと子フィールドのデザインを調整します。
関連の記事
-
板浪雅樹
-
板浪雅樹
-
板浪雅樹
-
TREVOスタッフ
-
板浪雅樹
-
アメリカ在住経験のある知人にFacebookについて聞いてみた
TREVOスタッフ