
WordPressでは、管理画面の[外観 – メニュー]を使ってメニューを作ります([外観 – メニュー]を使ってない方もいるかと思いますが、100ウェブでは、サイト運用中にコーダー不在でもグローバルメニューを簡単に編集できるようにするために、[外観 – メニュー]を使ってグローバルメニューを生成することをお奨めします)。
そして、この[外観 – メニュー]を使ってもメガメニューを作ることができます。
※ メガメニューの作り方についてはこちら
メニュータグ wp_nav_menu をカスタマイズしてメガメニューの礎(いしずえ)を築く
たとえばこんなメガメニューを作るとします。

よく見かけますね。
マウスホバーで現れるメガメニュー内にも上位階層のメニューを出しておく見せ方です。
これの実際のWordPress登録画面はこちらになります。

メガメニューに出すために第2階層にも「わたしたちについて」を重複して登録しています。
さてこのとき、スマホのハンバーガーメニューも同じメニューを使って出したいとなると困ります。第1階層の「わたしたちについて」と第2階層の「わたしたちについて」が続けて出力されてしまって見栄えが悪すぎます。
したがって、PCのメガメニューでは出す第2階層の「わたしたちについて」を、スマホでは出さないようにします。
具体的にはこんな感じにします。 ↓

テーマの functions.php に以下を追記します。
class delete_2nd_layer_walker_nav_menu extends Walker_Nav_Menu
{
function start_lvl(&$output, $depth = 0, $args = array())
{
if ($depth == 0) { //第2階層
$output .= '';
} else {
$output .= '<ul>';
}
}
function end_lvl(&$output, $depth = 0, $args = array())
{
if ($depth == 0) { //第2階層
$output .= '';
} else {
$output .= '</ul>';
}
}
function start_el(&$output, $item, $depth = 0, $args = array(), $id = 0)
{
$classes = empty($item->classes) ? array() : (array)$item->classes;
$classes[] = 'menu-item-' . $item->ID;
$css_classes = '';
foreach ($classes as $class) {
$css_classes .= $class . ' ';
}
if ($depth == 1) { //第2階層目
$output .= '';
} else { //第一階層以外は通常通り
$output .= '<li class="' . $css_classes . '"><a href="' . $item->url . '">' . $item->title . '</a>';
}
}
function end_el(&$output, $item, $depth = 0, $args = array(), $id = 0)
{
if ($depth == 1) { //第2階層目
$output .= '';
} else { //第一階層以外は通常通り
$output .= '</li>';
}
}
}
これで第2階層のメニューを出さない関数はできあがったので、あとはメニューを表示する場所で wp_nav_menu を使ってメニューを呼び出します。
【[外観 – メニュー]に登録した通り第2階層のメニューを出すメニュー】
<?php wp_nav_menu(
array(
'menu' => 'global-menu', //登録したメニュー名
)
); ?>
【第2階層を出さなくしたメニュー】
<?php wp_nav_menu(
array(
'menu' => 'global-menu', //登録したメニュー名
'walker' => new delete_2nd_layer_walker_nav_menu
)
); ?>
同じ登録メニュー内容を、第二階層のメニューを出さない関数を通して書き換えてHTMLに表示させるわけです。
メガメニューをお使いのサイトではきっと役に立ちます。
WordPressカスタマイズ事例やウェブ制作ノウハウの新着情報、お役立ち情報を
リアルタイムにメルマガ配信!