wp_nav_menuのサブメニュークラス「sub-menu」を変更する方法

WordPressのwp_nav_menu()で出力されるコードのsub-menuクラスを任意のクラスに変更する方法をご紹介します。

wp_nav_menu()の初期出力コード

wp_nav_menu()は 管理画面 > 外観 > メニューで登録されたナビゲーションメニューを表示するコードです。

//PHP
<?php wp_nav_menu(); ?>
ナビゲーションメニュー構成

  • ページタイトル1
  • ページタイトル2
    • ページタイトル2-1

ナビゲーションメニューが上記の構成だった場合、デフォルトでは下記のHTMLが出力されます。

//出力されるHTMLコード
<div class="menu-(menu名)-container">
<ul id="menu-(menu名)" class="menu">
	<li id="menu-item-(id)" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-(id)">
		<a href="#">ページタイトル1</a>
	</li>
	<li id="menu-item-(id)" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-(id)">
		<a href="#" aria-haspopup="true" aria-expanded="false">ページタイトル2</a>
		<ul class="sub-menu">
			<li id="menu-item-(id)" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-(id)">
				<a href="#">ページタイトル2-1</a>
			</li>
		</ul>
	</li>
</ul>
</div>

出力コードのクラスを変更する

1番上の階層の<ul class=”menu”>の方はwp_nav_menuのパラメーター（’menu_class’）でクラスの変更ができますが、副項目(サブメニュー)の<ul class=”sub-menu”>のクラスはパラメーターから変更することはできません。

実現するには下記のように記述します。

<?php
echo str_replace('sub-menu', 'subnav subnav-drop', wp_nav_menu( array(
	'echo' => false, //（真偽値） （オプション） メニューをHTML出力する(true)か、PHPの値で返す(false)か 初期値： true
) ));
?>

処理の内容は以下の通り。

  • wp_nav_menu()でメニューのHTMLコードを文字列で取得
  • str_replaceで、HTMLコード内の文字列「sub-menu」を「subnav subnav-drop」に置換

そうすると、以下のコードが出力されます。

<div class="menu-(menu名)-container">
<ul id="menu-(menu名)" class="menu">
	<li id="menu-item-(id)" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-(id)">
		<a href="#">ページタイトル1</a>
	</li>
	<li id="menu-item-(id)" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-(id)">
		<a href="#" aria-haspopup="true" aria-expanded="false">ページタイトル2</a>
		<ul class="subnav subnav-drop"> //←＊＊ 変更箇所 ＊＊
			<li id="menu-item-(id)" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-(id)">
				<a href="#">ページタイトル2-1</a>
			</li>
		</ul>
	</li>
</ul>
</div>

雑記

wp_nav_menu()を使わず、中身をwp_get_nav_menu_items()で取得してforeachで回す形をよく使っていましたが、サブメニューのクラスだけ変更できたらな…というケースがあったので調べました。
上記はシンプルでわかりやすいものの力技です。下記URLにはフィルターを用いた方法などいくつか方法が記述されているので、興味がある方はどうぞ。
（記事の日付が古いため、参考程度が良いかと思います）