Advanced Custom Fieldsによるカスタムフィールドの出力 [チェックボックス・ラジオボタン編]

 2016.04.21  2017.10.31

Advanced Custom Fieldsの出力 画像編

カスタムフィールドのチェックボックスとラジオボタンは、実務では選択された項目の値を出力するだけではなく、「チェックを入れたら、○○する」というように条件分岐として本当によ〜く使われます。

以下の基本情報を元にしてチェックボックスとラジオボタンの出力方法を説明します。画像ではフィールドタイプでラジオボタンが指定されていますが、チェックボックスでも同じです。

  • フィールドラベル:色
  • フィールド名:cf_color
  • 選択肢(choices):
    • red : 赤
    • blue : 青
    • yellow : 黄
    • ※redが値、赤が表示名(ラベル)

ACFカスタムフィールド作成画面

cf_color

チェックボックス

チェックボックスは複数選択が可能なので、配列で返ってきます。

選択した値をカンマ区切りで出力する

複数選択した値を全て出力する

多分こんな感じです。
foreachは配列にある各要素を変数に格納して1つずつ取り出すPHPの関数です。表示名(ラベル)ではなく値を出力する点に注意しましょう。

選択された値と表示名(ラベル)を全て表示する

赤・青・黄の3つを選択した場合の例です。
get_field_objectの説明はこちらをご覧ください。

選択の有無で条件分岐する

例えば投稿画面で「選択したらTOPページには表示しない」や、「選択したらお問い合わせ情報を表示させる」等、記事によってコンテンツを表示/非表示させたり、処理内容を変えたりすることができます。ラジオボタンでもできるかな。

選択された項目に対して処理を行いたい場合

複数選択してそれらに対するアイコン画像を表示させたい場合、例えば宿泊施設のサービスや化粧品の肌質をアイコンで表示させる場合などに使えそうですね。

※in_array関数は配列に指定した値があるか検索し、値が見つかった場合はtrue、見つからなかった場合はfalseを返す関数です。

複数選択した項目の値を任意の文字で繋げる

例えば「□ケーキ □チョコ □アイス □クッキー」という選択肢があってケーキ、チョコ、アイスを選択して表示させる場合、phpの「implode」という関数を使うと、この3つの値を任意の文字でつなげることができます。詳しくは[WordPress/php] implodeで連結した配列要素の区切り文字(連結文字)を指定するをご覧ください。

▼スラッシュ( / )で値を連結させた場合の出力結果
ケーキ / チョコ / アイス

条件を絞り込んで該当記事をループで表示させる場合

フィールド名「cf_color」で「赤」を選択した記事のタイトルを全て出力する例です。

WP_Queryなので、色々な条件を組み合わせて出力を変更できます。詳しくは下記のページで解説しています。

参考記事[WordPress] カスタムフィールドの値で条件を絞り込み、ループで記事一覧を表示する

ラジオボタン

ラジオボタンは、1つのみ選択が可能です。(だからラジオボタンなんですが)

選択したラジオボタンの値を出力

投稿画面のカスタムフィールドでは「赤」と表示されていますが、値は「red」です。

ラジオボタンで条件分岐させる

ここで重要なのは、分岐では「選択肢」で設定した左側の「値」を使う、ということです。

「red : 赤」と設定していたら「red」を、「1 : 赤」なら「1」、「赤 : 赤」なら「赤」です。 因みに、上記のように「:」と対で設定しなかった場合は、値と表示名が自動的に同じになります。 「赤、青、黄」と値だけを書いた場合は、自動的に「赤 : 赤、青 : 青、黄 : 黄」となります。

「選択していない」という状態もあると思いますが、 「選択している/していない」は、true / falseで判定、分岐できます。trueは「選択している」、falseは「選択していない」となります。(おそらく、「選択している」状態のtrueはどの項目を選択していてもtrueになると思われる…が未確認。)

よく分からなかったら、var_dumpやprint_rで$cf_color(フィールド)の中身を確認しよう!←最後はコレ。

選択された値と表示名(ラベル)を表示する

「赤」を選択した場合の例です。
get_field_objectの説明はこちらをご覧ください。

get_field_objectで指定したフィールドの情報を配列で取得する

get_field_object()は、指定したフィールドの全ての設定を配列で返してくれます。

get_field_objectの戻り値

以下は、ラジオボタンで「赤」を選択していた場合の「cf_color」の内容です。

真/偽

「真/偽」もチェックボックスと似たような考え方です。

ACFをさらに使いやすくするACF Pro

ACF Proは、次世代バージョンのACFとACFを更にパワーアップさせた高機能なアドオン(The Repeater Field、The Gallery Field、The Flexible Content Field、Clone field、Options Pages)がパッケージ化された有料プラグインです。便利な機能が多く搭載されているのでオススメです!

参考記事Advanced Custom Fieldsを更に使いやすく!ACF Proを選ぶ理由と機能紹介