ACF等の繰り返しフィールドで段落数を取得する方法

2024.12.19.

WordPress

ACF

X Facebook Pocket LINE はてブ

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

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で適切にデザインすることをおすすめします。

経歴: 映像制作の専門学校を卒業後、映像制作(編集・撮影)でのアシスタント、カーナビゲーション用の3DCG制作、PS2用の3DCGゲーム背景制作、16ミリフィルムのデジタル変換業務等を経てWEB制作部門のある会社に就職。株式会社TREVOでディレクション、SEO対策、CMS開発、3DCG制作、映像制作を担当

X Facebook Pocket LINE はてブ

関連の記事

お問い合わせ
CONTACT

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

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

0120-838-567

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