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 = 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カスタマイズ事例