wp_nav_menuでメガメニューを作成する

はい、みなさんこんにちは。

今日は前々回ブログで紹介したwp_nav_menuを使用してheader部分のメガメニューを作成してみようと思います。

基本的な実装の仕方は下記の記事をまず確認してくださいね。

WP（ワードプレス）で外観>メニューを作成した場合にサブタイトルを表示する方法

下記は前回も説明した、をheaderに表示する方法です。
もちろんtheme_locationやcontainerなどの中身は任意のものに変更してください。

<?php
    wp_nav_menu(
    array(
        'theme_location'     => 'header',
        'container'               => 'nav',//<nav>タグで囲うよ！
        'container_id'          => 'gnav',//<nav id="gnav">にするよ！
        'menu'                    => 'header',
        'depth'                    => 0,
        'items_wrap' => '<ul class="flexbox fw">%3$s</ul>',
    ));
?>

上記のarray要素の中に、メガメニューを作成する際今回は下記の行を1行追加します。

 'walker'  => new custom_walker_nav_menu

全体的には下記のようになります。

<?php
    wp_nav_menu(
    array(
        'theme_location'     => 'header',
        'container'               => 'nav',//<nav>タグで囲うよ！
        'container_id'          => 'gnav',//<nav id="gnav">にするよ！
        'menu'                    => 'header',
        'depth'                    => 0,
        'items_wrap' => '<ul class="flexbox fw">%3$s</ul>',
        'walker'  => new custom_walker_nav_menu
    ));
?>

ちなみに「’walker’ => new」以降のクラス定義は好きに決定していただいて大丈夫です。
はじめて実装する人は無難に上記コピペしてもらったほうがわかりやすいかもしれません。

上記を追加したら、functionに下記ソースを追加します。

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

上記の「start_lvl」、「end_lvl」は$depthが未定義だった場合、ここから2階層目が始まって、ここまでが２階層目の終わりですよ
という形で実行されます。
で、HTML上の吐き出しが下記のようになります。

<ul class="flexbox fw">
 <li id="menu-item-30" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-30">
  <a href="#">親メニュー</a>
  <div class="submenuWrap">
   <div class="submenu_in">
    <ul class="sub-menu">
     <li id="menu-item-31" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-31">
      <a href="#">子メニューA</a>
     </li>
     <li id="menu-item-32" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-32">
      <a href="#">子メニューB</a>
     </li>
     <li id="menu-item-33" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-33">
      <a href="#">子メニューC</a>
     </li>
    </ul>
   </div>
  </div>
 </li>
</ul>

これでメガメニューの作成が可能になりました！
意外と簡単ですね✨

みなさんも試してみてください。

Share: