WordPressのメニューを階層表示(ドロップダウン、入れ子)にする方法をご紹介します。やってみるとCSS編集も必要なく、実に簡単なのですが…方法にたどり着くのに苦労しました。メニューの表示がすっきりすると、直帰率も改善されるはず。WordPressの管理画面から簡単にできるので、メニューがごちゃごちゃしているという人はぜひやってみてくださいね。
親メニューにリンク先を作りたくないというときの方法もご紹介しています。
備忘録的なものですが、お役に立てれば幸いです。
目次で流し読み
ドロップダウンとか入れ子とか言うらしい
さて、まずこの記事でやりたいことですが、メニューをこんな感じに、階層を作って表示したいと思います。
これ、方法さえ分かってしまえば目から鱗が出るくらい簡単なんですが、その方法を紹介しているページにたどりつくのが大変でした。
WordPress弄ってる人って、詳しい人もいれば、私のように全くワケガワカラナイヨ("゚д゚)みたいな人もいるかと思うのです。私の場合、メニューを上の画像のように表示する方法を「検索するためのワード」、が分からなかったんですよね。
だいたい検索すればノウハウがヒットするはずのWordPressで、うまいことやり方が見つからない、そんな状況にしばらく陥っていました。


せっかちなあおねこ君が手厳しいので、前置きはこの辺にして本題に入ります。
今回やりたいメニューの表示、『ドロップダウン』とか『入れ子』と言うようです。聞けばあーなるほどって思いますが、その言葉すらパッと出なかった私。
『メニュー・階層表示』とか、『WordPress・メニュー』とか、当サイトはテーマがAffinger4を使用しているので、『Affinger4・メニュー・階層表示』とか、色々検索かけてはため息をついていました。
WordPressでメニューを階層表示する方法
まず、WordPressの管理画面から、外観、メニューと移動します。
WP管理画面⇒外観⇒メニュー
「編集するメニューを選択」で編集したいメニューを選びます。
この辺であれ?っとつまずく方、若しくはまだメニューを作ってないよという方は、まずメニューのつくり方を参照してください。
次に、階層構造(ドロップダウン、入れ子)にしたい項目をドラッグして、少し右にずらしてあげます。

えぇ?!これだけ?!!
そう。たったこれだけなのですが、やり方を探して右往左往してしまいました。
第1階層メニュー
ー第2階層メニュー
ーー第3階層メニュー
と階層を深くすることも可能です。
階層を作っていくと1段下の項目は『副項目』と出るようです。
ドラッグで元に戻すことも可能です。
保存してページの確認をすると、こんな感じの表示になります。
スマホ表示はこんな感じ。
ちなみに当サイト『もちろんウェブ』を使ってやってみるとこんな感じ。
スマホで見る方が多いと思うので、スマホ表示だけスクショしてみました。
ぽちっと押すと副項目が登場します。
親メニューのリンクを作りたくないときは?
親メニューはリンク先を作らないようにしたいという場合も、難しくありません。
まず、カスタムリンクからリンク先を「#」にして、メニュー項目を作成します。
次に、メニュ-構造の対象項目のURLを空欄にします。
メニュー項目を作成したままの状態だと、URLには「#」が入っているので、ページ遷移はしませんがクリックできる状態になっています。
「#」を消すことによって、クリックできないように(子メニューを開くだけ)にします。
以上で、リンク先のない(子メニューを表示するだけの)親メニューを作成することができます。
WordPressでメニューの順番を入れ替える方法
ついでですが、同じ方法でメニューの順番を入れ替えることも可能です。
記事を増やすにつれ、メニューの順番を変えたいとか、階層構造を変えたいとか、色々あると思いますが、その辺は直感的な操作で簡単にできるので嬉しいですね。
まずWordPressの管理画面から、外観、メニューと移動します。
WP管理画面⇒外観⇒メニュー
「編集するメニューを選択」で編集したいメニューを選びます。
次に順番を入れ替えたい項目をドラッグして、移動します。

知ってしまえばとっても簡単ですね!
このあたりの操作については、ほとんどWordPressのテーマに左右されずに可能かと思います。操作が上手くいかない場合は、使用しているテーマの操作方法などを確認してください。
メニューの階層表示、順番入れ変える方法まとめ

- WP管理画面⇒外観⇒メニューと移動
- 編集するメニューで編集したいメニューを選択
- 階層表示(ドロップダウン・入れ子)にしたいメニュー項目をドラッグで右にずらす

- WP管理画面⇒外観⇒メニューと移動
- 編集するメニューで編集したいメニューを選択
- 順番を入れ替えたいメニュー項目をドラッグで移動
こういう操作、慣れている方ならささっと出来るんでしょうが、私のようなワケワカラン人間だと意外と苦労するものでして。スクリーンショット多めでご紹介してみました。
記事が充実すればするほど、メニューって大事だと思います。CSS編集もいらず、直感的な操作で本当に簡単にできるので、ぜひ活用してみてくださいね。