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
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com