ACFでチェックボックスの表示方法と分岐

Advanced Custom Fieldsでチェックボックスの制御方法の解説です。
チェックボックスで設定した値をチェックした時に表示したい時に使用するカスタムフィールドです。

チェックボックスの設置

選択肢

値を選択したときに表示される選択肢。それぞれの選択肢を改行して入力します。（例：りんご）
値とラベルをよりコントロールしたい場合は、コロンを使用して両方を指定することができます。（例：apple : リンゴ）

デフォルト値

チェックボックスで設定する選択肢を入力します。改行で複数の選択肢を指定できます。

例：

• りんご
• バナナ
• みかん

より詳細に値とラベルを設定する場合、コロンで区切ります。
例：apple : リンゴ

デフォルト値

チェックが入った状態で初期設定したい値を指定します。値部分のみを入力してください。
例：apple

レイアウト

チェックボックスの表示スタイルを選択できます。

• 垂直（各選択肢が縦に並ぶ）
• 水平（選択肢が横に並ぶ）

Toggle

「すべて選択/解除」を一括で切り替えるトグルボタンを追加できます。

返り値の形式

ACF関数の返り値を以下から選択できます：

• 値（Value）
• ラベル
• 両方（配列形式）（Both (Array)）

チェックしたラベルの値を表示

フィールド名：fruits
<p><code class="language-php">チェックした値を表示: <?php the_field(‘fruits’); ?></p>

チェックした値をリスト表示

フィールド名：fruits

<?php
$fruits = get_field('fruits');
if( $fruits ): ?>
    <ul>
        <?php foreach( $fruits as $fruit ): ?>
            <li><code class="language-markup">チェックした値を表示:<?php echo $fruit; ?></li> <?php endforeach; ?> </ul> <?php endif; ?>

チェックしたラベルを表示

フィールド名：fruits

<?php
$field = get_field_object('fruits');
$checked_fruits = $field['value'];
if( $checked_fruits ): ?>
    <ul>
        <?php foreach( $checked_fruits as $fruit ): ?>
            <li><code class="language-markup">チェックしたラベルを表示:<?php echo $field['choices'][$fruit]; ?></li> <?php endforeach; ?> </ul> <?php endif; ?>

チェックした値とラベルを表示

フィールド名：fruits
値：apple
ラベル：リンゴ

<?php
$fruits = get_field('fruits');
if( $fruits ): ?>
    <ul>
        <?php foreach( $fruits as $fruit ): ?>
            <li>値: <?php echo $fruit; ?>、ラベル: <?php echo $field['choices'][$fruit]; ?></li>
        <?php endforeach; ?>
    </ul>
<?php endif; ?>

リンゴにチェックされた投稿（記事）のみを表示

フィールド名：fruits
値：apple
ラベル：リンゴ

<ul>
    <?php
    $args = array(
        'posts_per_page' => 10,
        'meta_query' => array(
            array(
                'key' => 'fruits', // ACFフィールド名
                'value' => 'apple', // 検索する値
                'compare' => 'LIKE' // 部分一致で検索
            )
        )
    );
    $my_query = new WP_Query($args);
    if ( $my_query->have_posts() ): while ( $my_query->have_posts() ): $my_query->the_post(); ?>
        <li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>
    <?php endwhile; endif; wp_reset_postdata(); ?>
</ul>

ACFまとめ記事

ACFの各フィールドを紹介している記事です。
設定方法にかんしては随時情報を追加しています。

WordPressの更新に便利なAdvanced Custom Fieldsのフィールド一覧

TREVOWP