2016-05-19 95 views
0

我想將引導程序標頭應用於我在WordPress上使用的網站,只要菜單li消失,但屏幕較小但按鈕無法打開菜單。我已經檢查過開發人員工具,並且沒有錯誤,因此我假設所有內容都包含在內。引導程序摺疊按鈕無法在WordPress上工作

這裏是在header.php中

<!--[if IEMobile 7 ]> <html <?php language_attributes(); ?>class="no-js iem7"> <![endif]--> 
<!--[if lt IE 7 ]> <html <?php language_attributes(); ?> class="no-js ie6 oldie"> <![endif]--> 
<!--[if IE 7 ]> <html <?php language_attributes(); ?> class="no-js ie7 oldie"> <![endif]--> 
<!--[if IE 8 ]> <html <?php language_attributes(); ?> class="no-js ie8 oldie"> <![endif]--> 
<!--[if (gte IE 9)|(gt IEMobile 7)|!(IEMobile)|!(IE)]><!--><html <?php language_attributes(); ?> class="no-js"><!--<![endif]--> 

    <head> 
     <meta charset="utf-8"> 
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
     <title><?php wp_title(''); ?></title> 
     <meta name="author" content="" /> 
     <!-- make it awesome for mobile devices --> 
     <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
     <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>"> 
     <!-- wordpress head functions --> 
     <?php wp_head(); ?> 
     <!-- end of wordpress head --> 
     <link href="<?php bloginfo('template_directory'); ?>/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> 
     <link href="<?php bloginfo('template_directory'); ?>/custom.css" rel="stylesheet" type="text/css" /> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script> 
     <link href="<?php bloginfo('template_directory'); ?>/css/font-awesome.min.css" rel="stylesheet" type="text/css"> 
     <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,600,700' rel='stylesheet' type='text/css'>  
     <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>"> 
     <meta property="og:locale" content="en_GB" /> 
     <meta property="og:logo" content="/wp-content/uploads/logo.jpg" /> 
     <?php if (is_single()) { 
    $css = get_post_meta($post->ID, 'css', true); 
    if (!empty($css)) { ?> 
     <style type="text/css"> 
     <?php echo $css; ?> 
     </style> 
    <?php } 
} ?> 
    </head> 

    <body <?php body_class(); ?>> 

    <?php if (function_exists('gtm4wp_the_gtm_tag')) { gtm4wp_the_gtm_tag(); } ?> 

     <div id="wrap"> 
      <header>      
       <div class="row header-social-section"> 
        <div class="col-md-12"> 
         <div class="container"> 
           <!--<div class="col-md-3 logo"><a href="<?php bloginfo('url'); ?>/"><img src="<?php bloginfo('url'); ?>/wp-content/uploads/logo.png" class="headerlogo" alt=""/></a></div>--> 
           <div class="navbar" role="navigation"> 
           <div class="navbar-header"> 
            <a href="<?php bloginfo('url'); ?>/" class="pull-left"><img src="<?php bloginfo('url'); ?>/wp-content/uploads/logo.png" class="headerlogo" alt=""/></a> 
      <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> 
         <div class="collapse navbar-collapse"> 
     <?php wp_nav_menu(array('container_class' => '', 'menu_class' => 'nav navbar-nav', 'menu_id' => '','theme_location' => 'primary')); ?> 

           </div><!-- /.nav-collapse --> 
          </div><!-- /.navbar --> 
         </div> 
        </div> 
       </div><!-- End Social Header --> 
      </header> 

生成的HTML代碼

<header>      
       <div class="row header-social-section"> 
        <div class="col-md-12"> 
         <div class="container"> 
           <!--<div class="col-md-3 logo"><a href="http://incitenewbusiness.co.uk/"><img src="http://3w3a7v1rc3an3ir7qy5xyjmt.wpengine.netdna-cdn.com/wp-content/uploads/fgi-incitelogo.png" class="headerlogo" alt="FindGood Incite New Business Logo"/></a></div>--> 
           <div class="navbar" role="navigation"> 
           <div class="navbar-header"> 
            <a href="http://incitenewbusiness.co.uk/" class="pull-left"><img src="http://3w3a7v1rc3an3ir7qy5xyjmt.wpengine.netdna-cdn.com/wp-content/uploads/fgi-incitelogo.png" class="headerlogo" alt="FindGood Incite New Business Logo"/></a> 
      <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> 
         <div class="collapse navbar-collapse"> 
     <div class="menu-main-menu-container"><ul id="menu-main-menu" class="nav navbar-nav"><li id="menu-item-14" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-home menu-item-14"><a href="http://incitenewbusiness.co.uk">Home</a></li> 
<li id="menu-item-15" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-15"><a href="http://incitenewbusiness.co.uk/about-incite-new-business-agency/">About</a></li> 
<li id="menu-item-17" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-17"><a href="http://incitenewbusiness.co.uk/new-business-agency-how/">How</a></li> 
<li id="menu-item-113" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-113"><a href="http://incitenewbusiness.co.uk/category/latest-incites/">Latest Incites</a></li> 
<li id="menu-item-54" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-54"><a href="http://incitenewbusiness.co.uk/incite-new-business-agency-testimonials/">Testimonials</a></li> 
<li id="menu-item-16" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-16"><a href="http://incitenewbusiness.co.uk/contact/">Contact</a></li> 
<li id="menu-item-600" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-600"><a href="http://incitenewbusiness.co.uk/jobs/">Jobs</a></li> 
</ul></div> 

           </div><!-- /.nav-collapse --> 
          </div><!-- /.navbar --> 
         </div> 
        </div> 
       </div><!-- End Social Header --> 
      </header> 
+0

嗨喬先生,你能分享最終生成的HTML而不是HTML與PHP混合?將它作爲小提琴來測試會更有用。 – pbenard

+0

@ Put12co22mer2下面是HTML生成的感謝 –

回答

1

好吧......在閱讀生成的HTML,

  1. 你忘了按鈕
  2. 必須設置id="navbar"div.navbar-collapsed

後關閉div.navbar-header這是一個工作:

<header>      
    <div class="row header-social-section"> 
    <div class="col-md-12"> 
     <div class="container"> 
     <!--<div class="col-md-3 logo"><a href="http://incitenewbusiness.co.uk/"><img src="http://3w3a7v1rc3an3ir7qy5xyjmt.wpengine.netdna-cdn.com/wp-content/uploads/fgi-incitelogo.png" class="headerlogo" alt="FindGood Incite New Business Logo"/></a></div>--> 
     <div class="navbar" role="navigation"> 
      <div class="navbar-header"> 
      <a href="http://incitenewbusiness.co.uk/" class="pull-left"> 
       <img src="http://3w3a7v1rc3an3ir7qy5xyjmt.wpengine.netdna-cdn.com/wp-content/uploads/fgi-incitelogo.png" class="headerlogo" alt="FindGood Incite New Business Logo"/> 
      </a> 
      <a 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> 
      </a> 
    HERE==> </div> 
    HERE==> <div class="collapse navbar-collapse" id="navbar"> 
      <div class="menu-main-menu-container"> 
       <ul id="menu-main-menu" class="nav navbar-nav"> 
        <li id="menu-item-14" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-home menu-item-14"><a href="http://incitenewbusiness.co.uk">Home</a></li> 
        <li id="menu-item-15" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-15"><a href="http://incitenewbusiness.co.uk/about-incite-new-business-agency/">About</a></li> 
        <li id="menu-item-17" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-17"><a href="http://incitenewbusiness.co.uk/new-business-agency-how/">How</a></li> 
        <li id="menu-item-113" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-113"><a href="http://incitenewbusiness.co.uk/category/latest-incites/">Latest Incites</a></li> 
        <li id="menu-item-54" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-54"><a href="http://incitenewbusiness.co.uk/incite-new-business-agency-testimonials/">Testimonials</a></li> 
        <li id="menu-item-16" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-16"><a href="http://incitenewbusiness.co.uk/contact/">Contact</a></li> 
        <li id="menu-item-600" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-600"><a href="http://incitenewbusiness.co.uk/jobs/">Jobs</a></li> 
       </ul> 
      </div> 
      </div><!-- /.nav-collapse --> 
      </div><!-- /.navbar --> 
     </div> 
     </div> 
    </div><!-- End Social Header --> 
</header> 
+0

謝謝!該死的男人菜鳥錯誤 –

0
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 

請在您的代碼添加引導JS。所以它的工作不錯

+0

仍然無法正常工作,如果我沒有包含bootstrap js,它是否會在控制檯中顯示錯誤? –

+0

@JoeW bhavesh是對的,但如果沒有任何東西稱爲bootstrap.js,你將不會有任何錯誤... – pbenard