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の加算子(++)を利用して、繰り返しフィールドのループ内でカウントを進め、番号を表示します。この番号は数字だけでなく、アルファベットや任意の文字列で表現することも可能です。

段落数の取得方法

以下のコードでは、繰り返しフィールドの各項目に番号を表示します。

「<?php echo $i; ?>」が段落の数字となります。
今回は数字を入れていますが、アルファベット等でも対応可能です。

<?php if( have_rows('フィールド名') ): $i = 0; ?>
    <?php while( have_rows('フィールド名') ): the_row(); $i++; ?>
        <?php echo $i; ?>
        <!-- 繰り返しフィールドの中身を入れて下さい。 -->
    <?php endwhile; ?>
<?php endif; ?>

コードの解説

$i = 0

番号をカウントするための変数 $i を初期化(0に設定)します。

$i++

繰り返しループごとに $i を1ずつ加算します。

番号の出力

<span class="number"><?php echo $i; ?></span> で現在の番号を出力します。

繰り返しフィールドのデータ表示

the_sub_field('サブフィールド名') を使い、フィールド内のデータを表示します。

出力結果例

上記コードを適用すると、以下のようなHTMLが出力されます。

<div class="item">
    <span class="number">1</span>
    <p>フィールド1の内容</p>
</div>
<div class="item">
    <span class="number">2</span>
    <p>フィールド2の内容</p>
</div>
<div class="item">
    <span class="number">3</span>
    <p>フィールド3の内容</p>
</div>

アルファベットや他の形式で表示する方法

番号をアルファベットにしたい場合は、chr() 関数を使用します。

<?php if ( have_rows('フィールド名') ): $i = 65; /* ASCIIコード65はA */ ?>
    <?php while ( have_rows('フィールド名') ): the_row(); ?>
        <div class="item">
            <span class="letter"><?php echo chr($i); ?></span>
            <p><?php the_sub_field('サブフィールド名'); ?></p>
        </div>
        <?php $i++; ?>
    <?php endwhile; ?>
<?php endif; ?>

出力結果例

<div class="item">
    <span class="letter">A</span>
    <p>フィールド1の内容</p>
</div>
<div class="item">
    <span class="letter">B</span>
    <p>フィールド2の内容</p>
</div>
<div class="item">
    <span class="letter">C</span>
    <p>フィールド3の内容</p>
</div>

注意点

繰り返しフィールドが存在しない場合

if ( have_rows('フィールド名') ) でフィールドの存在を確認し、エラーを防ぎます。

番号のリセット

ループ外で $i を初期化しておくことが重要です。これにより、番号が意図せず引き継がれるのを防ぎます。

スタイル調整

番号や連番を見やすくするため、CSSで適切にデザインすることをおすすめします。

関連の記事

CONTACT

ホームページ制作・Web制作に関するご質問やご相談は、
下記フォームよりお問い合わせください。

無料のお見積りや初回のご相談も承っておりますので、「まだ検討中」「ちょっと話を聞いてみたい」といった段階でも大歓迎です。
現状のホームページ診断も無料で実施中です。

0120-83-8567
平日9:00~18:00まで 定休日:土 日 祝