如何將引導程序導航欄轉換爲wordpress

我想將引導程序網站轉換爲wordpress，而我目前的問題是使用導航欄。我爲wordpress創建了所有文件，創建了菜單並可以真正看到。問題在於，在小屏幕中，菜單不會崩潰。下面是我對的header.php代碼：如何將引導程序導航欄轉換爲wordpress

<!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(); ?>

如何在小屏幕中使菜單崩潰？

來源

2016-07-03 Elton Sousa

您已經包裹你的navwalker與navbar-collapse collapse DIV所以從您的navwalker代碼刪除此行 - >container_class => collapse navbar-collapse,

來源

2016-07-03 21:33:29

非常感謝您的幫助。它工作完美，絕對是我學到了更多。 –

很高興我能幫助埃爾頓。如果它解決了問題，請將其標記爲正確的答案。歡呼男人 –

如何將引導程序導航欄轉換爲wordpress

回答

相關問題