WordPressでドロップダウンメニューの作り方が、管理画面でメニューをいじっていたら偶然分かったので、共有したい。
WordPressのメニューをドロップダウンメニュー化
具体的には、メニューをマウスオーバーするとプルダウンメニューやドロップダウンメニュー（実際には”プル”しなくても良いので、以下ドロップダウンに統一）が出てくるようにするカスタマイズである（下図の赤枠がドロップダウンメニューの例）。
WordPressのドロップダウンメニュー
これを実現するには、テーマのカスタマイズ、つまりCSSやPHPのソースファイルをいじる作業が必要なのかと思っていた。
しかし、そんな難しいことを全然しなくてもWordPressの管理画面で簡単にドロップダウンメニューを実現できる作り方を発見したので、備忘録を兼ねて筆者と同様にWordPress初心者の方のご参考にでもなればと思いここに書き記しておくことにした。
（かなりページビューの多いWordPressブログでもドロップダウンメニュー化されていなかったりするので、意外とご存じない方が多いのかも？）
WordPressテーマの依存性について
本ブログ読者の方であれば、最近このブログの体裁や外見がかなり変わったことにお気づきの方も多いかもしれないが、これはWordPressのテーマを変えたからである。以前はSEOなどで優れ無料で使える「Stinger2」というテーマを使用していた。
当初こちらをバージョンアップし「Stinger5」に移行しようとしていたのだが、スマートフォンのメニューが上手く動作しないという問題が見つかり、解決できなかったため断念した。
一方で、代替となるテーマを探してみたところ、「Simplicity」というStingerと同じく内部SEOへの配慮がされておりカスタマイズも容易なテーマを見つけたので、こちらに乗り換えたという経緯がある。（追記：2020年8月、Simplicityの後継テーマ「CoCoon」に移行）
筆者が行ったメニューのプルダウンメニュー化は、WordPressの一般的な管理画面から行えるようなので恐らくテーマへの依存性はあまり無いのではと考えているが、SimplicityやCoCoon以外ではうまく行かないかもしれない。その場合、筆者ではほとんど対応できないので、悪しからずご了承頂きたい。
さて、前置きはこれ位として、そのメニュープルダウン化の方法を以下に記そう。
メニューの管理画面でメニューアイテムを操作
まずWordPressの管理画面で左側のメニューから、外観＞メニューを選択してメニューの編集画面を開く。
WordPressのメニュー編集画面
WordPressでメニューを作成するには、まず左側の箱にある固定ページ、カスタムリンク、カテゴリーのいずれかを選ぶ。
固定ページならそのページのタイトルを選択、カスタムリンクならURLを入力、カテゴリーならカテゴリーを選択して「メニューに追加」を押せば、右側の「メニュー構造」の箱にそれぞれが生成され、あとはページの一番下にある「メニューを保存」を押せばよい。
それをプルダウンメニュー化する場合には、メニュー構造に並んだ各メニュー要素の箱をドラッグして少し右にずらす。こうすれば、そのすぐ上にあるメニュー要素のサブメニューとして設定されるのである。
例えば、筆者のブログの場合、「メーカー」というカテゴリーを階層化して、京セラやソーラーフロンティア、Looop、SolarWorld、サンパワーといった各メーカー毎のサブカテゴリーがある。メーカーというメニュー要素は既にあったのだが、これに各メーカーのサブカテゴリーをドロップダウンメニューとして追加するには、
- 左側の箱のカテゴリーで、各メーカーのサブカテゴリーをチェックして選択し、「メニューに追加」ボタンを押す
- 追加された各メーカーのサブカテゴリーをメニュー構造の箱でそれぞれドラッグしてまずメーカーの下に配置。そして、それをさらに少し右にずらして、メーカーのサブメニューとする
- ドロップダウンメニューに表示させたいメーカー名のカテゴリー全部に対して上記の操作を繰り返し、終わったら、「メニューを保存」を押してメニューを保存
以上である。このように操作を行うと、管理画面上のメニュー構成は以下の様に表示され、ブログの見た目は一番上の図のようになるわけだ。
WordPressでは拍子抜けするくらい、簡単な操作だけでプルダウンメニュー化が出来てしまうのだった。管理画面でカテゴリーの設定やサブカテゴリーの整理をきちんと行ってあり、メニューの設定操作が出来る方なら、実際に3分とか5分もあればできてしまう作業である。
ドロップダウンメニューの作り方：まとめ
固定価格買取制度の施行以来、それまではほとんどいなかったと思われるが、太陽光発電（産業用か住宅用かに拘わらず）を行っていてブログを書いている方も多くなった。
ランキング「にほんブログ村」でみる限り、少なくとも640個ほどのブログ（風力・太陽光発電のカテゴリー）があることが分かっている。実際には、ランキングサイトに登録していないブログもあるので、太陽光発電のブログは1000個くらいはあるかもしれない。
なので、その中でWordPressを使っていてドロップダウンメニューを導入したい方にはご参考になれば幸いである。
もちろん、太陽光発電以外のテーマでも、WordPressのブログであれば、ここでご紹介したプルダウンメニュー化の方法は（WPテーマの依存性がなければだが）適用が可能だと思うので、是非お試し頂ければと思う。
コメント
ドロップダウンメニューを２０個くらい入れたいのですが、７個くらい入れた時に下が表示されないのですが、ドロップダウンメニューは数に限りがあるのですか？おしえてください！お願いします！
いちまる様、
ドロップダウンメニューの表示に上限があるかどうか、私も知らなかったのですが、現在このブログでは、７個以上でも特に問題なく表示できているようですので、上限が7と言うことは恐らく無いと思います。
上限がもしあるとしても、数十といったレベルの数で、20個ということも無さそうに思います。
ただ、上限はOKだとしても、ユーザビリティの面では20個というのは少し多いようにも思われますので、メニューの階層を工夫するなど、ご検討されても良いかもしれません。
あまりお役に立てたか分かりませんが、ご参考になれば幸いです。
どうやるんだろ？ってずっと思ってたんですけど意外と簡単なんですね！
参考になりました。ありがとうございます。
テーマを自作しているのですが、メニュー階層を作ろうとしても、プルダウン表示されずにそのまま下に常に表示された状態になります。CSSの記述が別途必要なのでしょうか。もしご回答頂けるようであればよろしくお願いします。
mokuchichi2020さま、
この記事に書いた作り方では、CSSの記述などは特にしていません。
管理画面でのカテゴリー作成や設定と、外観＞メニューのメニュー構造をドラッグ＆ドロップするだけです。
既に問題が解決されているかと思いますが、お返事が大変遅くなり、誠に申し訳ありませんでした。