動的メニューのul,li,a要素へクラスを付与する方法

2022年9月8日2024年2月2日

WordPressでカスタムヘッダーメニューを作成すると、
以下のような構造でコードが出力されます。
本記事では、この動的メニューの各要素(ul, li, a)へクラス名を付与する方法をご説明します。

<ul>
    <li>
        <a href="">テストメニュー</a>
    </li>
</ul>
<ul>
    <li>
        <a href="">テストメニュー</a>
    </li>
</ul>
<ul>
    <li>
        <a href="">テストメニュー</a>
    </li>
</ul>

functions.phpを編集

liとa要素へクラス名を付与するために[functions.php]へ以下のコードを記載してください。
(※ul要素に関しては次項で記載するwp_nav_menu()に標準でクラス名を付与する機能がついているためここでは対応不要です。)

// wp_nav_menuのliにclass追加
function add_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_class_on_li', 1, 3);

// wp_nav_menuのaにclass追加
function add_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_class_on_a', 1, 3);

header.phpを編集

[header.php]でwp_nav_menu()を編集して各タグへクラスを追加する

<?php
  wp_nav_menu(
    // メニューを動的に表示する
    array(
    'depth' => 1,
    'theme_location' => 'header-menu',
    'container' => 'false',
    'menu_class' => 'menu', // ul クラス名を追加
    'add_li_class' => 'menu__item', // li クラス名を追加
    'add_a_class' => 'menu__a__link', // a クラス名を追加
    )
);
?>

以上のコードを記載することで、以下のようにクラス名が反映されていると思いますので検証ツールから確認してみてください。