wp_nav_menuでliやa要素にclassを追加する方法

ナビゲーションメニューを出力するwp_nav_menu。
wp_nav_menuには、出力するulタグにclassを追加するオプションである menu_classが用意されているが、ulタグの中のliタグやaタグにclassを追加するオプションはないのでフィルターイベントを追加する。

functions.php の編集

functions.php にフィルターイベントを追記。

functions.php

// wp_nav_menuのliにclass追加
function add_additional_class_on_li($classes, $item, $args)
{
  if (isset($args->add_li_class)) {
    $classes['class'] = $args->add_li_class;
  }
  return $classes;
}
add_filter('nav_menu_css_class', 'add_additional_class_on_li', 1, 3);

// wp_nav_menuのaにclass追加
function add_additional_class_on_a($classes, $item, $args)
{
  if (isset($args->add_li_class)) {
    $classes['class'] = $args->add_a_class;
  }
  return $classes;
}
add_filter('nav_menu_link_attributes', 'add_additional_class_on_a', 1, 3);

wp_nav_menu の編集

次にwp_nav_menuにclassを追加するオプションを追記

header.php

<?php
  wp_nav_menu(
    array(
      'theme_location' => 'headernav',
      'container' => false,
      'menu_class' => 'navbar-nav me-auto mb-2 mb-md-0',
      'add_li_class' => 'nav-item', // liタグへclass追加
      'add_a_class' => 'nav-link text-white' // aタグへclass追加
    )
  );
?>