WordPressのメニューを階層表示（ドロップダウン、入れ子）にする方法をご紹介します。やってみるとCSS編集も必要なく、実に簡単なのですが…方法にたどり着くのに苦労しました。メニューの表示がすっきりすると、直帰率も改善されるはず。WordPressの管理画面から簡単にできるので、メニューがごちゃごちゃしているという人はぜひやってみてくださいね。
親メニューにリンク先を作りたくないというときの方法もご紹介しています。
備忘録的なものですが、お役に立てれば幸いです。
目次で流し読み
ドロップダウンとか入れ子とか言うらしい
さて、まずこの記事でやりたいことですが、メニューをこんな感じに、階層を作って表示したいと思います。
これ、方法さえ分かってしまえば目から鱗が出るくらい簡単なんですが、その方法を紹介しているページにたどりつくのが大変でした。
WordPress弄ってる人って、詳しい人もいれば、私のように全くワケガワカラナイヨ("ﾟдﾟ)みたいな人もいるかと思うのです。私の場合、メニューを上の画像のように表示する方法を「検索するためのワード」、が分からなかったんですよね。
だいたい検索すればノウハウがヒットするはずのWordPressで、うまいことやり方が見つからない、そんな状況にしばらく陥っていました。
せっかちなあおねこ君が手厳しいので、前置きはこの辺にして本題に入ります。
今回やりたいメニューの表示、『ドロップダウン』とか『入れ子』と言うようです。聞けばあーなるほどって思いますが、その言葉すらパッと出なかった私。
『メニュー・階層表示』とか、『WordPress・メニュー』とか、当サイトはテーマがAffinger4を使用しているので、『Affinger4・メニュー・階層表示』とか、色々検索かけてはため息をついていました。
WordPressでメニューを階層表示する方法
まず、WordPressの管理画面から、外観、メニューと移動します。
WP管理画面⇒外観⇒メニュー
「編集するメニューを選択」で編集したいメニューを選びます。
この辺であれ？っとつまずく方、若しくはまだメニューを作ってないよという方は、まずメニューのつくり方を参照してください。
次に、階層構造（ドロップダウン、入れ子）にしたい項目をドラッグして、少し右にずらしてあげます。
えぇ？！これだけ？！！
そう。たったこれだけなのですが、やり方を探して右往左往してしまいました。
第１階層メニュー
ー第２階層メニュー
ーー第３階層メニュー
と階層を深くすることも可能です。
階層を作っていくと1段下の項目は『副項目』と出るようです。
ドラッグで元に戻すことも可能です。
保存してページの確認をすると、こんな感じの表示になります。
スマホ表示はこんな感じ。
ちなみに当サイト『もちろんウェブ』を使ってやってみるとこんな感じ。
スマホで見る方が多いと思うので、スマホ表示だけスクショしてみました。
ぽちっと押すと副項目が登場します。
親メニューのリンクを作りたくないときは？
親メニューはリンク先を作らないようにしたいという場合も、難しくありません。
まず、カスタムリンクからリンク先を「#」にして、メニュー項目を作成します。
次に、メニュ－構造の対象項目のURLを空欄にします。
メニュー項目を作成したままの状態だと、URLには「#」が入っているので、ページ遷移はしませんがクリックできる状態になっています。
「#」を消すことによって、クリックできないように（子メニューを開くだけ）にします。
以上で、リンク先のない（子メニューを表示するだけの）親メニューを作成することができます。
WordPressでメニューの順番を入れ替える方法
ついでですが、同じ方法でメニューの順番を入れ替えることも可能です。
記事を増やすにつれ、メニューの順番を変えたいとか、階層構造を変えたいとか、色々あると思いますが、その辺は直感的な操作で簡単にできるので嬉しいですね。
まずWordPressの管理画面から、外観、メニューと移動します。
WP管理画面⇒外観⇒メニュー
「編集するメニューを選択」で編集したいメニューを選びます。
次に順番を入れ替えたい項目をドラッグして、移動します。
知ってしまえばとっても簡単ですね！
このあたりの操作については、ほとんどWordPressのテーマに左右されずに可能かと思います。操作が上手くいかない場合は、使用しているテーマの操作方法などを確認してください。
メニューの階層表示、順番入れ変える方法まとめ
- WP管理画面⇒外観⇒メニューと移動
- 編集するメニューで編集したいメニューを選択
- 階層表示（ドロップダウン・入れ子）にしたいメニュー項目をドラッグで右にずらす
- WP管理画面⇒外観⇒メニューと移動
- 編集するメニューで編集したいメニューを選択
- 順番を入れ替えたいメニュー項目をドラッグで移動
こういう操作、慣れている方ならささっと出来るんでしょうが、私のようなワケワカラン人間だと意外と苦労するものでして。スクリーンショット多めでご紹介してみました。
記事が充実すればするほど、メニューって大事だと思います。CSS編集もいらず、直感的な操作で本当に簡単にできるので、ぜひ活用してみてくださいね。