メニュータグ wp_nav_menu をカスタマイズしてメガメニューの礎（いしずえ）を築く テーマ販売あり

WordPressのメニューはタグ wp_nav_menu でコントロールできますが、一般的な　ul li構造のものしか生成できません。
そのため、liの中にさらにdiv構造を持つようなメガメニューなどを生成しようとすると、カスタムウォーカーという自由にメニューをカスタマイズできる機能を使う必要があります。

そこで今回は、そのカスタムウォーカーという機能を使って、メガメニューを作るために2階層目のliの中にdiv構造を持たせてみます。

まず、テーマのheader.phpなどメニューを表示させたい場所に以下を記述します。

<?php wp_nav_menu(
	array(
		'menu'  => 'mainMenu', //メニュー管理画面で登録したメニュー名
		'container' => '',
		'container_id' => '',
		'container_class' => '',
		'menu_id' => '',
		'menu_class' => 'nav navbar-nav',
		'walker'  => new custom_walker_nav_menu
	)
); ?>

‘walker’ => new custom_walker_nav_menu
という記述がポイントです。ここでカスタムウォーカーを呼び出しています。

では、そのcustom_walker_nav_menuクラスを定義します。
テーマの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>';
	}
}

start_lvl、end_lvlは$depthが未定義ならそれぞれ新しいブランチ、つまり2階層目の始まりと終わりで実行されます。
要するにul->li-> で実行されるということです。

出力されるhtmlは次のようになります。

<ul id="menu-mainmenu" class="nav navbar-nav">
 <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="header-nav-child">
   <div class="container">
    <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>

liの直下にdivを埋め込むことができました。
あとはdivの中をガチャガチャいじっていけば、はい、メガメニューが出来上がります。

---

【この事例を解決するためのWordPressテーマを購入できます】

現在あなたが利用されているWordPressテーマを活かしたまま、このページの事例を解決できるWordPressテーマを、子テーマとして購入できます。
この子テーマを有効化するだけで、現在お使いのデザインテーマにこの事例解決の機能が自動付与されます。
デザインが入っていないため、一般より格段に低い価格（事例の難易度により200円～1.3万円）です。
※ テーマは買い切りです
※ 自由に改変してお使いいただいて構いません
※ すでに子テーマでサイト運用されている方は、当該子テーマをマージしてください