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
[php] <?php wp_nav_menu( array(‘theme_location’ => ‘sample’,
‘depth’ => ‘1’,
‘menu_class’ => ‘nav-menu’,
‘before’ => ‘<span></span>’
) ); ?>
[/php] 出力結果
<li><span></span><a href=””>リンクテキスト</a></li>
after
[php] <?php wp_nav_menu( array(‘theme_location’ => ‘sample’,
‘depth’ => ‘1’,
‘menu_class’ => ‘nav-menu’,
‘after’ => ‘<span></span>’
) ); ?>
[/php] 出力結果
<li><a href=””>リンクテキスト</a><span></span></li>
link_before
[php] <?php wp_nav_menu( array(‘theme_location’ => ‘sample’,
‘depth’ => ‘1’,
‘menu_class’ => ‘nav-menu’,
‘link_before’ => ‘<span></span>’
) ); ?>
[/php] 出力結果
<li><a href=””><span></span>リンクテキスト</a></li>
link_after
[php] <?php wp_nav_menu( array(‘theme_location’ => ‘sample’,
‘depth’ => ‘1’,
‘menu_class’ => ‘nav-menu’,
‘link_after’ => ‘<span></span>’
) ); ?>
[/php] 出力結果
<li><a href=””>リンクテキスト<span></span></a></li>
コメントを残す