サポート » 使い方全般 » カスタムメニューのカスタマイズ

  • 解決済 kiraiday

    (@kiraiday)


    新しくテーマを作成しようと思っております。
    カスタムメニューを作成していたところ、以下のようなHTMLタグが出力されるようです。

    <div>
        <ul>
            <li><a></a></li>
            <li><a></a></li>
        </ul>
    </div>

    上記のコードを以下のようにカスタマイズしたいのですが・・・

    <div>
        <ul>
            <li><a></a></li>
            <li><a></a></li>
            <li>
                <strong><div></strong>←ここ
                    <ul>
                        <li><a></a></li>
                        <li><a></a></li>
                    </ul>
                <strong></div></strong>←ここ
            </li>
        </ul>
    </div>

    上記は、ドロップダウンメニューの子セレクタがあった場合にタグが出現されるようにしたいと考えております。

    ただ、以下のようなデフォルト値を見てみるとそのような設定ができそうな部分がありませんでした。

    $defaults = array(
    ‘menu’ => ,
    ‘container’ => ‘div’,
    ‘container_class’ => ,
    ‘container_id’ => ,
    ‘menu_class’ => ‘menu’,
    ‘menu_id’ => ,
    ‘echo’ => true,
    ‘fallback_cb’ => ‘wp_page_menu’,
    ‘before’ => ,
    ‘after’ => ,
    ‘link_before’ => ,
    ‘link_after’ => ,
    ‘depth’ = 0,
    ‘walker’ => ,
    ‘theme_location’ => );

    親子階層を持つドロップダウンメニューの場合、子セレクターを<div></div>でさらにラップしたい。
    また、上記のようなデフォルトをfunctions.phpに設定してしまいたいと考えております。
    その場合、どのように設定すればよろしいのでしょうか?
    <?php wp_nav_menu(); ?>←これだけで希望のタグを出力するため

    以上2点ですが、よろしくお願いいたします。

2件の返信を表示中 - 1 - 2件目 (全2件中)
  • functions.php に以下を追加すれば OK◎

    class My_Walker_Nav_Menu extends Walker_Nav_Menu {
      function start_lvl( &$output, $depth ) {
        $indent = str_repeat("\t", $depth);
        $output .= "\n$indent<div><ul class=\"sub-menu\">\n";  // ☆
      }
      function end_lvl( &$output, $depth ) {
        $indent = str_repeat("\t", $depth);
        $output .= "$indent</ul></div>\n";  // ☆
      }
    }
    add_filter( 'wp_nav_menu_args', 'my_nav_menu_args' );
    function my_nav_menu_args( $args ) {
      $args = (object) $args;
      $args->walker = new My_Walker_Nav_Menu;
      return $args;
    }

    このままだと全階層のサブメニューに div が付きます。
    1(2?)階層目のサブメニューだけに付けたい場合は ☆ 辺りを $depth の値を元に ifdiv 有り/無しに分岐させてください。

    さらに、このままだと、メニューにポインタを hover してもサブメニューが表示されなくなるので、以下を css に追加してください。

    #access ul li:hover > div > ul {
      display: block;
    }

    トピック投稿者 kiraiday

    (@kiraiday)

    kz 様

    本当にありがとうございます。

    カスタムメニュー自体をカスタマイズしているサイトを探しきれなくて・・・
    コア部分をいじらずにどうすればよいか分からず途方にくれてました。

    本当にありがとうございました。

    これで解決とさせていただきます。

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