前回、カスタムメニューを有効化させてナビゲーションメニューを表示する方法をご紹介しました。

今回はカスタムメニューのHTMLをカスタマイズ方法をご紹介します。
テンプレートタグwp_nav_menu() のパラメータで、idやclassの追加をはじめ、アイコンや矢印など画像やテキストも付け加えることができます。

設定できるパラメータ

テンプレートタグ/wp nav menu　からコードを引用し説明します。

<?php
$defaults = array(
	'theme_location'  => '',
	'menu'            => '',
	'container'       => 'div',
	'container_class' => '',
	'container_id'    => '',
	'menu_class'      => 'menu',
	'menu_id'         => '',
	'echo'            => true,
	'fallback_cb'     => 'wp_page_menu',
	'before'          => '',
	'after'           => '',
	'link_before'     => '',
	'link_after'      => '',
	'items_wrap'      => '<ul id="%1$s" class="%2$s">%3$s</ul>',
	'depth'           => 0,
	'walker'          => ''
);
wp_nav_menu( $defaults );
?>

このように各種パラメータを設定することができます。

具体的に次のように値を入れてみましょう。※設定が不要なパラメータは記述しておく必要はありません。

<?php

$defaults = array(
	'theme_location'  => 'primary',
	'container'       => 'nav',
	'container_class' => 'AAA',
	'container_id'    => 'BBB',
	'menu_class'      => 'CCC',
	'menu_id'         => 'DDD',
	'before'          => '前付',
	'after'           => '後付',
	'link_before'     => 'リンク前',
	'link_after'      => 'リンク後',
	'items_wrap'      => '<ul id="%1$s" class="%2$s">%3$s</ul>',
);
wp_nav_menu( $defaults );
?>

次のようにHTMLが生成されます。

<nav id="BBB" class="AAA">
<ul id="DDD" class="CCC">
<li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-1">前付<a title="メニュー1" href="###">リンク前メニュー1リンク後</a>後付</li>
</ul>
</nav>