WordPressでカスタムメニューを出力する際に必要なwp_nav_menuをカスタマイズする方法を紹介します。パラメーターを1つずつ解説しているのでデフォルトの設置からカスタマイズまで幅広くこの記事で出来ます。

まずは基本の形

まずはwp_nav_menuのデフォルトの形を紹介します。パラメーターは全てデフォルト値を記述しています。

    <?php
$defaults = array(
	'menu'            => '', //メニューを指定 id or スラッグ or 名前 ※theme_locationを使用する際は不要?
	'menu_class'      => 'menu', //メニューにclassを付与
	'menu_id'         => '{メニューのスラッグ}-{連番}', //メニューにidを付与
	'container'       => 'div', //コンテナの要素を指定、不要な場合はfalse div or nav or false
	'container_class' => 'menu-{メニューのスラッグ}-container', //コンテナにclassを付与
	'container_id'    => '', //コンテナにidを付与
	'fallback_cb'     => 'wp_page_menu', //theme_locationで指定したメニューが見つからない場合に実行fallback_cb
	'before'          => '', //リンクの開始タグ前に挿入
	'after'           => '', //リンクの閉じタグに挿入
	'link_before'     => '', //リンクテキストの前に挿入
	'link_after'      => '', //リンクテキストの後に挿入
	'echo'            => true, //trueの場合はHTML出力、falseの場合はPHPの値
	'depth'           => 0, //メニュー階層を指定、※0の場合は全階層
	'walker'          => '', //ウォーカーを使用する場合は指定
	'theme_location'  => '', //テーマの場所を指定
	'items_wrap'      => '<ul id="%1$s" class="%2$s">%3$s</ul>', //リスト表示の内容を定義 %1$sは'menu_id' のパラメーターの値 %2$sは'menu_class' のパラメーターの値 %3$sはリスト項目の内容
);
wp_nav_menu( $defaults );
?>

HTML出力例

HTMLの表示例です。項目(プライバシー、コンタクト)はカスタムメニューの登録内容により異なります。

    <div class="menu-test-container">
    <ul id="menu-test-1" class="menu">
        <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-45">
            <a href="wp-fan.com/privacy-policy/">プライバシーポリシー</a>
        </li>
        <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-42">
            <a href="wp-fan.com/contact/">コンタクト</a>
        </li>
    </ul>
</div>

表示例

画面の表示例です。リスト記号についてはCSSで消している場合は表示されません。

    ・プライバシーポリシー
・コンタクト

以上がデフォルトで出力した際に表示される内容となります。それを踏まえてカスタマイズの方法をみていきましょう。

メニューを指定

まずは表示するカスタムメニューを指定しましょう。theme_locationを指定することで表示するメニューを指定することができます。

コード記述例

    <?php 
$args = array(
	'theme_location'  => 'header' //register_nav_menusで定義した場所
);
wp_nav_menu( $args );
?>

メニューがうまく表示されない場合は定義されていない可能性があります。その場合は定義の仕方を

WordPressでカスタムメニューを導入する方法

WordPressでカスタムメニューを導入する方法

にて記載しているので参考にしてみてください!

メニューの項目の編集方法についても以下の記事で詳しく書いているのでまだ設定が終わってない方は参考にしてみてください!

誰でもわかる!wordpressのナビゲーションメニュー を設定する方法

誰でもわかる!wordpressのナビゲーションメニュー を設定する方法

リンクテキストの前後にアイコンを挿入

メニューによくあるアイコンを挿入する方法です。例としてリンクテキストの後ろに挿入してみます。前に挿入したい場合はbeforeに記述してください。

またアイコンを表示する場合はCSSファイルかJSなどで事前にアイコンを読み込ませる必要があります。

コード記述例

    <?php 
$args = array(
	'theme_location'  => 'header',
	'link_before'     => '',
	'link_after'      => '<i class="icon ion-md-arrow-dropright"></i>',
);
wp_nav_menu( $args );
?>

メニュー表示例

メニュー表示例

コンテナを削除

ulを包むタグを削除する方法です。containerにfalseを指定するとコンテナを削除することが出来ます。

コード記述例

    <?php 
$args = array(
	'theme_location'  => 'header',
	'container'       => '',
);
wp_nav_menu( $args );
?>

HTML出力例

    <ul id="menu-test" class="menu">
	<li id="menu-item-45" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-45">
		<a href="http://gotojapan.local/privacy-policy/">プライバシーポリシー</a>
	</li>
	<li id="menu-item-42" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-42">
		<a href="http://gotojapan.local/contact/">コンタクト</a>
	</li>
</ul>

コンテナをnavに変更し、classを付与

独自のCSSを当てたい場合はclassがあったほうが便利な時があります。そういった時にclassを付与出来ます。例ではadd-classというclassを付与しました。

コード記述例

    <?php 
$args = array(
	'theme_location'  => 'header',
	'container'       => 'nav',
	'container_class' => 'add-class',
);
wp_nav_menu( $args );
?>
    

HTML出力例

    <nav class="add-class">
	<ul id="menu-test" class="menu">
		<li id="menu-item-45" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-45">
			<a href="http://gotojapan.local/privacy-policy/">プライバシーポリシー</a>
		</li>
		<li id="menu-item-42" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-42">
			<a href="http://gotojapan.local/contact/">コンタクト</a>
		</li>
	</ul>
</nav>

ULに付与される不要なclassやidを削除

デフォルトだとulに付与されるidやclassが付与されるのでソースが読みづらくなってしまいがちですよね?不要ならば削除することをお勧めします。

コード記述例

    <?php 
$args = array(
	'theme_location'  => 'header',
	'container'       => '',
	'menu_class'      => '',
	'menu_id'         => '',
	'items_wrap'      => '<ul>%3$s</ul>',
);
wp_nav_menu( $args );
?>

HTML表示例


<ul>
	<li id="menu-item-45" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-45">
		<a href="http://gotojapan.local/privacy-policy/">プライバシーポリシー</a>
	</li>
	<li id="menu-item-42" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-42">
		<a href="http://gotojapan.local/contact/">コンタクト</a>
	</li>
</ul>

liに付与される不要なclassやidを削除

上記ulのclass削除と合わせて記述しておきたいのが以下のliに付与されるclassやidを削除するテクニックです。他の内容とは違いフィルターを使用するのでfunction.phpに記述します。

コード記述例


add_filter('nav_menu_css_class', 'my_css_attributes_filter', 100, 1);
add_filter('nav_menu_item_id', 'my_css_attributes_filter', 100, 1);
add_filter('page_css_class', 'my_css_attributes_filter', 100, 1);
function my_css_attributes_filter($var) {
	return is_array($var) ? array_intersect($var, array( 'current-menu-item' )) : '';
}

HTML出力例


<ul>
	<li><a href="http://gotojapan.local/privacy-policy/">プライバシーポリシー</a></li>
	<li><a href="http://gotojapan.local/contact/">コンタクト</a></li>
</ul>

残したいclassがある場合はarray()の中に指定します。例では.current-menu-itemが残ります。また複数classを残したい場合は,(カンマ)で区切ります。例:test-a,test-b,test-c

特定のliにclassを付与

特定の項目にだけclassを付与する場合は管理画面上から行います。左サイドバーの「外観」→「メニュー」を開いたらカスタムメニューの編集画面が表示されます。

特定の項目にだけclassを付与する場合は管理画面上から行います。左サイドバーの「外観」→「メニュー」を開いたらカスタムメニューの編集画面が表示されます

その後表示オプションをクリックします。その中に「cssクラス」というチェックボックスがあるのクリックします。

その中に「cssクラス」というチェックボックスがあるのクリックします

そうするとメニュー項目の中に「css class」という項目が追加されているのでそちらに任意のclass名を記述し保存します。

そうするとメニュー項目の中に「css class」という項目が追加されているのでそちらに任意のclass名を記述し保存します

HTML出力例

    <ul>
	<li class="test-class">
		<a href="http://gotojapan.local/privacy-policy/">プライバシーポリシー</a>
	</li>
	<li><a href="http://gotojapan.local/contact/">コンタクト</a></li>
</ul>
    

walkerを使用

今まではパラメーターに指定をしてカスタムする方法でしたが、walkerを使用すると出力される内容を1から自分の好きな内容にカスタマイズすることが出来ます。しかしその分ハードルが高いのでコードを追える方にのみおすすめします!

こちらにソースが載っているのでコピーしてきて必要な箇所をカスタマイズしてみましょう。

まとめ

長くなってしまいましたがwp_nav_menuをカスタマイズする方法を紹介しました。色々なカスタマイズ方法があるので迷ってしまいがちですが、まずは簡単なパラメーターを指定するカスタムから始めるといいかもしれません。