Web制作にちょっと役立つWebメディア

【WordPress】ナビゲーションメニューにサブメニューが表示されない時の対処法

どうも、Link-Web管理人です!

 

ナビゲーションメニューにカーソルを当てると、ずらっとサブメニューが表示される挙動、かっこいいですよね。

↓ こんなやつ

 

CSSやJSで表現するのが一般的です。

私も以前このような実装をした時があったのですが、どう考えても正しくコーディングしていて、WordPressの管理画面でも正しくメニュー階層を指定しているのに、全然サブメニューが出てこない!!とトラブった時がありました。

リンクマン

これだけで1、2時間はハマったわ…。

 

原因はいろいろあるでしょうが、私が解決した方法を今回はお伝えしますね!

テンプレートタグを確認

WordPressでナビゲーションメニューを実装するには、「wp_nav_menu」というタグを使いますが、ここを確認してみましょう!

NGパターン(私がハマったパターン)

 <?php
 wp_nav_menu(
 array(
  'depth' => 1,
  'theme_location' => 'global',
  'container' => 'false',
 )
 );
 ?>

ここでミソなのが「’depth’ => 1」

「depth」は、メニュー階層を表します。何階層まで表示されるかをここで設定。(1なら1階層、2なら2階層。0は全階層)

つまり、上記のコードは1階層だけ表示させますと書いている状態ですね。これではサブメニューは表示されません。。

 

正しく書き直しましょう。

OKパターン

<?php
 wp_nav_menu(
 array(
  'depth' => 0, //0で全階層指定するか、2以上を指定するか
  'theme_location' => 'global',
  'container' => 'false',
 )
 );
 ?>

コード自体が正しいのであれば、このように’depth’で1以外を指定してあげるとサブメニューが表示されるはずです!

 

リンクマン

オイラはテンプレートタグに間違いはないと思い込んで、ひたすらCSSやJSを見直してた。WordPressでトラブった時は、まずはWordPress関数やPHPのコードから確認するべきやな。思い込みアカン!!反省!