Question

我一直在修改网站。我们使用Wordpress，响应式导航栏并不好。当我使用移动设备时，我希望有类似的东西：

enter image description here

网站的导航栏只能通过Wordpress实现，我想使用Bootstrap。导航栏的代码是：

   <?php responsive_container(); // before container hook ?>
<div id="container" class="hfeed clear <?php if($GLOBALS['home'] == 1) { ?> home <?php } ?>" >

    <?php responsive_header(); // before header hook ?>
    <!-- <a href="javascript:gaOptout()">Cliquez ici pour vous opposer aux cookies de mesure d'audience de Google</a> -->
    <div id="header" class="clearfix">
        <div class="wrap">

            <?php responsive_in_header(); // header hook ?>


            <?php if ($is_blog!=1){ ?>

                <div id="logo">
                    <a href="<?php echo home_url(); ?>"><img src="<?php echo get_stylesheet_directory_uri(); ?>/images/logo.png" width="266" alt="logo xee"/></a>
                </div>

                    <?php wp_nav_menu(array(
                        'theme_location'  => 'header-menu',
                    ));
                    ?>

            <?php } else { ?>

我尝试使用Bootstrap实现一个响应按钮：

<?php responsive_in_header(); // header hook ?>

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse" style="float: left">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
</button>

<?php if ($is_blog!=1){ ?>

    <div id="logo">
        <a href="<?php echo home_url(); ?>"><img src="<?php echo get_stylesheet_directory_uri(); ?>/images/logo.png" width="266" alt="logo xee"/></a>
    </div>

    <div class="collapse navbar-collapse navbar-ex1-collapse">
    <ul class="nav">
        <?php wp_nav_menu(array(
            'theme_location'  => 'header-menu',
        ));
        ?>
        </ul>>
    </div>

但结果是：wwwtest.xee.com使用Chrome设备模拟器

你见过这个问题吗？

Answer 1

首先，您的标记看起来不完整。不是nav，没有container，没有navbar-header。我建议您使用菜单示例代码并从中开始。像：

<nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
          <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="#">Brand</a>
    </div>
    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
       <ul class="nav navbar-nav">
       [..]

当使用Wordpress时，我还想使用菜单助手。步行者遍历您的菜单结构并创建适当的菜单。有一个非常好的引导菜单步行器：

https://github.com/twittem/wp-bootstrap-navwalker

文档非常好，您应该可以使菜单正常工作。它几乎只是复制和粘贴几乎没有调整。

<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
    <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="<?php echo home_url(); ?>">
            <?php bloginfo('name'); ?>
        </a>
</div>

    <?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',
            'fallback_cb'       => 'wp_bootstrap_navwalker::fallback',
            'walker'            => new wp_bootstrap_navwalker())
        );
    ?>
</div>
</nav>

其余的只是CSS格式。告诉我你是否会得到更好的结果。

Answer 2

我在过去使用wordpress集成bootstrap时遇到了困难，因为许多主题使用相同的类名作为bootstrap。特别是，您可能希望确保wordpress主题的javascript或css都不会查找包含.nav，.navbar或.container的元素。

如何在Wordpress中集成bootstrap导航栏？

2 个答案: