カスタムメニューのカスタマイズ

  • 解決済 m.murai

    (@mmurai)


    12年、 2ヶ月前

    カスタムメニューのカスタマイズについて質問です。
    wp_nav_menu()が出力するhtmlタグで子階層を持つliのaタグのみに
    class属性、data-toggle属性を適用する方法を探しています。

    Walker_Nav_Menuを上書きするところまでは調べたのですが
    それらしき

    $item_output .= '<a '. $attributes .'>';

    を

    $item_output .= '<a class="dropdown-toggle" data-toggle="dropdown"'. $attributes .'>';

    としてみたのですがこれだと全ての<a>タグに適用されてしまいます。
    子階層を持つliのaタグのみに適用させるにはどうすればいいのでしょうか？
    よろしくお願いします。

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

    (@tecking)

    12年、 2ヶ月前

    m.muraiさん

    カスタムメニューの「表示オプション」にある「CSSクラス」との合わせ技でどうでしょう？
    属性を付加したいメニュー項目に dropdown-toggle CSSクラスを設定した上で、Walker_Nav_Menu() の start_el() メソッドを次のようにすればよいのではないかと思います。

    変更前

    $item_output .= '<a'. $attributes .'>';

    変更後

    preg_match( '/dropdown-toggle/', $class_names ) ? $item_output .= '<a'. $attributes . ' class="dropdown-toggle" data-toggle="dropdown">' : $item_output .= '<a'. $attributes .'>';

    なお、この場合 a の親となる li にも dropdown-toggle CSSクラスが付加されるので、そのあたりはCSSのセレクタでうまいこと料理してくださいね。

    それと、もしコアファイルの wp-includes/nav-menu-template.php をカスタマイズされているようなら Walker_Nav_Menu を継承した独自のPHPクラスを functions.php に作ってカスタマイズするのがおすすめです。ご参考までに。

    トピック投稿者 m.murai

    (@mmurai)

    12年、 2ヶ月前

    teckingさん
    アドバイスありがとうございます。
    漠然とですが同じ方法を考えていたところでしたが、
    これで方法が具体的的になりました。
    ということでこれで解決済みとさせていただきます。
    ありがとうございました。

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