wp_nav_menu（）でカスタムメニューを出力する際、リンクタグの前や後にspanタグを使いたい、という場合のやり方をまとめました。
パラメーター「before」「after」「link_before」「link_after」を使い分ける事で、aタグの前後にspanのようなタグ以外にも、文字列を表示させることができるようになります。
wp_nav_menu のパラメーターbefore、afiter
| before | メニューのa タグの「前」に文字列を出力 |
|---|---|
| after | メニューのa タグの「後」に文字列を出力 |
| link_before | メニューのa タグ内で、リンクテキストの「前」に文字列を出力 |
| link_after | メニューのa タグ内で、リンクテキストの「後」に文字列を出力 |
具体例
before
|
1 2 3 4 5 6 |
<?php wp_nav_menu( array( ‘theme_location’ => ‘sample’, ‘depth’ => ‘1’, ‘menu_class’ => ‘nav-menu’, ‘before’ => ‘<span></span>’ ) ); ?> |
出力結果
<li><span></span><a href=””>リンクテキスト</a></li>
after
|
1 2 3 4 5 6 |
<?php wp_nav_menu( array( ‘theme_location’ => ‘sample’, ‘depth’ => ‘1’, ‘menu_class’ => ‘nav-menu’, ‘after’ => ‘<span></span>’ ) ); ?> |
出力結果
<li><a href=””>リンクテキスト</a><span></span></li>
link_before
|
1 2 3 4 5 6 |
<?php wp_nav_menu( array( ‘theme_location’ => ‘sample’, ‘depth’ => ‘1’, ‘menu_class’ => ‘nav-menu’, ‘link_before’ => ‘<span></span>’ ) ); ?> |
出力結果
<li><a href=””><span></span>リンクテキスト</a></li>
link_after
|
1 2 3 4 5 6 |
<?php wp_nav_menu( array( 'theme_location' => 'sample', 'depth' => '1', 'menu_class' => 'nav-menu', 'link_after' => '<span></span>' ) ); ?> |
出力結果
<li><a href=””>リンクテキスト<span></span></a></li>
コメント