我正在创建的主题无法正常工作。当我减小屏幕尺寸时,菜单没有塌陷到带有汉堡图标的移动视图中。在Chrome上使用inspect工具时,我可以看到所有的类。
我的尝试:
将代码与我做的练习主题进行比较,结果看起来完全一样直接从引导程序粘贴导航栏示例并进行测试(也没有崩溃)使用引导程序上的链接,如https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css 和https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js 利用样式和功能下载了引导文件并将其链接到本地请查看我的标题。php和函数。php如下:
Header.php
<!DOCTYPE html>
<head>
<title></title>
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<nav class="navbar navbar-default navbar-fixed-top <?php admin_bar_menu(); ?>">
<div class="container-fluid menu-container">
<!-- 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" aria-expanded="false">
<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 esc_url( home_url(\'/\')); ?>"><?php bloginfo( \'name\' ); ?></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<?php
wp_nav_menu(array(
\'theme_location\' => \'primary\',
\'menu_class\' => \'nav navbar-nav navbar-right\',
\'fallback_cb\' => false
));
?>
</div>
</div>
</nav>
Functions.php
<?php
function winetours_scripts() {
wp_enqueue_script( "bootstrap-js", get_template_directory_uri() . "/bootstrap/js/bootstrap.min.js", array("jquery") );
wp_enqueue_style( "bootstrap", get_template_directory_uri() . "/bootstrap/css/bootstrap.min.css");
wp_enqueue_style( "winetour-style" , get_stylesheet_uri() );
}
add_action("wp_enqueue_scripts", "winetours_scripts");
function winetours_setup() {
register_nav_menus( array(
"primary" => "Primary Menu", "winetour"
));
//Add theme support for document title tag
add_theme_support( "title-tag" );
}
add_action( "after_setup_theme", "winetours_setup");
//Adds the padding to the top of menu for logged in with toolbar
function admin_bar_menu() {
if ( is_user_logged_in() ){
$current_user = wp_get_current_user();
if (user_can( $current_user, \'administrator\' )) {
echo "admin-nav";
}
}
}
SO网友:Kanon Chowdhury
我也面对过这样的问题。我通过使用解决了这个问题wp-bootstrap-navwalker 或者你可以创造自己click for details
通过将最后一个参数设置为true,将js文件排入页脚。
wp_enqueue_script( "bootstrap-js", get_template_directory_uri() . "/bootstrap/js/bootstrap.min.js", array("jquery") \'here your theme version\', TRUE );
现在检查一下你是否打过电话
wp_footer();
功能位于主题的页脚部分。如果您使用的是wp bootstrap navwalker,则使用流动代码更新您的wp\\u nav\\u菜单功能
<?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())
);
?>