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

今回は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には１つずつ取得できるget_field()と、まとめて取得できるget_fields()という、フィールドの返り値を取り出す関数があります。

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

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

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

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

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

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

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

最後に

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