2016-05-19 20 views
0

WordPressで作業しているウェブサイトにブートストラップヘッダーを適用しようとしていますが、画面が小さくてもボタンがメニューを開かない場合はメニューliが消えるまで動作します。私は開発者のツールをチェックしており、エラーはないので、すべてが含まれていると仮定します。ここでWordPressでブートストラップ折りたたみボタンが機能しない

は、コードが生成

<!--[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

こんにちはMr Joeさん、あなたは共有できますか? HTMLの代わりにHTMLを生成し、最終的にはPHPと混在していますか?それはバイブルとしてそれをテストするためにもっと便利でしょう。 – pbenard

+0

@ Put12co22mer2ここにHTMLが生成されました。 –

答えて

1

[OK]を素敵働いていますここに働いています:

<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> 

header.phpの中で、あなたのコード内のブートストラップJSを追加してください。

  1. はあなたがdiv.navbar-collapsed

id="navbar"を設定する必要が

  • ボタン後div.navbar-headerを閉じるのを忘れて、生成されたHTMLを読んで...

  • +0

    ブートストラップjsが含まれていないと、まだ動作しません。コンソールにエラーが表示されませんか? –

    +0

    @JoeW bhaveshは正しいですが、bootstrap.jsを呼び出すものがない場合は、エラーは発生しません。 – pbenard

    関連する問題