php - 响应式汉堡包/下拉菜单在 wordpress 网站中不起作用
问题描述
我在 Wordpress 网站中的下拉菜单有问题。基本上,我已经将菜单与一些 php 代码集成在一起,以便我可以使用 wordpress 的菜单功能。但是,该菜单在桌面版本中是可见的,它在减小屏幕宽度时会“折叠”自身,但它不会执行下拉动画并保持静态。
请帮助我,并在此先感谢您。
我试图按每个顺序移动引导 cdn,首先是 jquery cdn,然后是最后一个,然后将它们放在页眉中,然后放在页脚中,但它们都得出了相同的结果。这是在本地主机环境中。
<!DOCTYPE html>
<html <?php language_attributes();?> >
<head>
<title>
<?php bloginfo('name');?> |
<?php is_front_page() ? bloginfo('description') : wp_title(); ?>
</title>
<meta charset="<?php bloginfo('charset')?>">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<link href="<?php bloginfo('stylesheet_url');?>" rel="stylesheet">
<?php wp_head(); ?>
</head>
<body>
<nav class="navbar navbar-expand-md navbar-light bg-light" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-controls="bs-example-navbar-collapse-1" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">Navbar</a>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<?php
wp_nav_menu( array(
'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>
---------------------------------------------------------------------
<?php
// Register Nav Walker class_alias
require_once get_template_directory() . '/class-wp-bootstrap-navwalker.php';
// Theme Support
if ( ! file_exists( get_template_directory() . '/class-wp-bootstrap-navwalker.php' ) ) {
// file does not exist... return an error.
return new WP_Error( 'class-wp-bootstrap-navwalker-missing', __( 'It appears the class-wp-bootstrap-navwalker.php file may be missing.', 'wp-bootstrap-navwalker' ) );
} else {
// file exists... require it.
require_once get_template_directory() . '/class-wp-bootstrap-navwalker.php';
}
register_nav_menus( array(
'primary' => __( 'Primary Menu', 'BachusBistroChic' ),
) );
?>
此外,它在控制台中显示一个错误,它缺少 popper.js 文件,但该文件已通过引导 cdn 链接。
解决方案
推荐阅读
- javascript - 第一个索引不会填充正确的次数
- grafana - TimeStream + Grafana:无法识别数据中的系列
- excel - 如何使用 VBA 将行从一个工作表复制到另一个工作表(从特定行开始)?
- java - 如何在 Java 中将值存储在不同的数组中?
- html - justify-content-between 不适用于导航栏
- react-native - 将图像作为请求正文添加到 http 请求
- components - 在我使用 Component 之后,这种智能感知不起作用。问题是什么?
- rust - 有没有办法在 proc-macro crate 中具有公共特征?
- javascript - 使用 Jquery 添加按钮与调用函数时在 HTML 中显式添加的区别
- python - 使用正则表达式根据限制字符拆分字符串