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

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

複数個(multiple化)にも対応

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

💻手に職をつけて安定的に働きたい人

⇒ 完全無料のプログラミングスクール - 受講料無料でプログラミング習得 -

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

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

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

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

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

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

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

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

まとめ

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

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

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

【今すぐ無料プラグインを手に入れる】
無料ダウンロードはこちら

ワードプレス専門家に丸投げする

WPホームページ研究所はワードプレスを中心としたブログ作成・ホームページ制作・オウンドメディア構築・プラグイン設定・調整など幅広いカスタマイズに対応しております。 記事の掲載情報はもちろんお好みの機能をいただければ専属スタッフが心を込めて対応させていただきます。まずはお気軽にお問い合わせくださいませ。

お問い合わせの種類をお選びください(もっとも近い項目)

法人の場合は法人名とご担当者のお名前をご入力ください

返信時のご連絡に利用するメールアドレスをご入力ください

運営中のウェブサイトURLがあればご入力ください

お困りの内容があれば詳しい内容をお聞かせください