Advanced Custom Fieldsによるカスタムフィールドの出力 [チェックボックス・ラジオボタン編]

 2016.04.21  2017.09.20

Advanced Custom Fieldsの出力 画像編

カスタムフィールドのチェックボックスとラジオボタンは、実務では選択された項目の値を出力するだけではなく、分岐の条件として本当によ〜く使われます。

まず、下記の情報を基本として進めます。

  • フィールドラベル:色
  • フィールド名:cf_color
  • 選択肢(choices):
    • red : 赤
    • blue : 青
    • yellow : 黄
    • ※redが値、赤が表示名

cf_color

チェックボックス

チェックボックスは複数選択が可能なので、配列で返ってきます。

複数選択した値を全て出力する

多分こんな感じです。(未検証…)
foreachは配列にある各要素を変数に格納して1つずつ取り出すPHPの関数です。

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

選択の有無で条件分岐する

例えば投稿画面で「選択したらTOPページには表示しない」や、「選択したらお問い合わせ情報を表示させる」等、記事によってコンテンツを表示/非表示させたり、処理内容を変えたりすることができます。ラジオボタンでもできるかな。

$checked = get_field('field_name');
if($checked){ //もし項目を選択したら
     //選択した時の処理
}

//逆の場合は...

if( !$checked ){ //もし項目を選択していなかったら
     //選択していない時の処理
}

選択された項目に対して処理を行いたい場合

複数選択してそれらに対するアイコン画像を表示させたい場合、例えば宿泊施設のサービスや化粧品の肌質をアイコンで表示させる場合などに使えそうですね。
※in_array関数は配列に指定した値があるか検索し、値が見つかった場合はtrue、見つからなかった場合はfalseを返す関数です。

<?php
$selected = get_field('cf_color');
if( in_array('red', $selected ) ) {
    echo '<img src="画像URL" />';
} //処理続く...
?>

get_field_objectで指定したフィールドの設定情報を配列で取得する

get_field_object()は、指定したフィールドの全ての設定を配列で返してくれます。

get_field_objectの戻り値

ラジオボタンで「赤」を選択していた場合

Array
(
    [key] => field_xxxxxxxxxxxxx
    [label] => 色
    [name] => cf_color
    [_name] => cf_color
    [type] => radio
    [order_no] => 1
    [instructions] => ラジオボタンの分岐テスト
    [required] => 1
    [id] => acf-field-cf_color
    [class] => radio
    [conditional_logic] => Array
        (
            [status] => 0
            [rules] => Array
                (
                    [0] => Array
                        (
                            [field] => field_571476049a8c5
                            [operator] => ==
                            [value] => 非表示にする
                        )

                )

            [allorany] => all
        )

    [choices] => Array
        (
            [red] => 赤
            [blue] => 青
            [yellow] => 黄
        )

    [other_choice] => 0
    [save_other_choice] => 0
    [default_value] =>
    [layout] => vertical
    [field_group] => 847
    [value] => red
)

選択した値の表示名を表示する

例:選択肢「red : 赤」の場合、「赤」を表示。

<?php
$field = get_field_object('cf_color'); //フィールドに関する情報を取得
$value = get_field('cf_color'); //現在選択されている値
$label = $field['choices'][ $value ]; //選択されている値の表示名(ラベル)を取得

echo $label; //選択されている値の表示名を表示
 ?>

チェックボックスだと複数選択で配列で返ってくるので、foreach等使うのかな…?(未検証) 値と表示名を使って画像を切り替えるということもできそうですね。

複数選択した項目の値を任意の文字で繋げる

例えば「□ケーキ □チョコ □アイス □クッキー」という選択肢があってケーキ、チョコ、アイスを選択して表示させる場合、phpの「implode」という関数を使うと、この3つの値を任意の文字でつなげることができます。詳しくは[WordPress/php] implodeで連結した配列要素の区切り文字(連結文字)を指定するをご覧ください。

▼スラッシュ( / )で値を連結させた場合の出力結果
ケーキ / チョコ / アイス

ラジオボタン

※1つのみ選択可能

選択したラジオボタンの値を出力

$color = get_field('cf_color');
if($color){
     echo $color; //「赤」を選択した場合は「red」と表示される
}

値は「red」なのですが、投稿画面では「赤」が表示されています。

ラジオボタンで条件分岐させる

<?php
$cf_color = get_field('cf_color');
if ($cf_color == 'red'){
    echo '赤色を選択しました';
} elseif ($cf_color == 'blue'){
    echo '青色を選択しました';
}elseif ($cf_color == 'yellow'){
    echo ‘黄色を選択しました';
}elseif ($cf_color == false){
    echo '選択していません';
}else{
    echo '他の色'; //もし上記以外の色があった場合など
}
?>

ここで重要なのは、分岐では「選択肢」で設定した左側の値を使う、ということです。 「red : 赤」と設定していたら「red」を、「1 : 赤」なら「1」、「赤 : 赤」なら「赤」です。 因みに、上記のように「:」と対で設定しなかった場合は、値と表示名が自動的に同じになります。
→「赤、青、黄」と値だけを書いた場合は、自動的に「赤 : 赤、青 : 青、黄 : 黄」となります。

「選択していない」という状態もあると思いますが、 「選択している/していない」は、true / falseで判定、分岐できます。trueは「選択している」、falseは「選択していない」となります。(おそらく、「選択している」状態のtrueはどの項目を選択していてもtrueになると思われる…が未確認。)

よく分からなかったら、var_dumpやprint_rで$cf_color(フィールド)の中身を確認しよう!←最後はコレ。

条件を絞り込んで該当記事をループで表示させる場合

フィールド名「cf_color」で「赤」を選択した記事のタイトルを全て出力せよ!

<?php
$args = array(
    'meta_key'   => 'cf_color’, //フィールド名
    'meta_value' => 'red', //値(カスタムフィールド作成画面の「選択肢」で入力した左側の部分。文字列として比較)
    'posts_per_page' => -1 //該当記事全てを表示
);

$the_query = new WP_Query( $args );
if ( $the_query->have_posts() ) :
while ( $the_query->have_posts() ) : $the_query->the_post(); ?>

<h2><?php the_title(); ?></h2>

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

WP_Queryなので、色々な条件を組み合わせて出力を変更できます。詳しくは下記のリンク先で条件内容をチェック!

真/偽

「真/偽」もチェックボックスと似たような考え方です。

if( get_field('field_name') ) //真の場合
{
    echo '真の場合にすること';
}
else // 偽の場合
{
    echo '偽の場合にすること';
}
Pocket