WordPressのメニューのli要素、a要素を現実的なHTMLに補正する

WordPressの「メニュー」はウィジェットやブロックエディタでも呼び出すことができて便利ですが、きっちりした案件に使用する際は以下の難点があります。

• li要素に無駄なクラスが付与される
• a要素にクラスが付与されていない

CSSフレームワークを利用するなど、コーディングが完成してから着手する案件では困ります。

また、li要素に付与されるクラスは、びっくりするほど冗長です。

menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-9999 current_page_item menu-item-has-children menu-item-8888

これだけ長いと、ページ全体のファイルサイズに少なからず影響があります。
最小限のコードで、現実的なHTMLに補正する方法を紹介します。li要素のみのTIPSはよく見るのですが、a要素が少なかったので書いておきます。

li要素の補正

li要素のクラス名を上書きするフックは「nav_menu_css_class」です。配列 $classes に、各クラス名が渡されています。

functions.php に以下のコードを追加すると、li要素のクラスが「menu-item」と「current-menu-item」だけになります。
もちろん、配列 $output に渡すクラス名を変えることもできます。

custom_nav_menu_css_class.php

function echo_nav_menu_css_class($classes){
  $output = array(
    'menu-item'
  );
  if(in_array('current-menu-item', $classes)) {
    $output[] = 'current-menu-item';
  }
  return $output;
}
add_filter('nav_menu_css_class', 'custom_nav_menu_css_class', 10, 1);

a要素の補正

a要素のクラス名を上書きするフックは「nav_menu_link_attributes」です。変数 $atts に、属性名がキー、属性値が値として渡されています。

functions.php に以下のコードを追加すると、a要素にもクラス「menu-label」を追加できます。
もちろん $atts['class'] に渡すクラス名は自由です。

custom_nav_menu_link_attributes.php

function custom_nav_menu_link_attributes($atts){
  $atts['class'] = 'menu-label';
  return $atts;
}
add_filter('nav_menu_link_attributes', 'custom_nav_menu_link_attributes', 10, 1);

a要素にカレントクラスを付与しなければならないとき

支給されたコーディングデータによっては、現在ページを示すクラス＝カレントクラスが、リンクを包括するli要素ではなく、a要素に付与する前提となっていることがあります。この場合、CSSを修正してもらうか、WordPressにフックを追加するかということになります。

<a href="https://example.com/about/" aria-current="page" class="menu-label is-current">このサイトについて</a>

フック「nav_menu_link_attributes」は、各リンク先の投稿情報を保持しているオブジェクト $item も使用できます。
$item->current が true であればそのリンクは現在のページです。
functions.php に以下のコードを追加します。

custom_nav_menu_link_attributes_current.php

function custom_nav_menu_link_attributes($atts, $item){
  $atts['class'] = 'menu-label';
  if($item->current) {
    $atts['class'] .= ' is-current';
  }
  return $atts;
}
add_filter('nav_menu_link_attributes', 'custom_nav_menu_link_attributes_current', 10, 2);

フックによるコード書き換えは多用したくないところなので、CSSの修正ができないときだけ利用してください。

私が公開しているCSSフレームワークがこの仕様になっていたのは内緒です。すみません直します…