Bootstrap nav walkerを使用して2つのメニューを作成する方法
bs4navwalker を使用しています。これは、適切なブートストラップフォーマットでWordPressのナビゲーションメニューを出力するためのスクリプトです。実際には、通常の wp-bootstrap-navwalker ではなく、 bs4navwalker というバリアントを使用しています。
これが私のHTMLです...
<!-- navigation --> <nav class="navbar fixed-top navbar-toggleable-sm navbar-light cxt-bg-white pmd-z-depth"> <!-- collapse at small breakpoint --> <div class="container"> <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <a class="navbar-brand" href="#"> Brand </a> <div class="collapse navbar-collapse" id="navbarNavAltMarkup"> <!-- first nav --> <ul class="nav navbar-nav mr-auto"> <!-- .mr-auto required to Push second nav right http://stackoverflow.com/a/41769285/1375163 --> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Products </a> <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink"> <a class="dropdown-item" href="/product1link/">Product 1</a> </div> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Services </a> <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink"> <a class="dropdown-item" href="#">Service 1</a> <a class="dropdown-item" href="#">Service 2</a> <a class="dropdown-item" href="#">Service 3</a> <a class="dropdown-item" href="#">Service 4</a> <a class="dropdown-item" href="#">Service 5</a> <a class="dropdown-item" href="#">Service 6</a> </div> </li> </ul> <!-- second nav --> <ul class="nav navbar-nav"> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Clients </a> <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink"> <a class="dropdown-item" href="#">Category 1</a> <a class="dropdown-item" href="#">Category 2</a> <a class="dropdown-item" href="#">Category 3</a> <a class="dropdown-item" href="#">Category 4</a> <a class="dropdown-item" href="#">Category 5</a> <a class="dropdown-item" href="#">Category 6</a> </div> </li> <li class="nav-item"> <a class="nav-link" href="#">About</a> </li> <li class="nav-item"> <a class="btn btn-success pmd-ripple-effect btn-md" href="#" role="button">Contact</a> </li> </ul> </div> </div> </nav>
これはそのように見えるものです...
そして、これが私の現在のWordPressコードで、最初のメニューを完成させるためのものです。
<nav class="navbar fixed-top navbar-toggleable-sm navbar-light cxt-bg-white pmd-z-depth"> <!-- collapse at small breakpoint --> <div class="container"> <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#bs4navbar" aria-controls="bs4navbar" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <a class="navbar-brand" href="<?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo( 'name' ); ?></a> <!-- first nav --> <?php wp_nav_menu([ 'menu' => 'primary', 'theme_location' => 'primary', 'container' => 'div', 'container_id' => 'bs4navbar', 'container_class' => 'collapse navbar-collapse', 'menu_id' => false, 'menu_class' => 'navbar-nav mr-auto', 'depth' => 2, 'fallback_cb' => 'bs4navwalker::fallback', 'walker' => new bs4navwalker() ]); ?> </div> </nav>
両方を含めたい。しかし、bs4navwalkerを使用して2番目の隣接するメニューを適切な場所に組み込む方法がわかりません。
両方とも "collapse navbar-collapse"の中にあるべきです、そしてそれは私がこれを使って達成する方法を見ることができないものです。私がテストしたとき、それはそのdivを繰り返すようです。