WordPressのメニューを階層構造（ドロップダウン・入れ子）にする方法

WordPressのメニューを階層表示（ドロップダウン、入れ子）にする方法をご紹介します。やってみるとCSS編集も必要なく、実に簡単なのですが…方法にたどり着くのに苦労しました。メニューの表示がすっきりすると、直帰率も改善されるはず。WordPressの管理画面から簡単にできるので、メニューがごちゃごちゃしているという人はぜひやってみてくださいね。

親メニューにリンク先を作りたくないというときの方法もご紹介しています。

備忘録的なものですが、お役に立てれば幸いです。

ドロップダウンとか入れ子とか言うらしい

さて、まずこの記事でやりたいことですが、メニューをこんな感じに、階層を作って表示したいと思います。

 

 

これ、方法さえ分かってしまえば目から鱗が出るくらい簡単なんですが、その方法を紹介しているページにたどりつくのが大変でした。

WordPress弄ってる人って、詳しい人もいれば、私のように全くワケガワカラナイヨ("ﾟдﾟ)みたいな人もいるかと思うのです。私の場合、メニューを上の画像のように表示する方法を「検索するためのワード」、が分からなかったんですよね。

だいたい検索すればノウハウがヒットするはずのWordPressで、うまいことやり方が見つからない、そんな状況にしばらく陥っていました。

せっかちなあおねこ君が手厳しいので、前置きはこの辺にして本題に入ります。

今回やりたいメニューの表示、『ドロップダウン』とか『入れ子』と言うようです。聞けばあーなるほどって思いますが、その言葉すらパッと出なかった私。

『メニュー・階層表示』とか、『WordPress・メニュー』とか、当サイトはテーマがAffinger4を使用しているので、『Affinger4・メニュー・階層表示』とか、色々検索かけてはため息をついていました。

 

WordPressでメニューを階層表示する方法

まず、WordPressの管理画面から、外観、メニューと移動します。

WP管理画面⇒外観⇒メニュー

 

「編集するメニューを選択」で編集したいメニューを選びます。

この辺であれ？っとつまずく方、若しくはまだメニューを作ってないよという方は、まずメニューのつくり方を参照してください。

 

次に、階層構造（ドロップダウン、入れ子）にしたい項目をドラッグして、少し右にずらしてあげます。

 

 

えぇ？！これだけ？！！

そう。たったこれだけなのですが、やり方を探して右往左往してしまいました。

 

第１階層メニュー
ー第２階層メニュー
ーー第３階層メニュー

と階層を深くすることも可能です。

階層を作っていくと1段下の項目は『副項目』と出るようです。

ドラッグで元に戻すことも可能です。

 

保存してページの確認をすると、こんな感じの表示になります。

 

スマホ表示はこんな感じ。

 

ちなみに当サイト『もちろんウェブ』を使ってやってみるとこんな感じ。

スマホで見る方が多いと思うので、スマホ表示だけスクショしてみました。

 

 

ぽちっと押すと副項目が登場します。

 

親メニューのリンクを作りたくないときは？

親メニューはリンク先を作らないようにしたいという場合も、難しくありません。

まず、カスタムリンクからリンク先を「#」にして、メニュー項目を作成します。

 

次に、メニュ－構造の対象項目のURLを空欄にします。

メニュー項目を作成したままの状態だと、URLには「#」が入っているので、ページ遷移はしませんがクリックできる状態になっています。

「#」を消すことによって、クリックできないように（子メニューを開くだけ）にします。

 

以上で、リンク先のない（子メニューを表示するだけの）親メニューを作成することができます。

 

WordPressでメニューの順番を入れ替える方法

ついでですが、同じ方法でメニューの順番を入れ替えることも可能です。

記事を増やすにつれ、メニューの順番を変えたいとか、階層構造を変えたいとか、色々あると思いますが、その辺は直感的な操作で簡単にできるので嬉しいですね。

 

まずWordPressの管理画面から、外観、メニューと移動します。

WP管理画面⇒外観⇒メニュー

 

「編集するメニューを選択」で編集したいメニューを選びます。

 

次に順番を入れ替えたい項目をドラッグして、移動します。

 

 

知ってしまえばとっても簡単ですね！

 

このあたりの操作については、ほとんどWordPressのテーマに左右されずに可能かと思います。操作が上手くいかない場合は、使用しているテーマの操作方法などを確認してください。

 

メニューの階層表示、順番入れ変える方法まとめ

 

 

こういう操作、慣れている方ならささっと出来るんでしょうが、私のようなワケワカラン人間だと意外と苦労するものでして。スクリーンショット多めでご紹介してみました。

記事が充実すればするほど、メニューって大事だと思います。CSS編集もいらず、直感的な操作で本当に簡単にできるので、ぜひ活用してみてくださいね。