Advanced Custom Fieldsでセレクトボックスなどの選択肢を動的に設定する方法
ワードプレスでカスタムフィールドの作成にAdvanced Custom Fields（以下ACF）を使用している方は多いと思います。長ったらしいカスタムフィールドのコードを書かずに済む、とっても便利なプラグインですよね。
選択タイプのカスタムフィールド（セレクトボックス・ラジオボタン・チェックボックス）に、ACFのフィールド作成画面から直接選択肢を設定するのではなく、変数などを入れたいと思った事はないでしょうか。
今回は、ACFの選択系フィールドに変数などを取り込んで、選択肢を動的に設定する方法です。
～ 目次 ～
今回やりたい事
ちょっと伝わりづらいかもしれませんので書いておきますが、今回やりたい事は以下のような事です。
たとえば、サッカー教室のサイトがあったとします。
カスタム投稿タイプ「教室」と、カスタム投稿タイプ「先生」があります。
「教室」の編集画面に「担当の先生」というセレクトボックスを作り、「先生」の一覧を選択肢に表示したい。
もちろん直接設定すれば選択肢は作れますが、先生が増えたり減ったりした時に、毎回カスタムフィールドを修正しなければなりません。自分で運営しているサイトならいいかもしれませんが、一般の方が運営するサイトを制作している時などは、「新しい先生が入ったらカスタムフィールドを修正して下さい。」なんて言えませんよね。
こんな時、カスタム投稿タイプ「先生」の一覧を取得して「教室」のカスタムフィールドの選択肢に取り込めれば便利です。
取り込むデータは何でも良いのですが、大体こんな事をやってみます。
選択肢に変数などを使い動的に設定するコード
以下は基本的な部分だけのコードです。使用中のテーマのfunctions.phpに追記します。
最終行のname=teacher_nameの部分が、カスタムフィールドの名前です。この場合、teacher_nameという名前のフィールドの選択肢を書き換えています。ここは実際のフィールド名に合わせて変更して下さい。
|
1 2 3 4 5 6 7 8 9 10 |
function acf_load_teacher_field_choices( $field ) { /* 選択肢をクリア */ $field['choices'] = array(); /* 自由に選択肢を設定 */ $field['choices']['値1'] = 'ラベル1'; $field['choices']['値2'] = 'ラベル2'; return $field; } add_filter('acf/load_field/name=teacher_name', 'acf_load_teacher_field_choices'); |
上のコードを追記すると、最終行で指定したフィールドの選択肢が”ラベル1”と”ラベル2”に変更されます。5行目と6行目でそれぞれ設定していますので、ここを書き換えれば変更できます。配列$field[‘choices’]に、キー（選択肢のvalue）と中身（選択肢のlabel）を入れていきます。
実用例
上のような感じでは、あまり意味がありませんので、1つ実用的な例を載せておきます。
下のコードは、”teachers”というカスタム投稿タイプの記事のタイトルをすべて取得して、”teacher_name”という名前のカスタムフィールドの選択肢にする例です。labelにタイトル、valueに投稿IDを取り込んでいます。IDをvalueに入れておくことで、その記事のデータも好きなように活用できます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
function acf_load_teacher_field_choices( $field ) { $field['choices'] = array(); $args = array('posts_per_page' => -1,'post_type' => 'teachers','order' => 'ASC'); $teachers=get_posts($args); foreach($teachers as $post): setup_postdata($post); $field['choices'][$post -> ID] = $post -> post_title; endforeach; wp_reset_postdata(); return $field; } add_filter('acf/load_field/name=teacher_name', 'acf_load_teacher_field_choices'); |
最後に
さすがAdvanced Custom Fields！ナイスなフィルターフックを用意してくれていますね。
同じやり方で、テキストボックスもラジオボタンもセレクトボックスも、とっても簡単に動的な書き換えができます。
ちなみに、このコードは以下のページを参考にしています。英語ですが、興味のある方はどうぞ。
参考サイト
Dynamically Populate a Select Field’s Choices
