WordPressのドロップダウンメニューを3分で作成する方法

WordPressのドロップダウンメニューを設定する方法が、管理画面でメニューをいじっていたら偶然分かったので、それを共有したい。

WordPressのメニューをドロップダウンメニュー化

具体的には、メニューをマウスオーバーするとプルダウンメニュードロップダウンメニュー(実際には”プル”しなくても良いので、以下ドロップダウンに統一)が出てくるようにするカスタマイズである(下図の赤枠がドロップダウンメニューの例)。

WordPressのドロップダウンメニュー

これを実現するには、テーマのカスタマイズ、つまりCSSだのphpだののファイルをいじる作業が必要なのかと思っていた。

しかし、そんな難しいことを全然しなくても簡単にドロップダウンメニューを実現できることを発見したので、備忘録を兼ねて筆者と同様にWordPress初心者の方のご参考にでもなればと思いここに書き記しておくことにした。

(かなりページビューの多いWordPressブログでもドロップダウンメニュー化されていなかったりするので、意外とご存じない方が多いのかも?という仮説はある。)

WordPressテーマの依存性について

本ブログ読者の方であれば、最近このブログの体裁や外見がかなり変わったことにお気づきの方も多いかもしれないが、これはWordPressのテーマを変えたからである。以前はSEOなどで優れ無料で使える「Stinger2」というテーマを使用していた。

当初こちらをバージョンアップし「Stinger5」に移行しようとしていたのだが、スマートフォンのメニューが上手く動作しないという問題が見つかり、解決できなかったため断念した。一方で、代替となるテーマを探してみたところ、「Simplicity」というStingerと同じく内部SEOへの配慮がされておりカスタマイズ性も高いテーマを見つけたので、こちらに乗り換えたという経緯がある。

筆者が行ったメニューのプルダウンメニュー化は、WordPressの一般的な管理画面から行えるようなので恐らくテーマへの依存性はあまり無いのではと考えているが、Simplicity以外ではうまく行かないかもしれない。その場合、筆者ではほとんど対応できないので、悪しからずご了承頂きたい。

さて、前置きはこれ位として、そのメニュープルダウン化の方法を以下に記そう。

メニューの管理画面でメニューアイテムを操作

まずWordPressの管理画面で左側のメニューから外観>メニューを選択してメニューの編集画面を開く。

WordPressでメニューを作成するには、左側の箱にある固定ページ、カスタムリンク、カテゴリーのいずれかを選んで固定ページならそのページのタイトルを選択、カスタムリンクならURLを入力、カテゴリーならカテゴリーを選択して「メニューに追加」を押せば右側の「メニュー構造」の箱にそれぞれが生成され、あとはページの一番したにある「メニューを保存」を押せばよい。

それをプルダウンメニュー化する場合には、メニュー構造に並んだ各メニュー要素の箱をドラッグして少し右にずらす。こうすれば、そのすぐ上にあるメニュー要素のサブメニューとして作成されるのである。

例えば、筆者のブログの場合、「メーカー」というカテゴリーを階層化して、京セラやソーラーフロンティア、Looop、SolarWorld、サンパワーといった各メーカー毎のサブカテゴリーがある。メーカーというメニュー要素は既にあったのだが、これに各メーカーのサブカテゴリーをドロップダウンメニューとして追加するには、

  1. 左側の箱のカテゴリーで、各メーカーのサブカテゴリーをチェックして選択し、「メニューに追加」ボタンを押す
  2. 追加された各メーカーのサブカテゴリーをメニュー構造の箱でそれぞれドラッグしてまずメーカーの下に配置。そして、それをさらに少し右にずらして、メーカーのサブメニューとする
  3. ドロップダウンメニューに表示させたいメーカー名のカテゴリー全部に対して上記の操作を繰り返し、終わったら、「メニューを保存」を押してメニューを保存

以上である。このように操作を行うと、管理画面上のメニュー構成は以下の様に表示され、ブログの見た目は一番上の図のようになるわけだ。

WordPress管理画面でドロップダウンメニューを作成したところ

WordPressでは拍子抜けするくらい、簡単な操作だけでプルダウンメニュー化が出来てしまうのだった。管理画面でカテゴリーの設定やサブカテゴリーの整理をきちんと行ってあり、メニューの設定操作が出来る方なら、実際に3分とか5分もあればできてしまう作業である。

まとめ

固定価格買取制度の施行以来、それまではほとんどいなかったと思われるが、太陽光発電(産業用か住宅用かに拘わらず)を行っていてブログを書いている方も多くなった。

ランキング「にほんブログ村」でみる限り、少なくとも640個ほどのブログ(風力・太陽光発電のカテゴリー)があることが分かっている。実際には、ランキングサイトに登録していないブログもあるので、太陽光発電のブログは1000個くらいはあるかもしれない。

なので、その中でWordPressを使っていてドロップダウンメニューを導入したい方にはご参考になれば幸いである。

もちろん、太陽光発電以外のテーマでも、WordPressのブログであれば、ここでご紹介したプルダウンメニュー化の方法は(WPテーマの依存性がなければだが)適用が可能だと思うので、是非お試し頂ければと思う。

スポンサーリンク

コメント

  1. いちまる より:

    ドロップダウンメニューを20個くらい入れたいのですが、7個くらい入れた時に下が表示されないのですが、ドロップダウンメニューは数に限りがあるのですか?おしえてください!お願いします!

    • ビッグふぃ~るど より:

      いちまる様、

      ドロップダウンメニューの表示に上限があるかどうか、私も知らなかったのですが、現在このブログでは、7個以上でも特に問題なく表示できているようですので、上限が7と言うことは恐らく無いと思います。

      上限がもしあるとしても、数十といったレベルの数で、20個ということも無さそうに思います。

      ただ、上限はOKだとしても、ユーザビリティの面では20個というのは少し多いようにも思われますので、メニューの階層を工夫するなど、ご検討されても良いかもしれません。

      あまりお役に立てたか分かりませんが、ご参考になれば幸いです。