グローバルナビのsub-menuにdivタグを入れる方法

  • 解決済 ummo3

    (@ummo3)


    9年、 9ヶ月前

    グローバルナビにメガメニューを設定したいのですが、
    スタイル的に、どうしてもsub-menuの上にdivを挿入したいです。
    検索してみたのですが方法が分からず、
    もしよければアドバイスいただけないでしょうか？

    理想の形は下記のような形です。

    <nav>
<ul class="gnav">
　<li><a href="#">グローバルメニュー</a>
　<div>
　　<ul class="sub-menu">
　　　<li>サブメニュー１</li>
　　</ul>
　</div>
　</li>
</ul>
</nav>

    現在下記のようになっています。
    <nav id=”nav”>
    <?php wp_nav_menu(
    　array(
    　　’container’ => ”,
    　　’menu_id’ => ‘gnav’,
    　　’theme_location’ => ‘global’
    　) );
    ?>
    </nav>

    最初、’container’ => ‘div’にしてみましたが、
    上（グローバルナビの方）のulしかdivがつかず
    2番目のulにdivを挿入する方法はあるのでしょうか。

    よろしくお願いします。

3件の返信を表示中 - 1 - 3件目 (全3件中)
  • トピック投稿者 ummo3

    (@ummo3)

    9年、 9ヶ月前

    申し訳ありません。
    「理想の形は下記のような形です。」の下のコードが
    うまく表示されていなかったので、もう一度記述させていただきます。

    <nav>
<ul>
　<li><a href="#">グローバルメニュー</a>
　<div>
  <ul>
　　<li>サブメニュー１</li>
  </ul>
　</div>
　</li>
</ul>
</nav>

    モデレーター gatespace

    (@gatespace)

    9年、 9ヶ月前

    2番目のulにdivを挿入する方法はあるのでしょうか。

    http://wpdocs.sourceforge.jp/%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E3%82%BF%E3%82%B0/wp_nav_menu
    wp_nav_menu()利用時に引数のwalkerを設定でいます（デフォルトはなし）

    テーマの funtions.php にソースコードを加えます。
    詳しくは上記リンク先の「カスタムウォーカー機能を使用する」を参考にしてください。
    難しいですが、このやり方覚えるのが一番です。
    例ではサブメニューに相当する2階層目以降の ul に任意のクラス（sub-menus）をつけるソースコードですが、ここを工夫知れば div タグで囲めます

    トピック投稿者 ummo3

    (@ummo3)

    9年、 8ヶ月前

    回答ありがとうございます！
    教えていただいた方法で設定しようとしていたのですが、なかなかうまくいかず
    時間がかかってしまいましたが、なんとか設定することができました！

    お礼が遅くなってしまいまして、申し訳ありません。
    本当にありがとうございました！
    行った作業を念のため貼り付けておきます。

    ーーーーーーーーーーーーーーーーーーー
    （1）
    \wp-includes\nav-menu-template.phpからWalker_Nav_Menuをまるごとコピーして、
    funtions.phpにペーストする。

    （2）
    クラス名をtempとすることにし、コピーしたクラスを
    class temp extends Walker_Nav_Menu {
    と変更する。

    （3）
    下記部分ソースに<div>と</div>を追加記述する。
    public function start_lvl( &$output, $depth = 0, $args = array() ) {
    　$indent = str_repeat(“\t”, $depth);
    　$output .= “\n$indent<div><ul class=\”sub-menu\”>\n”;
    }
    public function end_lvl( &$output, $depth = 0, $args = array() ) {
    　$indent = str_repeat(“\t”, $depth);
    　$output .= “$indent</div>\n”;
    }

    （4）
    navメニューに　’walker’=> new tempを追加する。
    <nav><?php wp_nav_menu(
    array(
    　’container’ => ”,
    　’menu_id’ => ‘gnav’,
    　’theme_location’=> ‘global’,
    　’walker’ => new temp
    ));
    ?></nav>

3件の返信を表示中 - 1 - 3件目 (全3件中)
  • トピック「グローバルナビのsub-menuにdivタグを入れる方法」には新たに返信することはできません。