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

2019年6月10日2024年2月26日

ワードプレスでカスタムフィールドの作成にAdvanced Custom Fields(以下ACF)を使用している方は多いと思います。長ったらしいカスタムフィールドのコードを書かずに済む、とっても便利なプラグインですよね。

選択タイプのカスタムフィールド(セレクトボックス・ラジオボタン・チェックボックス)に、ACFのフィールド作成画面から直接選択肢を設定するのではなく、変数などを入れたいと思った事はないでしょうか。

今回は、ACFの選択系フィールドに変数などを取り込んで、選択肢を動的に設定する方法です。

今回やりたい事

ちょっと伝わりづらいかもしれませんので書いておきますが、今回やりたい事は以下のような事です。

たとえば、サッカー教室のサイトがあったとします。
カスタム投稿タイプ「教室」と、カスタム投稿タイプ「先生」があります。
「教室」の編集画面に「担当の先生」というセレクトボックスを作り、「先生」の一覧を選択肢に表示したい。

もちろん直接設定すれば選択肢は作れますが、先生が増えたり減ったりした時に、毎回カスタムフィールドを修正しなければなりません。自分で運営しているサイトならいいかもしれませんが、一般の方が運営するサイトを制作している時などは、「新しい先生が入ったらカスタムフィールドを修正して下さい。」なんて言えませんよね。

こんな時、カスタム投稿タイプ「先生」の一覧を取得して「教室」のカスタムフィールドの選択肢に取り込めれば便利です。

取り込むデータは何でも良いのですが、大体こんな事をやってみます。

選択肢に変数などを使い動的に設定するコード

以下は基本的な部分だけのコードです。使用中のテーマのfunctions.phpに追記します。

最終行のname=teacher_nameの部分が、カスタムフィールドの名前です。この場合、teacher_nameという名前のフィールドの選択肢を書き換えています。ここは実際のフィールド名に合わせて変更して下さい。

上のコードを追記すると、最終行で指定したフィールドの選択肢が”ラベル1”と”ラベル2”に変更されます。5行目と6行目でそれぞれ設定していますので、ここを書き換えれば変更できます。配列$field[‘choices’]に、キー(選択肢のvalue)と中身(選択肢のlabel)を入れていきます。

実用例

上のような感じでは、あまり意味がありませんので、1つ実用的な例を載せておきます。

下のコードは、”teachers”というカスタム投稿タイプの記事のタイトルをすべて取得して、”teacher_name”という名前のカスタムフィールドの選択肢にする例です。labelにタイトル、valueに投稿IDを取り込んでいます。IDをvalueに入れておくことで、その記事のデータも好きなように活用できます。

最後に

さすがAdvanced Custom Fields!ナイスなフィルターフックを用意してくれていますね。

同じやり方で、テキストボックスもラジオボタンもセレクトボックスも、とっても簡単に動的な書き換えができます。

ちなみに、このコードは以下のページを参考にしています。英語ですが、興味のある方はどうぞ。

参考サイト

Dynamically Populate a Select Field’s Choices

関連のある記事

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
Post Type Selectors

目次へ