ワードプレス管理画面にセレクトボックスを導入したらどうなるの？

本日はワードプレスの管理画面内にセレクトボックスを導入した場合の使い勝手をご紹介。以前にチェックボックスの設定項目を追加した記事もあるのでぜひ併せてご参照くださいませ。

ワードプレス管理画面にチェックボックス機能を実装する手順

本記事ではセレクトボックスを導入したらどんな機能を実装できるのか？を解説いたします。

ワードプレス管理画面にセレクトボックスを導入したらどうなるの？

セレクトボックスの使い道はさまざまです。基本的に「複数の候補から１つを選ぶ場合」に使います。

複数から１つに絞り込みたいならセレクトボックス

たとえば会員サイトでプロフィール欄から“ユーザーの好み”を集めたい場合は下記がありますよね。

選択できる候補はいくつか用意しておくと選びやすいです。

ワードプレスであれば候補データを読み込むのもアリ

上記では「いちご」や「パイナップル」などあらかじめセットした候補が表示されていましたよね。ワードプレスではれば元々のデータは管理画面にたくさん蓄積されているので自由に読み取れます。

たとえば「固定ページ」を取得してセレクトボックス内に読み込ませることも可能です。以下が読み込んだ例。

実際の候補には固定ページとして公開されている一覧が入っています。

サンクスページの設定にも最適な項目

たとえば「Contact Form 7」の補助プラグインとして「フォーム送信後にサンクスページへリダイレクト」させるためのページを選ぶ設定項目も作れそうですよね。複数から１つ選ぶならセレクトボックスが最適。

もしサンクスページのURLを１つで共通化しておくなら設定項目を持たせてあげると管理しやすくなります。裏側の処理としては「サンクスページ設定があればフォーム送信後は選択ページに転送する」だけでOK。もしサンクスページ設定がなければ「何もしない」という条件分岐をつけておけばより安心ですよね。

セレクトボックスをさらに強化する方法

たとえばセレクトボックス候補に大量の候補が読み込まれる場合はキーワード検索も欲しくなります。セレクトボックスは少しカスタマイズを行えば以下のように機能を拡張することも可能です。

もちろん、セレクトボックスとしての機能も動きます。

キーワードの絞込み機能も可能

セレクトボックスが一気に進化しましたよね。

複数個（multiple化）にも対応

以下は複数の候補を選べる状態です。２個以上選べるので右端の矢印マークがなくなっていますね。

当然ですが、複数の候補から選べます。

キーワードの絞り込み検索も動きます。

以下が選び終わった状態です。

候補から選べる数を制限も可能

選択可能な数を制限することもできます。

選び終わった項目はグレーアウトしているのも使いやすさの秘訣です。

選択済みの候補色を変更すると管理画面とのマッチ度合いも増します。

色をつけるだけで管理画面が楽しくなりますね。

まとめ

本日は「ワードプレス管理画面でセレクトボックスを活かす方法」をご紹介いたしました。

セレクトボックスは複数候補から１つを絞ったり、multipleモードへ変更して好きなだけ選んだりと管理画面に使う機能としてはありがたいほどに便利なインターフェイスです。とはいえ管理する項目によってはチェックボックスの方が使いやすいなどセレクトボックスがすべてをまかなえるわけでもありません。

最終的には管理画面内で実装する機能と照らし合わせながら決めていきましょう。