个人中心
gpt4 book ai didi

php - 如何将 Bootstrap 导航栏转换为 wordpress

转载 作者：行者123 更新时间：2023-11-28 16:12:09 26 4
gpt4 key购买 nike

我正在尝试将 Bootstrap 网站转换为 wordpress，而我当前的问题是导航栏。我为 wordpress 创建了我所有的文件，创建了菜单并且可以实际看到。问题是在小屏幕上，菜单不会折叠。下面是我的 header.php 代码:

<!DOCTYPE html>
<html lang="en">
 <head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <meta name="description" content="">
 <meta name="author" content="">
 <link rel="icon" href="../../favicon.ico">
 <title><?php bloginfo('name') ?></title>
  <link href="css/ie10-viewport-bug-workaround.css" rel="stylesheet">
  <!-- Custom styles for this template -->
  <link href="<?php bloginfo('stylesheet_url') ?>" rel="stylesheet">
  <script src="js/ie-emulation-modes-warning.js"></script>    
  <?php wp_head(); ?>
  </head>
  <body>
   <nav class="navbar navbar-inverse">
   <div class="container">
    <div class="navbar-header">
      <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>
      <a class="navbar-brand" href="#">Project name</a>
    </div>
    <div id="navbar" class="navbar-collapse collapse">
      <?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 navbar-right',
            'fallback_cb'       => 'wp_bootstrap_navwalker::fallback',
            'walker'            => new wp_bootstrap_navwalker())
        );
      ?>
    </div><!--/.navbar-collapse -->
  </div>
</nav>

接着是index.php:

<?php get_header(); ?>
<?php get_footer(); ?>

functions.php:

<?php 
  require_once('wp_bootstrap_navwalker.php');
  register_nav_menus( array(
 'primary' => __( 'Primary Menu', 'Experiment Website' ),
  ) );
?>

最后是页脚:

<script      src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script> 
<script src="<?php echo get_template_directory_uri(); ?>/js/bootstrap.min.js"></script>
<script src="js/ie10-viewport-bug-workaround.js"></script>
<?php wp_footer(); ?>

如何在小屏幕上折叠菜单？

最佳答案

您已经用 navbar-collapse collapse div 包装了您的 navwalker，因此请从您的 navwalker 代码中删除这一行 --> container_class => collapse navbar-collapse,

关于php - 如何将 Bootstrap 导航栏转换为 wordpress，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38174461/

26 4 0
文章推荐： JavaScript 正则表达式 : extract words and separators in sequential array
文章推荐： php - 在 PHP session 期间存储用户 'following'
文章推荐： javascript - 使用参数从另一个函数调用一个函数
文章推荐： ios - 以编程方式快速将单元格 textLabel 对齐到左上角