Question

我正在尝试将自举网站转换为wordpress，我当前的问题是使用导航栏。我为wordpress创建了所有文件，创建了菜单，实际上可以看到。问题是在小屏幕中，菜单没有崩溃。下面是我的header.php代码：

<!DOCTYPE html>
<html lang="en">
 <head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <meta name="description" content="">
 <meta name="author" content="">
 <link rel="icon" href="../../favicon.ico">
 <title><?php bloginfo('name') ?></title>
  <link href="css/ie10-viewport-bug-workaround.css" rel="stylesheet">
  <!-- Custom styles for this template -->
  <link href="<?php bloginfo('stylesheet_url') ?>" rel="stylesheet">
  <script src="js/ie-emulation-modes-warning.js"></script>    
  <?php wp_head(); ?>
  </head>
  <body>
   <nav class="navbar navbar-inverse">
   <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <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="#">Project name</a>
    </div>
    <div id="navbar" class="navbar-collapse collapse">
      <?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 navbar-right',
            'fallback_cb'       => 'wp_bootstrap_navwalker::fallback',
            'walker'            => new wp_bootstrap_navwalker())
        );
      ?>
    </div><!--/.navbar-collapse -->
  </div>
</nav>

其次是index.php：

<?php get_header(); ?>
<?php get_footer(); ?>

functions.php：

<?php 
  require_once('wp_bootstrap_navwalker.php');
  register_nav_menus( array(
 'primary' => __( 'Primary Menu', 'Experiment Website' ),
  ) );
?>

最后是页脚：

<script      src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script> 
<script src="<?php echo get_template_directory_uri(); ?>/js/bootstrap.min.js"></script>
<script src="js/ie10-viewport-bug-workaround.js"></script>
<?php wp_footer(); ?>

如何在小屏幕中折叠菜单？

Answer 1

您已经使用navbar-collapse collapse div包裹了您的navwalker，因此请从您的navwalker代码中删除此行 - ＆gt;的 container_class => collapse navbar-collapse,

如何将bootstrap导航栏转换为wordpress

1 个答案: