Question

我将使用引导程序的静态html页面转换为wordpress主题。当前正在使一切变得动态。我有一个响应式导航栏，它崩溃了。当导航栏折叠时，我尝试单击它，它出现并在大约四分之一秒后消失。换句话说，它只是无法正常工作。

我希望它能够完全正常运行，以便较小设备上的人们可以单击它并在站点中导航。我对引导程序文档进行了双重检查，并且我的代码在大多数情况下看起来都是正确的，但是显然有些问题。我正在使用我从github下载的navbar的wp-bootstrap-navwalker。该菜单可在台式机上使用，但汉堡菜单却给我带来了问题。希望我的代码不会让您阅读时太乱。

我的代码是：`

        <a class="navbar-brand" href="<?php echo home_url("/"); ?>">
            <img src="<?php bloginfo("template_directory" ); ?>/img/logo.png" alt="" class="logo">
        </a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarSupportedContent">

                <ul class="navbar-nav mr-auto">

            <?php 

                wp_nav_menu( [
                    "theme_location" => "primary",
                    "depth"          =>  2,
                    "container"      => "div",
                    "container_id"   => "navbarSupportedContent",
                    "menu_class"     => "nav navbar-nav",
                    "fallback_cb"     => "wp_Bootstrap_Navwalker::fallback",
                    "walker"         => new wp_Bootstrap_Navwalker(),
                ]);

            ?>

                </ul>

                <form class="form-inline my-2 my-lg-6" method="<?php echo esc_url(home_url("/") ); ?>">
                    <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search" name="s" >
                    <button class="btn btn-outline-light my-2 my-sm-0" type="submit">Search</button> 
                </form>

        </div>

    </nav>`

页面顶部有一个轮播，其代码位于导航栏代码的正下方，不确定是否与问题有关。但是我的轮播代码是`

      <!-- Indicators -->
      <ul class="carousel-indicators">
        <li data-target="#demo" data-slide-to="0" class="active"></li>
        <li data-target="#demo" data-slide-to="1"></li>
        <li data-target="#demo" data-slide-to="2"></li>
      </ul>

      <!-- The slideshow -->
      <div class="carousel-inner">
        <div class="carousel-item active">
          <img src="<?php bloginfo("template_directory" ); ?>/img/slide1.jpg" class="d-block w-100 fullscreen img-fluid" alt="Los Angeles">
          <h3 class="carousel-caption carousel_h3 animated bounceInRight">Your Trusted Legal Partner</h3>
          <p class="carousel-caption  carousel_p animated bounceInRight">We are ready to put our experience on your side!</p>
        </div>

        <div class="carousel-item">
          <img src="<?php bloginfo("template_directory" ); ?>/img/slide1.jpg" class="d-block w-100 fullscreen img-fluid" alt="Chicago">
            <h3 class="carousel-caption carousel_h3 animated bounceInRight">Skilled Advocacy. Practical Solutions.</h3>
            <p class="carousel-caption  carousel_p animated bounceInRight">We provide all kinds of support.</p>
        </div>
        <div class="carousel-item">
          <img src="<?php bloginfo("template_directory" ); ?>/img/slide1.jpg" class="d-block w-100 fullscreen img-fluid" alt="New York">
              <h3 class="carousel-caption carousel_h3 animated bounceInRight">Specialist Lawyers to the landing dector</h3>
              <p class="carousel-caption  carousel_p animated bounceInRight">Legal advice in black and white</p>
        </div>
      </div>

      <!-- Left and right controls -->
      <a class="carousel-control-prev" href="#demo" data-slide="prev">
        <span class="carousel-control-prev-icon"></span>
      </a>
      <a class="carousel-control-next" href="#demo" data-slide="next">
        <span class="carousel-control-next-icon"></span>
      </a>

    </div>
    <!--Carousel End-->`

调用脚本`

时，我的footer.php文件如下所示：

    <script src="<?php bloginfo("template_directory" ); ?>/js/bootstrap.min.js"></script>
    <?php wp_footer(); ?>
</body>

`

可能与它有关的最后一点代码是我的functions.php文件 `

function mycss(){

wp_enqueue_style("my-css", get_stylesheet_directory_uri() . "/style.css");
wp_enqueue_style("bst-file", get_stylesheet_directory_uri() . "/css/bootstrap.min.css");
wp_enqueue_style("font-file", get_stylesheet_directory_uri() . "/css/ionicons.css");
wp_enqueue_style("ani-file", get_stylesheet_directory_uri() . "/css/animate.css");
wp_enqueue_style("ico-file", "https://unpkg.com/ionicons@4.5.10-0/dist/css/ionicons.min.css");
wp_enqueue_style("ic-file", "https://fonts.googleapis.com/css? 
family=Lato:300,400,700,900&display=swap");

}

add_action( "wp_enqueue_scripts" , "mycss" );



require_once get_template_directory() . '/class-wp-bootstrap-navwalker.php';

function navwalker(){
register_nav_menus([
    "primary" => __("primary Menu", "navwalker")
]);
}

add_action ("after_setup_theme" , "navwalker")
?>

我是编码的新手，我肯定有很多错误。通常，当我遇到问题时，我通常可以自己解决问题，但是我对此没有任何运气。很抱歉，代码过多，但是我知道这可能与这些文件中的任何一个有关。

谢谢

Bootstrap Navbar崩溃消失了（Wordpress）

0 个答案: