ACFでセレクトボックスの表示方法と分岐

投稿日:2025.03.04.
更新日:2025.04.12.

WordPress

ACF

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

板浪 雅樹
執筆・編集 板浪 雅樹

2005年から WEB 業界一筋。500サイト超を手がける SEO・WordPress のエキスパート。「公開後こそ本番」を掲げ、データ分析とユーザー視点で成果を引き出す運用を提案。

2005年に制作会社へ入社後、プログラマーからキャリアをスタート。サーバー構築・データベース設計で培った技術を強みに、WordPress テーマ/プラグイン開発やサイト移行の難案件を多数担当してきました。
2010年以降は SEO エンジニアとしても活動領域を拡大。コンテンツ設計・内部リンク最適化・高速化チューニングにより、競合の激しいビッグキーワードで上位獲得を実現してきました。
現在は TREVO のウェブディレクターとして、要件定義から運用改善まで一気通貫でリード。AI ライティングや GA4/Looker Studio を活用したレポーティング手法を開発し、「数字で説明できるサイト運用」をポリシーにクライアントの ROI 最大化を支援しています。
趣味/強み:筋トレとランニングで日々の集中力をキープ。複雑な課題を“仕組み”で解決するのが得意。
モットー:「サイトは資産。改善を止めた瞬間から価値は目減りする」

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

レクトボックスの設定

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

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

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

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

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

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

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

ACF セレクト設定

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

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

  • Value … 「値(Value)」が返る
  • Label … 「ラベル(Label)」が返る
  • Botharray('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を提供しつつ、コード側ではわかりやすい条件分岐を組みやすくなるメリットがあります。サイト運営やカスタマイズの現場で活用してみてください。

関連の記事

CONTACT

ホームページ制作・Web制作に関するご質問やご相談は、
下記フォームよりお問い合わせください。

無料のお見積りや初回のご相談も承っておりますので、「まだ検討中」「ちょっと話を聞いてみたい」といった段階でも大歓迎です。
現状のホームページ診断も無料で実施中です。

0120-83-8567
平日9:00~18:00まで 定休日:土 日 祝