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は削除されます。