WordPressテーマのメニューで出力されるHTMLを最小限にする

WordPressのテーマでメニューを作るとやたらとclassがついたものが出力される。必要なもの以外は省きたいので最小限の出力にする。

通常の状態では以下のようなメニューが出力される。

<div class="menu-mainmenu-container">
<ul>
<li id="menu-item-1024" class="menu-item menu-item-type-custom menu-item-object-page menu-item-1024"><a href="https://example.com/">メニュー1</a></li>
<li id="menu-item-1025" class="menu-item menu-item-type-custom menu-item-object-page menu-item-1025"><a href="https://example.com/">メニュー2</a></li>
<li id="menu-item-1026" class="menu-item menu-item-type-custom menu-item-object-page menu-item-1026"><a href="https://example.com/">メニュー3</a></li>
</ul>
</div>

functions.php に追記

//テーマメニューを追加
add_action('after_setup_theme', function () {
  register_nav_menu('mainmenu', 'メインメニュー');
});

//テーマメニューの出力をカスタマイズ
class custom_walker extends Walker_Nav_Menu 
{
  function start_el(&$output, $item, $depth = 0, $args = array(), $id = 0)
  {
    $attr = '';
    if ($item->target != '') {
      $attr .= ' target="' . $item->target . '"';
    }
    if ($item->classes[0] != '') {
      $attr .= ' class="' . $item->classes[0] . '"';
    }
    $output .= '<a href="' . $item->url . '"' . $attr . '>' . $item->title . '</a>';
  }
  function end_el(&$output, $item, $depth = 0, $args = array()) {
    $output .= '';
  }
}

最低限 target と class の指定は出来るようにしている。

テンプレートのメニューを表示する部分に記述

<?php 
wp_nav_menu(array(
	'theme_location'    =>'mainmenu',
	'container'         => '',
	'walker'            => new custom_walker,
	'items_wrap'        => '%3$s'
));
?>

出力されるメニュー

<a href="https://example.com/">メニュー1</a><a href="https://example.com/">メニュー2</a><a href="https://example.com/">メニュー3</a>

最小限になった。