[WordPress]ナビゲーションメニューに副項目が表示されないときの対処法

今回は、以下の画像のような、ナビゲーションメニューの項目をホバーした時に、サブメニューが表示される方法を解説します。

ナビゲーションメニューに副項目が表示されないときの対処法

それでは、ナビゲーションメニューに副項目を表示させる方法を順を追って解説したいと思います。

1.wp_nav_menu をカスタマイズする

WordPressのダッシュボード　➡️　外観　➡️　テーマエディターで『functions.php』と『header.php』をカスタマイズします。

追加する内容

functions.php

class custom_walker_nav_menu extends Walker_Nav_Menu {
  function start_lvl(&$output, $depth = 0, $args = array()) {
    $output .= '<div class="header-nav-child"><div class="container"><ul class="sub-menu">';
  }
  function end_lvl(&$output, $depth = 0, $args = array()) {
    $output .= '</ul></div></div>';
  }
}

header.phpで使用するクラスを設定する。

header.php

<nav class="header-nav">
<div class="inner">
        <?php
         wp_nav_menu(
         array(
         'menu' => 'main', //メニュー管理画面で登録したメニュー名
         'container' => '',
         'container_id' => '',
         'container_class' => '',
         'menu_id' => '',
         'menu_class' => 'header-items',
         'walker'  => new custom_walker_nav_menu
        )
        );
        ?>
</div><!-- /inner -->
</nav><!-- header-nav -->

⭐️Point

『’walker’ => new custom_walker_nav_menu』を追加する。

2.wordpressのメニューで副項目を設定

以下の画像の手順で、wordpressのメニューで副項目を設定しましょう！

3.ブラウザで副項目が反映されているか確認し、CSSでレイアウトをする。

ブラウザで、副項目が出ていることを確認できたら、CSSでレイアウトを整えましょう！

CSSで、ナビゲーションメニューの項目をホバーした時に、サブメニューが表示されるように設定します。

CSS

/* 親メニューをrelativeに */
.menu-item-has-children {
  position: relative;
}

/* マウスオーバーしたときにカーソルを変更 */
.menu-item-has-children:hover {
  cursor: pointer;
}

/* 子メニューを持つ親メニューにマウスホバーしたとき副項目を表示 */
.menu-item-has-children:hover .header-nav-child {
  display: block;
}

/* サブメニューをabsoluteにして親メニューの下に配置。*/
.header-nav-child {
  display: none;
  position: absolute;
  top: 100%;
  left: -44px;
  width: 200px;
  background: white;
  box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.2);
  padding: 20px;
  z-index: 100;
}

.header-nav-child > .menu-item:not(:last-child) {
  border-bottom: 1px solid #eee;
}

.header-nav-child > .menu-item a {
  display: inline-block;
  width: 100%;
  height: 100%;
  padding: .5em 0;
}

.header-nav-child > .menu-item a:hover {
  background: black;
  color: white;
}

.sub-menu {
    display: flex;
}

.sub-menu li:first-child {
    margin-right: 0;
    margin-bottom: 20px;
}

.sub-menu li:last-child {
    margin-right: 0;
    margin-bottom: 0px;
}

.header-nav .sub-menu li:nth-child(1) > a::before {
    content: "\f44b";
}

.header-nav .sub-menu li:nth-child(2) > a::before {
    content: "\f70c";
}

ブラウザでの表示

これで、サブメニューを設定することが出来ました！

もし、レイアウトを変更したのに反映されないという方は、キャッシュを削除してみましょう！

キャッシュを削除する方法は、以下の記事で解説しています。

WordPressでCSSを変更したのに反映されないときの対処法

レイアウトを変更したい場合は、CSSでぽちぽちと変更しましょう。

まとめ

1.wp_nav_menu をカスタマイズする 2.wordpressのメニューで副項目を設定 3.ブラウザで副項目が反映されているか確認し、CSSでレイアウトをする

それでは、最後まで読んでいただきありがとうございました。