ACFでラジオボタンの表示方法と分岐

2025.03.04.

WordPress

ACF

X Facebook Pocket LINE はてブ

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

WordPressのカスタムフィールド管理に便利なプラグイン「Advanced Custom Fields(以下、ACF)」では、ラジオボタンを使って任意の選択肢を表示し、投稿画面からユーザーが選択した値を取得・表示することができます。
ここでは、ラジオボタンを使った基本的なフィールド設定から、値の取得方法、条件分岐による表示切り替えまでを解説します。

設定内容

ACFのラジオボタン

選択肢

  • 「選択肢」には、改行で区切ってテキストを入力します。(例:apple
  • 値とラベルを分けて指定する場合は、コロン : を使います。(例:apple : リンゴ
apple : リンゴ
banana : バナナ
orange : オレンジ

選択解除を許可する

  • ラジオボタンで一度選択した項目を解除できるようにするかどうかを設定します。
  • デフォルトでは一度選択したら解除できませんが、チェックを入れると解除が可能になります。

その他 & その他の保存

  • 「その他」を有効にすると、ユーザーがカスタムの値を直接入力できるテキストボックスが追加されます。
  • 「その他の保存」をオンにすると、テキストボックスに入力された値が選択肢に自動的に追加され、今後はプルダウン(ラジオボタン)でも選択可能になります。

デフォルト値

  • フィールドを初めて編集するときに、あらかじめ選択された状態にする値を設定できます。
  • ここで指定した値が、最初の状態で選択されるようになります。

レイアウト

  • ラジオボタンのレイアウト方向を「縦」または「横」から選べます。
  • 選択肢の数やデザインに応じて使い分けてください。

リターンフォーマット

  • ACF 関数(the_field() など)で返却される値の形式を「Value」「Label」「Both(配列)」から選択可能。
    • Value: apple など、コロンの前に設定した“実際に格納される値”
    • Label: リンゴ など、ユーザーに見せるための表示名
    • Both: array('value' => 'apple', 'label' => 'リンゴ') のように配列として返される

選択された1つの値を表示する

最もシンプルな使い方として、ラジオボタンの値をそのまま表示する例です。
たとえば「リンゴ(apple)」を選択したら、そのまま リンゴ(または apple) と出力したい場合:

フィールド名:□□□□
値:○○○○
ラベル:●●●●

<p>Color: <?php the_field('□□□□'); ?></p>
  • フィールド名が □□□□ だとすると、このように the_field() を呼び出すだけで、設定したリターンフォーマットに応じた値やラベルが表示されます。
  • リターンフォーマットが「Value」の場合は apple が表示され、「Label」の場合は リンゴ が表示されます。

表示値とラベルを分けて使う

例えば、ラジオボタンの「Value」と「Label」を別々に使いたいときがあります。
リターンフォーマットを「Value」のままにしておき、そのうえでラベルも表示したい場合、get_field_object() を使うと便利です。

フィールド名:□□□□
値:○○○○
ラベル:●●●●

<?php
$field = get_field_object('□□□□');  // ACFフィールドオブジェクトを取得
$value = $field['value'];           // 選択されたValue
$label = $field['choices'][ $value ]; // Valueに対応するラベルを取得
?>
<p>Color: <span class="color-<?php echo esc_attr($value); ?>">
  <?php echo esc_html($label); ?>
</span></p>
  • get_field_object() は、指定したフィールド名に関するメタ情報(choices や label など)もまとめて取得可能。
  • field['choices'] は、ラジオボタンのすべての選択肢が連想配列で格納されています。
  • $value をキーにすることで、対応するラベルを取り出せます。

ラジオボタンの値で条件分岐をする

ラジオボタンの選択肢によって表示内容を切り替えたい場合は、Value で条件分岐を行います。
以下の例では、ラジオボタン(フィールド名 ○○○○)が持つ 3 つのラベル値(●●●●▼▼▼▼■■■■)をもとに出し分けをしています。

フィールド名:□□□□
値:○○○○
ラベル:●●●●
ラベル:▼▼▼▼
ラベル:■■■■

<?php
$selected_value = get_post_meta($post->ID, '○○○○', true);
if ($selected_value == '●●●●') :
  the_field('●●●●');
elseif ($selected_value == '▼▼▼▼') :
  the_field('▼▼▼▼');
else:
  the_field('■■■■');
endif;

get_post_meta() を直接使っている例ですが、ACFの get_field() で値を取得してもOKです。
比較の対象はリターンフォーマットが「Value」の場合、コロンの前に定義した文字列になります(例: apple など)。

よくある質問(FAQ)

Q1. ラジオボタンに複数選択はできないの?

ラジオボタンは基本的に1つの選択肢しか選べません。複数選択をしたい場合は、「チェックボックスフィールド」を使用してください。

Q2. “Value”に日本語を使うと不具合はありますか?

通常は問題ありませんが、コード内で条件分岐などを行う場合、文字化けやスペルミスリスクが高まります。半角英数字のValueを使い、Labelを日本語にする運用がおすすめです。

Q3. Return Format を途中で変えたらどうなる?

既に保存済みのフィールド値には影響ありません。ただし、the_field()get_field() で取得した値の形式が変わるため、表示周りのコードに変更が必要になる場合があります。

まとめ

  1. ACFのラジオボタンフィールドは、改行区切りまたは「Value : Label」形式で選択肢を定義します。
  2. リターンフォーマットの設定により、取得する値を「Value」「Label」「Both」から選択可能です。
  3. 条件分岐をする場合は、主にValueを使って比較するとスムーズ。Valueは英数字などで管理するとミスが減ります。
  4. get_field_object() を使うと、Value と Label の両方を1つのオブジェクトから同時に取得でき、柔軟な表示が可能です。

ラジオボタンフィールドをうまく活用することで、ユーザーがシンプルに選択しその選択結果をコード側で制御しやすくなります。ぜひ制作・運用の際の参考にしてみてください。

経歴: 映像制作の専門学校を卒業後、映像制作(編集・撮影)でのアシスタント、カーナビゲーション用の3DCG制作、PS2用の3DCGゲーム背景制作、16ミリフィルムのデジタル変換業務等を経てWEB制作部門のある会社に就職。株式会社TREVOでディレクション、SEO対策、CMS開発、3DCG制作、映像制作を担当

X Facebook Pocket LINE はてブ

関連の記事

お問い合わせ
CONTACT

ホームページ制作に関することなら
お気軽にご相談ください

お電話でのお問い合わせはこちら

0120-838-567

平日9:00~18:00まで 定休日:土 日 祝