カスタムメニューのカスタマイズ「｜」の挿入について

  • 解決済 benkei

    (@benkei)


    11年、 10ヶ月前

    カスタムメニューを使ってリストの間に「｜」そ挿入して
    ナビゲーションを作成したいのですが、可能でしょうか。

    Hoge｜Hoge｜Hoge｜Hoge

    CSSは対応ブラウザのこともあるので、使用しないで、
    「wp_nav_menu」のパラメータや、「functions.php」に記述でなんとかならないでしょうか。

    リストの最後は「｜」を消すとこまで作れると幸いです。

    ナビゲーションラベルに記述するしかないですかね･･･。

2件の返信を表示中 - 1 - 2件目 (全2件中)
  • tecking

    (@tecking)

    11年、 10ヶ月前

    benkeiさん

    カスタムメニューの「表示オプション」にある「CSSクラス」を使ってはどうでしょうか。
    任意のメニュー項目にCSSクラスを追記できるようになるので、「|」を加えたい項目に、たとえば separator というCSSクラスをつけます。

    そのうえで wp_nav_menu にフックする関数をこんな感じで書くとよいかとおもいます。

    add_filter( 'wp_nav_menu', 'my_wp_nav_menu' );
function my_wp_nav_menu( $nav_menu ) {
	return preg_replace( '|(<li.+?separator.+?</a>)|', '$1<span class="separator">|</span>', $nav_menu );
}

    CSSクラス separator をつけた項目のテキストリンクの後に span タグで挟まれた「|」が追記されるので、あとは span.separator に対して適宜スタイルをあてる、という流れで。

    トピック投稿者 benkei

    (@benkei)

    11年、 10ヶ月前

    teckingさん＞

    お返事遅くなりすみません。
    teckingさんの方法で無事解決いたしました。
    ありがとうございます(^^)

2件の返信を表示中 - 1 - 2件目 (全2件中)
  • トピック「カスタムメニューのカスタマイズ「｜」の挿入について」には新たに返信することはできません。