WordPress のカスタムメニューで、aタグの内外にspan タグ等を入れる方法

  • 10468
    views
  • このエントリーをはてなブックマークに追加
  • follow us in feedly

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 wp_nav_menu( array(
'theme_location' => 'sample', 
'depth' => '1',
'menu_class' => 'nav-menu',
'before' => '<span></span>'
) ); ?>
出力結果
<li><span></span><a href=””>リンクテキスト</a></li>

after

<?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

<?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

<?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>

  • 10468
    views
  • このエントリーをはてなブックマークに追加
  • follow us in feedly

この投稿と関連する記事一覧

この記事に関するコメント

コメントを残す