wp_nav_menu() – containerを削除

更新日:

wp_nav_menu()をデフォルトで使用した場合<div>〜</div><nav>〜</nav>で囲まれており'container'が影響しています。この<div>, <nav>を削除するにはいくつかの方法がありますが、簡単に削除したい場合は下記のコードのようにします。

<?php 
	wp_nav_menu(array(
		'container' => false,
	));
?>

または

<?php 
	wp_nav_menu(array(
		'container' => '',
	));
?>

containerを削除せずにカスタムする

何の道<div>, <nav>で囲み<ul>〜</ul>でナビゲーションを出力するというのであれば、わざわざ'container'を削除しなくてもパラメータの設定で出力を変更することもできます。

<?php 
	wp_nav_menu(array(
		'theme_location' => 'header_menu',
		'container_class' => 'header_menu',
		'items_wrap' => '<ul>%3$s</ul>'
	));
?>

'container_class''container'のclass名になります。値を入力することで、class名を自由に変更することができます。

'items_wrap'とはメニュー項目(<ul>〜</ul>)の出力設定になります。デフォルトの場合だと下記のような出力になり<ul>のidやclassを消したいのであれば上記の記述で削除できるのでさっぱりします。

//デフォルト
<ul id="menu-%e3%83%98%e3%83%83%e3%83%80%e3%83%bc" class="menu">
	<li id="menu-item-14" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-14"><a href="">Hello world!</a></li>
	<li id="menu-item-13" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-13"><a href="" aria-current="page">ホーム</a></li>
	<li id="menu-item-12" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-12"><a href="">サンプルページ</a></li>
</ul>


//変更後
<ul>
	<li id="menu-item-14" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-14"><a href="">Hello world!</a></li>
	<li id="menu-item-13" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-13"><a href="" aria-current="page">ホーム</a></li>
	<li id="menu-item-12" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-12"><a href="">サンプルページ</a></li>
</ul>

ただ、上記だけの変更だけだと<li>のclassとidは削除されないのでfunctions.phpで変更を加えます。

functions.php

add_filter('nav_menu_css_class', 'filter_nav_menu', 100, 1);
add_filter('nav_menu_item_id', 'filter_nav_menu', 100, 1);
add_filter('page_css_class', 'filter_nav_menu', 100, 1);
function filter_nav_menu($var){
	return is_array($var) ? array() : '';
}

上記のコードを埋め込むことで<li>のclassとidは削除されます。