Bootstrap折叠按钮无法在WordPress

时间：2016-05-19 13:33:25

标签： php wordpress twitter-bootstrap

我正在尝试将一个bootstrap标头应用到我在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>

2 个答案:

答案 0 :(得分：1)

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

请在代码中添加bootstrap js。所以它工作得很好

答案 1 :(得分：1)

好的......在阅读生成的html时，

  1. 您忘记关闭按钮后的div.navbar-header
  2. 您必须在id="navbar"
    3. 中设置div.navbar-collapsed

    这是一个有效的工作：

    <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>
相关问题
最新问题