【WordPress】指定したメニューのaタグにclassを追加する方法

ご注意
※liタグに付与されるクラスは多いため省略して表記しています。
※ブロックエディタやフルサイト編集で作成したメニューの場合はクラスが付与されますが、詳しくは未検証です。

完成イメージ

WordPressのメニューは通常この様にaタグにはclassが付与されていません。

<!-- 編集前 -->
<ul id="menu-sample" class="menu">
	<li id="menu-item-111" class="menu-item">
		<a href="/">メニューA</a>
	</li>
	<li id="menu-item-222" class="menu-item">
		<a href="/">メニューB</a>
	</li>
</ul>

カスタマイズすることで、メニューのaタグに class=”add-class” を追加してみます。

<!-- 編集後 -->
<ul id="menu-sample" class="menu">
	<li id="menu-item-111" class="menu-item">
		<a href="/" class="add-class">メニューA</a>
	</li>
	<li id="menu-item-222" class="menu-item">
		<a href="/"class="add-class">メニューB</a>
	</li>
</ul>

編集方法

functions.phpで、theme_location を使用してif分岐、さらに正規表現でリンクを指定しています。

親のclass名・id名・メニューID(メニュー番号)などを指定することも可能だと思いますが、メニューは管理画面からふれる機会が多いと思うので、内容が変動しそうなキーワードをコードに組み込むのは抵抗があり、theme_locationを使用するようにしてみましたがいかがでしょう。

//'theme_location'  => 'footer_menu', に適用する場合。

function add_class_on_link($item_output, $item, $depth, $args) {
  // theme_locationをチェックして、特定のメニュー位置の場合だけクラスを追加
  if (isset($args->theme_location) && $args->theme_location === 'footer_menu') {
      $item_output = preg_replace('/(<a.*?)/', '$1' . " class='add-class'", $item_output);
  }
  return $item_output;
}
add_filter('walker_nav_menu_start_el', 'add_class_on_link', 10, 4);

おまけ①：全メニューのaリンクにクラスを付与する

この場合は特に条件を指定せず正規表現で実現可能です。

function add_class_on_link($item_output, $item){
 return preg_replace('/(<a.*?)/', '$1' . " class='add-class'", $item_output);
}
add_filter('walker_nav_menu_start_el', 'add_class_on_link', 10, 4);