大阪のホームページ制作会社 株式会社TREVO
技術ブログ

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

2021.01.27.

ACF

WordPress

twitter Facebook Pocket LINE はてブ

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

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

チェックボックスの設置

Advanced Custom Fieldsのチェックボックス

選択肢

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

デフォルト値

フィールドの値を最初に編集するときに選択されたデフォルト値。
ラベルではなく、値のみを入力します。

レイアウト

チェックボックス入力のレイアウトの向きです。「垂直」または「水平」から選択できます。

Toggle

すべての入力のオン/オフを切り替えるためのチェックボックスを追加します。

返り値の形式

ACF 関数が返す値の形式を指定します。「Value」、「ラベル」、「Both (Array)」から選択します。

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

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

<p>Colors: <?php the_field('fruits'); ?></p>

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

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

<?php
$fruits = get_field('fruits');
if( $fruits ): ?>
<ul>
<?php foreach( $fruits as $fruit ): ?>
<li><?php echo $color; ?></li>
<?php endforeach; ?>
</ul>
<?php endif; ?>

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

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

<?php
// フィールドの設定と値をロード
$field = get_field_object('fruits');
$fruits = $field['value'];

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

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

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

<?php
$colors = get_field('fruits');
if( $fruits ): ?>
<ul>
<?php foreach( $fruits as $fruit ): ?>
<li><?php echo $color['value']; ?><?php echo $color['label']; ?></span></li>
<?php endforeach; ?>
</ul>
<?php endif; ?>

チェックの入った記事のみを表示する場合

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

<ul>
<?php $args = array(
'posts_per_page' => 10, //表示件数全件表示は-1
'meta_key' => 'fruits', //カスタムフィールドのキー
'meta_value' => 'apple', //カスタムフィールドの値
'meta_compare' => 'LIKE' //'meta_value'の比較演算子
);
$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(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></li>

<?php endwhile; endif; wp_reset_postdata(); ?>
</ul>

ACFまとめ記事

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

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

twitter Facebook Pocket LINE はてブ