Ultimate Member|複数のフィールドを組み合わせて選択項目が分岐するドロップダウンを実装!
2020/04/25
WordPressプラグイン|Ultimate Memberのフォームフィールドを使いこなす
Ultimate Memberの関連記事
- WordPressプラグイン|Ultimate Memberでユーザー管理、コミュニティー投稿サイトにする方法
- 【WordPress/権限グループ&登録ユーザープラグイン】どれがいい?上位8件を徹底比較しました
複数のドロップダウンを組み合わせる手順
Ultimate Memberのフォーム作成で使えるフィールド、ドロップダウンにはChoices CallbackとParent Optionという項目があります。
これを使用すると、複数のドロップダウンを組み合わせられ、最初のドロップダウン選択項目により、次のドロップダウン選択項目が変わる、分岐するドロップダウンが実装できます。
選択項目が多く、収まりきらないような選択肢でも分類することでコンパクトなフィールドにまとめることができます。
-
Ultimate Member > フォーム
- 次に、コールバック関数を用意します。
WordPressインストールディレクトリ\wp-content\themes\有効化しているテーマのフォルダ\functions.php
のfunctions.phpへ最初に選択するドロップダウンの選択項目に合わせて、配列を用意。
サンプルコード
function getcat() { //AJAX postで送信された'parent'フィールドから値を取得します。 $choice = $_POST
['parent_option']; //$choiceの値に応じて、それぞれの配列を返します。 switch($choice) { case "PC・電化製品": $cat = [ "コンピューター" =>"コンピューター", "カー用品" => "カー用品", "AV機器" => "AV機器", "携帯電話" => "携帯電話", "携帯音楽プレーヤー" => "携帯音楽プレーヤー", "デジカメ & ビデオ" => "デジカメ & ビデオ" ]; break; case "スポーツ & アウトドア": $cat = [ "自転車"=>"自転車", "ゴルフ"=>"ゴルフ", "キャンプ用品"=>"キャンプ用品" ]; break; default: //該当するオプションが選択されていない場合の表示(エラー表示にするか、$catのデフォルト配列を設定します。) $cat = ["該当する項目がありません。"]; } return $cat; }- 最初に選択するドロップダウンに応じて項目が変わるフィールドを用意します。
Choices Callbackにはfunctions.phpへ追記したコールバック関数を入力。
(画像ではChoices CallbackがgetCitiesになっていますが、getcatが正解です。)
Parent Optionで、親となる最初に選択するドロップダウンを選択します。実際の動作デモ
Ultimate Memberの関連記事
- 最初に選択するドロップダウンに応じて項目が変わるフィールドを用意します。