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

WordPressのプラグイン「Advanced Custom Fields（ACF）」を使えば、投稿編集画面に自由度の高いカスタムフィールドを追加できます。
その中でも「セレクトボックス」は、ユーザーがプルダウン形式から選択し、その結果に応じて表示内容を切り替える機能を簡単に実装できます。今回は、セレクトボックスの基本的な設定と、選択した値による条件分岐の方法をご紹介します。

レクトボックスの設定

ACFのセレクトフィールドを作成するときは、管理画面の「フィールドグループ」から新規追加や既存フィールドの編集を行います。

1-1. 値とラベルの指定

セレクトフィールドでは、「値（Value）」と「ラベル（Label）」を指定できます。

• 値（Value）：プログラム側で利用する実際のデータ
• ラベル（Label）：投稿編集画面でユーザーに表示される文字列

たとえば以下のように入力します。

値1 : ラベル1
値2 : ラベル2
値3 : ラベル3
値4 : ラベル4

コロン（ : ）を使わない場合は、同じ値が「値」と「ラベル」の両方として使われます。
例）banana とだけ入力すると、「値」＝banana、「ラベル」＝banana となる。

リターンフォーマットの設定

ACFのフィールド設定には「リターンフォーマット」という項目があり、the_field() や get_field() で取得するときの形式を「Value」「Label」「Both（配列）」のいずれかに設定できます。

• Value … 「値（Value）」が返る
• Label … 「ラベル（Label）」が返る
• Both … array('value' => '値', 'label' => 'ラベル') の形で返る

初期設定では「Value」になっているため、条件分岐などを行う場合は「Value」を使うほうがわかりやすいケースが多いです。

その他の主な設定項目

• 複数選択 … セレクトボックスで一度に複数選べるようにする
• 選択肢を検索可能にする … 選択肢の数が多い場合に便利な検索機能を有効にする
• デフォルト値 … 投稿編集画面を初めて開いたときに最初から選択されている値を指定

セレクトボックスの値を出力する方法

セレクトフィールド名が ○○○○ だとすると、テンプレートファイル（例：single.php など）で以下のように呼び出して表示できます。

○○○○：フィールド名

<?php the_field('○○○○'); ?>

• 上記の例では、リターンフォーマットに応じて「値」または「ラベル」が出力されます。
• 値（Value）とラベル（Label）を両方表示させたい場合は、get_field_object() を使って細かく制御できます。

<?php
$field = get_field_object('○○○○');
$value = $field['value'];
$label = $field['choices'][$value];
?>
<p>選択されたValue: <?php echo esc_html($value); ?></p>
<p>選択されたLabel: <?php echo esc_html($label); ?></p>

セレクトボックスの値で条件分岐をする

セレクトボックスで選んだ値（Value）を使って表示を切り替える場合、PHPの変数にその値を格納し、条件分岐（if文など）で判定します。
ここでは例として $selected_value という変数名を使っていますが、よりわかりやすい名前（例：$my_select_box_value など）に変更してもかまいません。

変数とは？
プログラム上で値を一時的に保存するための「入れ物」です。ここでは ACF で選択された「Value」が $selected_value に代入され、後続の条件分岐で利用されています。
変数名は自由につけられるため、処理内容を想起しやすい名前を使うのがおすすめです。

サンプルコード

$selected_value：変数
○○○○：フィールド名
●●●●：選択肢の値
▼▼▼▼：選択肢の値
■■■■：選択肢の値

<?php
// フィールド名「○○○○」の値を取得
$selected_value = get_post_meta($post->ID, '○○○○', true);

// 選択肢の値を英数字で管理しておくと分かりやすい
if ($selected_value == '●●●●') :
    // ●●●●（Value）が選択されていた場合の表示処理
    the_field('●●●●');
elseif ($selected_value == '▼▼▼▼') :
    // ▼▼▼▼（Value）が選択されていた場合の表示処理
    the_field('▼▼▼▼');
else:
    // それ以外（■■■■など）の場合
    the_field('■■■■');
endif;
?>

ポイント

• $selected_value という変数名を使っていますが、意味を明確にしたい場合は $my_select_box_value や $acf_select_value など、自由な名前に変更してください。
• 上記コードでは get_post_meta() を使っていますが、get_field() でも値を取得できます。
• 選択肢の Value を英数字にしておくと、条件分岐がわかりやすくなります。
• また、リターンフォーマットを「Value」に設定しておくと、コロン（:）で指定した Value だけが返るため、条件分岐に用いるデータがシンプルになります。

追加Tips：Value と Label を分ける利点

• Value には英数字など判別しやすい文字列を使う
• Label にはユーザーに見せたい言語を使う（日本語など）

これにより、管理画面ではわかりやすいラベルが表示され、テンプレートや条件分岐では取り扱いやすい英数字を使えます。
たとえば、Value:red, Label:赤 のように分けておくと、コード上では if ($selected_value == 'red') { ... } で分岐が書きやすくなります。

まとめ

1. セレクトフィールドの値とラベルを使い分けて、投稿画面でわかりやすい選択肢を設けつつ、テーマファイルではスムーズな条件分岐を実現できます。
2. リターンフォーマットを「Value」「Label」「Both」から選ぶことで、the_field() や get_field() の返り値を制御可能。
3. 条件分岐には Value を英数字にして使うのが定番。日本語を使うとコードが読みにくくなる場合があるため注意しましょう。

ACFのセレクトボックスを使うと、ユーザーが投稿画面で選択しやすいUIを提供しつつ、コード側ではわかりやすい条件分岐を組みやすくなるメリットがあります。サイト運営やカスタマイズの現場で活用してみてください。