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

投稿日:2024.12.19.
更新日:2025.04.12.

WordPress

ACF

株式会社TREVOの月額制ホームページ制作サービス
PR

板浪 雅樹
執筆・編集 板浪 雅樹

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を使い、親フィールドと子フィールドのデザインを調整します。

関連の記事

お問い合わせ
CONTACT

ホームページ制作に関することなら
お気軽にご相談ください

お電話でのお問い合わせはこちら

0120-838-567

平日9:00~18:00まで 定休日:土 日 祝