WordPress

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

投稿日:2018年4月1日 更新日:

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

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

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

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

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

 

 

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

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

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

あおねこ
前置きいいから早くやり方説明してー
えっ……

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

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

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

 

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

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

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

 

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

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

 

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

 

はい、終了

 

えぇ?!これだけ?!!

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

 

第1階層メニュー
ー第2階層メニュー
ーー第3階層メニュー

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

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

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

 

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

 

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

 

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

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

 

 

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

 

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

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

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

 

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

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

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

 

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

 

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

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

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

 

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

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

 

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

 

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

 

はい、終了

 

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

 

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

 

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

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

 

ももねこ
メニューの順番を入れ替える方法
  1. WP管理画面⇒外観⇒メニューと移動
  2. 編集するメニューで編集したいメニューを選択
  3. 順番を入れ替えたいメニュー項目をドラッグで移動

 

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

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

 

-WordPress

Copyright© もちろんウェブ , 2018 All Rights Reserved.