Ultimate Member｜複数のフィールドを組み合わせて選択項目が分岐するドロップダウンを実装！

2017/07/27 2020/04/25

WordPressプラグイン｜Ultimate Memberのフォームフィールドを使いこなす

Ultimate Memberの関連記事

複数のドロップダウンを組み合わせる手順

Ultimate Memberのフォーム作成で使えるフィールド、ドロップダウンにはChoices CallbackとParent Optionという項目があります。
これを使用すると、複数のドロップダウンを組み合わせられ、最初のドロップダウン選択項目により、次のドロップダウン選択項目が変わる、分岐するドロップダウンが実装できます。

選択項目が多く、収まりきらないような選択肢でも分類することでコンパクトなフィールドにまとめることができます。

Ultimate Member > フォーム

通常通り、最初に選択するドロップダウンを作成します。

次に、コールバック関数を用意します。

WordPressインストールディレクトリ\wp-content\themes\有効化しているテーマのフォルダ\functions.php

のfunctions.phpへ最初に選択するドロップダウンの選択項目に合わせて、配列を用意。

サンプルコード

function getcat() {
//AJAX postで送信された'parent'フィールドから値を取得します。
  $choice = $_POST[fusion_builder_container hundred_percent="yes" overflow="visible"][fusion_builder_row][fusion_builder_column type="1_1" background_position="left top" background_color="" border_size="" border_color="" border_style="solid" spacing="yes" background_image="" background_repeat="no-repeat" padding="" margin_top="0px" margin_bottom="0px" class="" id="" animation_type="" animation_speed="0.3" animation_direction="left" hide_on_mobile="no" center_content="no" min_height="none"]['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で、親となる最初に選択するドロップダウンを選択します。