サポート » 使い方全般 » カスタムメニューのカスタマイズ「|」の挿入について

  • 解決済 benkei

    (@benkei)


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

    Hoge|Hoge|Hoge|Hoge

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

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

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

2件の返信を表示中 - 1 - 2件目 (全2件中)
  • 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 に対して適宜スタイルをあてる、という流れで。

    teckingさん>

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

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