ACFでチェックボックスの表示方法と分岐 | 大阪 ホームページ制作 株式会社TREVOの技術ブログ

技術ブログ

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

2024.12.11.

WordPress

ACF

X Facebook Pocket LINE はてブ

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

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

チェックボックスの設置

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のフィールド一覧

大阪のホームページ制作会社TREVOでは、ホームページ制作に関する情報を掲載しています。最短2日で仮サイトを公開するサービスやSEO対策に特化したホームページ制作、オリジナルホームページデザイン、ライティング、リスティング広告、WEBマーケティングなどのサービスをご紹介しています。

X Facebook Pocket LINE はてブ
WEB無料相談