この実装、面倒なら代行します
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テーマを、子テーマとして購入できます。
この子テーマを有効化するだけで、現在お使いのデザインテーマにこの事例解決の機能が自動付与されます。
デザインが入っていないため、一般より格段に低い価格(事例の難易度により200円~1.3万円)です。
※ テーマは買い切りです
※ 自由に改変してお使いいただいて構いません
※ すでに子テーマでサイト運用されている方は、当該子テーマをマージしてください
WordPressカスタマイズ事例やウェブ制作ノウハウの新着情報、お役立ち情報を
リアルタイムにメルマガ配信!
100ウェブで手がけた制作・開発案件を一部、ご紹介。
クライアントからご相談いただいた内容とその実装におけるポイント、工期、予算について確認いただけます。
【テレワーク実施中 につきお電話転送中】
コール中1秒程度無音状態になりますがそのままお待ちください。
受付時間
平日 10:00~18:00
メールでのお問い合わせでも
1営業日以内にご連絡いたします。