アドオンでセレクトメニューでSelect2が利用できる！Elementorメニューの設定だけでお手軽に導入可能！でも有料なんだよね…残念
フォームなどに利用される、セレクトメニュー、いわゆるプルダウンメニューで検索ができてしまうSelect2。以前にContact Form 7での導入を紹介した。
Contact Form 7でオシャレなプルダウンメニューのSelect2を使いたい！
Contact Form 7に導入するんで、Contact Form 7のフックの仕組み、フォームのIDの固定、セレクトボックスの内容をどうやってPHPの配列への格納するかなど調べる必要があって非常に苦労した。
今回紹介する、弊サイトでおなじみのe-addons for Elementorの追加アドオン「e-ProForm Extend」を利用するとできてしまうのであった（有料）。
e-addonsは機能自体も素晴らしいが、追加されている機能の見せ方もスマート！
Elementorのアドオンはインストールすすとメニューにウィジェットがドーンと増えて…果たして使いやすいのか作業が効率化されるのか非常に問題も多い。
管理人大好きのe-addonsはElementorのウィジェットに機能を追加するタイプなので、フルインストールしてもメニューに増える項目は、ジャスト20個！少なくねぇという諸氏もご安心を！Elementorの基本となるウィジェットそれぞれに「e」のマークがついた項目が追加され、それはe-addons独自の設定項目になっている。
今回紹介する「e-ProForm Extend」もElementorのフォームウィジェットに追加されるので、Elementorメニューはすっきりシンプルなまま。e-addonsの開発者がElementorのAPIをしっかり理解して利用している証左である！
そんな開発者が作っているe-addons。e-addons事態のAPIも公開されているので、機能の奥行きが深い…というか深すぎて検証が…時間かかるんである。
話がそれた…ここからさっそく今回のSelect2の利用方法について解説していこう。
e-addonsのコアは無料だけど「e-ProForm Extend」は有料…注意です！
e-addons for Elementorのコアダウンロード、e-ProForm Extendedの購入はサイトのサムネイルからどうぞ。
ただ、今回紹介するのはElementorのフォームでSelect2を利用するようにするまでの流れのみ。メニュー内の選択項目を動的にするなどの処理はしていない。
おそらくフォームのe-addonsのAPIと、Elementor編集ページからPHPがコーディングできるので、それを利用するとできるようになるのではと思っている。
追加の検証については後日やってみたい。
ササッとフォームを配置して設定したらすぐに完成！
全体の流れとしては、まずフォームを配置する。次にSelect2を利用する項目を追加し、Select2が使えるように設定。選択項目を入力して完了。
フォーム自体は英語仕様なので、エラーメッセージなどを日本語して完了。
コレダケ。簡単。Select2が使える。
最後にエラーメッセージを日本語に置き換える
最後はエラーメッセージを日本語に置き換えて終了。あっけない導入。素敵です。Select2の検索機能は日本語にも対応しているので検索についても問題なし。
ただ、選択項目をCSVから読み込んだり、カスタムフィールドを使ったりといった動的処理ができない点が物足りない。あと入力項目が選択項目のみに固定されており、ユーザーが任意の文字列の入力を許容していない。。APIが公開されているので、おそらくはAPIを使って解決できるのだろうと…ちょっと検証に時間ください。あしからず。
