WordPressでメガメニューを構築する方法

ども。
今回はWordPressでメガメニューを作る方法を解説しようと思います。
できればプラグインを使いたくない！
そんな方向けです。

では、メガメニュー基本的なHTMLとCSSのソースコードです
とりあえずレスポンシブは考慮しないこととします。

HTML

<header class="header">
    <nav class="h-nav">
        <ul class="h-list">
            <li><a href="#">MENU1</a></li>
            <li><a href="#">MENU2</a>
                <div class="ac-list">
                    <p class="title"><a href="#">MENU2</a></p>
                    <ul>
                        <li><a href="#">SUB MENU1</a></li>
                        <li><a href="#">SUB MENU2</a></li>
                        <li><a href="#">SUB MENU3</a></li>
                        <li><a href="#">SUB MENU4</a></li>
                        <li><a href="#">SUB MENU5</a></li>
                        <li><a href="#">SUB MENU6</a></li>
                    </ul>
                </div>
            </li>
            <li><a href="#">MENU3</a>
                <div class="ac-list">
                    <p class="title"><a href="#">MENU3</a></p>
                    <ul>
                        <li><a href="#">SUB MENU7</a></li>
                        <li><a href="#">SUB MENU8</a></li>
                        <li><a href="#">SUB MENU9</a></li>
                        <li><a href="#">SUB MENU10</a></li>
                    </ul>
                </div>
            </li>
            <li><a href="#">MENU4</a></li>
        </ul>
    </nav>
</header>

CSS

.header {
	background-color: #fff;
	border-bottom: 1px solid #EEE;
}
.h-nav {
	display: flex;
	justify-content: center;
}
.h-list {
	display: flex;
	justify-content: center;
	position: relative;
	margin: 0;
	width: 100%;
}
.h-list li:hover {
	background-color: #EEE;
}
.h-list li a {
	color: #333;
	display: block;
	padding: 25px 20px;
}
.h-nav ul li:hover .ac-list {
	opacity: 1;
	visibility: visible;
}
.ac-list {
	background-color: #19192b;
	left: 0;
	opacity: 0;
	position: absolute;
	text-align: center;
	visibility: hidden;
	width: 100%;
	padding: 30px 0;
}
.ac-list .title {
	max-width: 900px;
	font-size: 18px;
	font-weight: bold;
	border-bottom: 1px solid #FFF;
	width: 100%;
	padding: 0 0 10px;
	margin: 0 auto 30px;
	color: #FFF;
	text-align: left;
}
.ac-list ul {
	max-width: 900px;
	width: 100%;
	margin: auto;
	display: flex;
	flex-wrap: wrap;
}
.ac-list ul li {
	display: inline-block;
	width: 25%;
	margin: 20px 0 0;
}
.ac-list ul li:nth-of-type(-n+4) {
	margin: 0;
}
.ac-list ul li:hover {
	background: transparent;
}
.ac-list ul li a{
	padding: 0 20px;
	color: #FFF;
}
.ac-list ul li a:hover {
	color: #EEE;
}

実装結果

HTMLで普通に構築した場合

これで画像のようなデザインになると思います。
では、これからWordPressのメニュータグ「wp_nav_menu」を導入します。
「wp_nav_menu」のパラメーターは以下の通り。

<?php
wp_nav_menu(
    array(
        'theme_location' => 'header_menu', //<nav> タグで囲む
        'container'      => 'nav', //<nav> タグで囲む
        'container_id'   => 'g_navi', //<nav> タグにid="g_navi"を追加
        'depth'         => 0, //階層無制限
        'items_wrap'    => '<ul class="navi_base fw">%3$s</ul>', //<ul class="navi_base fw">で囲む
        'walker'        => new custom_walker_nav_menu(), //独自に作成されたクラスの呼び出し
    )
);
?>

さて、custom_walker_nav_menuは拡張して出力されるメニューをカスタマイズするクラスとなっています。
このクラスはですと、functions.phpの方でクラスを作成するわけになりますが、なぜ必要なのかといいますと、

・サブメニューを<div class="ac-list">で囲むため
・親メニュー<p class="title"><a href="[親メニューのリンク]">[親メニュー名]</a></p>も入れるため

だからです。
では、そのソースコードです。

<?php
class custom_walker_nav_menu extends Walker_Nav_Menu {
  function start_lvl(&$output, $depth = 0, $args = array()) {
    // 親メニューアイテムを取得
    $parent_item = $args->item;
    $output .= '<div class="ac_list">';
    
    // メインメニューのリンクと名前を出力
    if (isset($parent_item->url) && isset($parent_item->title)) {
      $output .= '<p class="title"><a href="' . esc_url($parent_item->url) . '">' . esc_html($parent_item->title) . '</a></p>';
    }
    
    $output .= '<ul class="sub-menu">';
  }

  function end_lvl(&$output, $depth = 0, $args = array()) {
    $output .= '</ul></div>';
  }

  // サブメニューを持つ親メニューのアイテムを渡す
  function start_el(&$output, $item, $depth = 0, $args = array(), $id = 0) {
    // 深さが0の場合（メインメニュー）
    if ($depth === 0) {
      $args->item = $item; // 親メニューアイテムを保存
    }

    // メニューアイテムの出力
    $output .= '<li class="' . implode(' ', get_post_class('', $item->ID)) . '">';
    $output .= '<a href="' . esc_url($item->url) . '">' . esc_html($item->title) . '</a>';
  }

  function end_el(&$output, $item, $depth = 0, $args = array()) {
    $output .= '</li>';
  }
}
?>

という感じになります。
よろしければご参考に。