Question

大家好，我制作的引导菜单有点复杂，我想把它转换成Wordpress。我的主菜单位于中间，左侧是徽标，右侧是搜索栏和下拉菜单。我在这个主题上读了很多，但我没试过。这是我的导航HTML代码：

<div class="navbar navbar-default navbar-fixed-top" role="navigation">
    <hr class="blueLine">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>      
            </button>   
            <a class="navbar-brand" href="<?php bloginfo('url'); ?>">
                <img src="<?php bloginfo('template_directory'); ?>/img/fresiusLogo.png">
            </a>  
        </div>
        <div class="navbar-collapse navbar-center collapse">
            <ul class="nav navbar-nav navbar-center">
                <li class=""><a href="enternal.html">Enternal <br> Nutrition</a></li>  
                <li class=""><a href="indi.html">INDI <br> Partnership</a></li>  
                <li class=""><a href="parental.html">Parental <br> Nutrition</a></li>  
            </ul>
            <div class="col-sm-3 col-md-3 pull-right">
                <form class="navbar-form" role="search">
                    <div class="input-group">
                        <input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term">
                        <div class="input-group-btn">
                            <button class="btn btn-default" type="submit"><i class="fa fa-search" aria-hidden="true"></i></button>
                        </div>
                    </div>
                </form>                        
                <li class="dropdown">
                    <span>Fresenius Kabi Globa</span>
                    <a class="dropdown-toggle" data-toggle="dropdown" href="#">Select Website
                    <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                      <li><a href="https://www.google.com/">Test 1</a></li>
                      <li><a href="https://www.google.com/">Test 2</a></li>
                      <li><a href="https://www.google.com/">Test 3</a></li>
                    </ul>
                </li>
            </div>
        </div>      
    </div>  
</div>

我已经尝试过按照我在网上找到的说明，但没有一个对我有用我也尝试过使用wp-bootstrap-navwalker，但无法用我的代码实现它。我的一个问题是，例如，当我点击我的下拉菜单时，它没有做任何事情，因为我的目标是＃无论如何都要用PHP来定位＃？有没有人知道如何将其转换为Worpress？

Answer 1

您可以使用walker类来设置引导菜单。您需要在wp_bootstrap_navwalker.php中附加function.php文件，或者您可以直接添加代码。

您可以从here下载文件或复制代码。

只需使用此文件，然后从wp_nav_menu函数调用walker类，如下所示：

<?php
    wp_nav_menu( array(
      'menu' => 'top_menu',
      'depth' => 2,
      'container' => false,
      'menu_class' => 'nav',
      //Process nav menu using our custom nav walker
      'walker' => new wp_bootstrap_navwalker())
    );
?>

您可以按照this链接深入了解此概念。

感谢。

Answer 2

Okay so I got this to work using JQuery and wp_bootstrap_navwalker.php This is how my code looks now:

<div class="navbar navbar-default navbar-fixed-top" role="navigation">
    <hr class="blueLine">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>      
            </button>   
            <a class="navbar-brand" href="<?php bloginfo('url'); ?>">
                <img src="<?php bloginfo('template_directory'); ?>/img/fresiusLogo.png">
            </a>  
        </div>
        <div class="navbar-collapse navbar-center collapse">
            <ul class="nav navbar-nav navbar-center">
                 <?php
                    wp_nav_menu( array(
                        'menu'              => 'primary',
                        'theme_location'    => 'primary',
                        'depth'             => 2,
                        'container'         => 'div',
                        'container_class'   => 'collapse navbar-collapse',
                        'container_id'      => 'bs-example-navbar-collapse-1',
                        'menu_class'        => 'nav navbar-nav',
                        'fallback_cb'       => 'WP_Bootstrap_Navwalker::fallback',
                        'walker'            => new WP_Bootstrap_Navwalker())
                    );
                ?>  
            </ul>
            <div class="col-sm-3 col-md-3 pull-right">
                <form class="navbar-form" role="search">
                    <div class="input-group">
                        <input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term">
                        <div class="input-group-btn">
                            <button class="btn btn-default" type="submit"><i class="fa fa-search" aria-hidden="true"></i></button>
                        </div>
                    </div>
                </form>                        
                <li class="dropdown">
                    <span>Fresenius Kabi Globa</span>
                    <a class="dropdown-toggle" data-toggle="dropdown" href="#">Select Website
                    <span class="caret"></span></a>
                    <ul class="dropdown-menu sub-menu">
                      <li><a href="https://www.google.com/" target="_blank">Test 1</a></li>
                      <li><a href="https://www.google.com/" target="_blank">Test 2</a></li>
                      <li><a href="https://www.google.com/" target="_blank">Test 3</a></li>
                    </ul>
                </li>
            </div>
        </div>      
    </div>  
</div>

Also you need to use JQuery to make dropdown work. I suggest reading these two posts:
jQuery .toggle() to show and hide a sub-menu
Wordpress drop-down-menu open on click

将bootstrap导航转换为wordpress

2 个答案: