WordPress Logo

通常、ワードプレスのカスタムメニューを出力するときは wp_nav_menu を使います。

一例を挙げると次のように記述しますね。

<ul>
	<?php wp_nav_menu ( array('menu'=>'header-navi', 'container'=>false, 'items_wrap'=>'%3$s', 'fallback_cb'=>'') ); ?>
</ul>

これで出力されるHTMLは、概ね次のようになります。

<ul>
	<li id="menu-item-2851" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home current-menu-item page_item page-item-2 current_page_item menu-item-2851">
		<a href="https://example.com/" aria-current="page">トップページ</a>
	</li>
	<li id="menu-item-7886" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-7886">
		<a href="https://example.com/service">事業一覧</a>
	</li>
 	<li id="menu-item-7687" class="menu-item menu-item-type-post_type_archive menu-item-object-oz-custom-works menu-item-7687">
		<a href="https://example.com/works">事業内容</a>
	</li>
	<li id="menu-item-7525" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-7525">
		<a href="https://example.com/price">料金表</a>
	</li>
 	<li id="menu-item-2766" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2766">
		<a href="https://example.com/profile">会社概要</a>
	</li>
	<li id="menu-item-2764" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2764">
		<a href="https://example.com/contact">お問い合わせ</a>
	</li>
</ul>

管理画面側で設定したメニューをラクに出力できるので、使い勝手がよく便利なのですが、出力されるHTMLに余分なidやclassなどが付与されていることが気になります。

そこで今回は、これらの不要なコードを削除する方法を紹介します。

［wp_nav_menu］の <ul><li> からidを削除

まずは<li>要素に付与されるid属性を削除する方法です。

function remove_menu_id( $id ){
	return $id = array();
}
add_filter('nav_menu_item_id', 'remove_menu_id', 10);

［wp_nav_menu］の <ul><li> からclassを削除

続いては、同様に<li>要素に付与されるclass属性を削除する方法です。

function remove_menu_class( $classes ){ 
	 return $classes = array();
}
add_filter('nav_menu_css_class', 'remove_menu_class', 10, 2);

［wp_nav_menu］の <ul><li><a> からaria-current属性を削除

最後は、リンクの<a>タグに付与されるaria-current属性を削除するコードです。

function remove_menu_aria_current( $atts, $item, $args ){
	unset ( $atts['aria-current'] );
	return $atts;
}
add_filter('nav_menu_link_attributes', 'remove_menu_aria_current', 11, 5);

上記のコードをテーマファイルの［functions.php］内に記述します。

結果

紹介したすべてのコードを使うと、出力されるHTMLが見事にスッキリします。

<ul>
	<li>
		<a href="https://example.com/">トップページ</a>
	</li>
	<li>
		<a href="https://example.com/service">事業一覧</a>
	</li>
 	<li>
		<a href="https://example.com/works">事業内容</a>
	</li>
	<li id">
		<a href="https://example.com/price">料金表</a>
	</li>
 	<li>
		<a href="https://example.com/profile">会社概要</a>
	</li>
	<li>
		<a href="https://example.com/contact">お問い合わせ</a>
	</li>
</ul>

ぜひお試しください。