WordPressカスタマイズ事例

メニュータグ 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 costom_walker_nav_menu
	)
); ?>

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

では、そのcostom_walker_nav_menuクラスを定義します。
テーマのfunction.phpに下記を記述します。

class costom_walker_nav_menu extends Walker_Nav_Menu {
	function start_lvl( &$output, $depth, $args ) {
		$output .= '<div class="header-nav-child"><div class="container"><ul class="sub-menu">';
	}
	function end_lvl( &$output, $depth, $args ) {
		$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カスタマイズ事例