Advanced Custom Fieldsでラジオボタンを作成し値を出力する方法

Advanced Custom Fieldsでラジオボタンを作成し値を出力する方法
2019年1月16日

今回はAdvanced Custom Fieldsでラジオボタンを作成して、実際に値を利用する方法です。テキストフィールドなどは、値の出力もなんとなくイメージできますが、ラジオボタンとなると「あれ?どうやって出力すんのかな?」と思う方も多いはず(たぶん)。という事で、さっそく書いていきたいと思います。

ラジオボタンの作成手順

作成は他のカスタムフィールドと同様に、フィールドタイプから”ラジオボタン”を選択します。

設定項目がたくさんありますが、画面上の説明だけではわかりにくいかもしれません。1つずつ解説してみたいと思います。翻訳されていない場合は、カッコ内の項目名が表示されているかもしれません。

フィールドラベル

編集画面で表示されるカスタムフィールドの名前です。日本語で問題ありませんので、フィールド入力をする人がわかりやすいよう名前にしましょう。

フィールド名

アンダースコアかダッシュが使用でき、日本語でも大丈夫なようです。ですが、フィールド名は値を取り出す時に入力する機会が多いので、半角英数字とアンダースコアに統一するのが良いかと思います。他と重複してはいけません。

例:product_color

フィールドタイプ

もちろん”ラジオボタン”ですね…

説明

フィールドグループの設定で指定した位置にラジオボタンの説明文を表示できます。

フィールドグループの設定に関しては、以前の記事をご覧下さい。
Advanced Custom Fieldsのフィールドグループの作成・設定方法

必須か?

ラジオボタンを使おうとしてるんだから必須に決まってんだろ!と思いますが、他のカスタムフィールドと同様に必須項目にするかどうかが選べます。

選択肢(Choices)

ラジオボタン1つごとに改行して入力します。

下のように単一のキーワードで指定すると、編集画面で表示されるラベルも、PHPで利用する値も「白」や「黒」となります。「カラー:白」のようなテキスト表示などのシンプルな目的なら、これで十分です。

値のみで良い場合

また、下のように記述すると、それぞれのラベルと値を別々に指定できます。

値とラベルを個別に指定する場合

この場合は編集画面では「白」などのラベルが表示され、テンプレート内などで利用する時は「white」を取得するという事が可能になります。

空白の値を許可するか(Allow Null

ラジオボタンで「空白の値」ってどういう事?と思ってしまった方もいるのではないでしょうか。通常、ラジオボタンはどこかが必ず選択されているものですよね。しかし、ここを「はい」に設定しておくと、何も選択しない事が可能になります。選択してある項目をクリックすると選択が消えるようになります。

その他(Other)

「その他」を「はい」に設定すると、値を入力できるテキストボックス付きのラジオボタンが、最後に追加されます。ラジオボタンのデフォルトの選択肢にない値も許可したい場合は「はい」に設定しましょう。

その他を保存(Save Other)

前節で書いた「その他」を「はい」にした時だけ選択できます。

ちょっと意味がわかりづらいですが、これを「はい」に設定すると、選択肢にない値をテキストボックスで入力した時に、次回からその値がラジオボタンに追加されます。一度入力された新たな値を自動的に保存してくれるんですね。

デフォルト値(Default Value)

デフォルトのラジオボタンの選択位置を指定します。値とラベルを別々に設定している場合は、デフォルト位置は「値」で指定します。ラベルで指定しても無効となります。

レイアウト(Layout)

これはわかりやすいので必要ないかもしれませんね。ラジオボタンを縦に並べるか、横に並べるかの指定です。お好みで見やすい方を選びましょう。

返り値(Return Format

この項目は、値とラベルを個別に設定してある場合でなければ、いじる必要はありません。Advanced Custom Fieldsのラジオボタンは、フィールドの作成時に、返り値を3タイプの中から選んで設定しておく事ができます。

  1. Value(値のみを利用する場合)
  2. ラベル(ラベルに利用した文言のみ利用する場合)
  3. Both(ValueとLabelのどちらも必要な場合)

テンプレート内などで利用する時に、何が必要になるかで使い分けましょう。

 

返り値を取り出して使用する方法

get_post_meta()などでも取り出せますが、Advanced Custom Fieldsには1つずつ取得できるget_field()と、まとめて取得できるget_fields()という、フィールドの返り値を取り出す関数があります。

今回はよく使われると思われるget_fields()を利用して取り出してみます。

ラジオボタンの場合は、返り値の設定によって使い方が少し変わってきます。今回は、仮に「フィールド名」が「product_color」のラジオボタンの入力値を利用するコードです。

返り値をValueかラベルに設定した場合

テンプレート内で利用する場合は、表示したい箇所にシンプルに下のように書きます。

これで返り値に設定した、ValueかLabelのいずれかが表示されます。

返り値をBoth(Array)に設定した場合

この場合は、配列に格納された状態でラベルと値が両方取得できます。”label”と”value”というキーにそれぞれ格納されていますので、下のように書いて利用します。

最後に

他のフィールドタイプと共通の部分まで書いたので、結構長くなってしまいました。不明な点だけ、かいつまんで読んでいただければ幸いです。。。

関連のある記事

ACFのカスタムフィールドをクイック編集できるプラグイン「ACF Quick Edit Fields」

ACFのカスタムフィールドをクイック編集できるプラグイン「ACF Quick Edit Fields」

記事を読む

Advanced Custom Fieldsでセレクトボックスなどの選択肢を動的に設定する方法

Advanced Custom Fieldsでセレクトボックスなどの選択肢を動的に設定する方法

記事を読む

Advanced Custom Fieldsでチェックボックスの作成と値の利用方法【ワードプレス】

Advanced Custom Fieldsでのチェックボックスの作成と値の利用方法【ワードプレス】

記事を読む

Advanced Custom Fieldsのカスタムフィールド入力値の出力や利用の方法

Advanced Custom Fieldsのカスタムフィールド入力値の出力や利用の方法

記事を読む

Advanced Custom Fieldsのフィールドグループの作成・設定方法

Advanced Custom Fieldsのフィールドグループの作成・設定方法

記事を読む


目次へ
Generic selectors
Exact matches only
Search in title
Search in content
Search in posts
Search in pages