Wordpress 使用wp引导navwalker折叠菜单时出现问题
我第一次使用bootstrap开发自己的wordpress主题，在使用wp bootstrap navwalker时遇到了一个问题 我创建了两个菜单，一个在sm、md和lg中可见，另一个在xs中可见。在xs中，它应该是折叠的，并在按下按钮时打开，但是在我将wp引导navwalker添加到html中之后，它就不再工作了 这是我的html：Wordpress 使用wp引导navwalker折叠菜单时出现问题,wordpress,twitter-bootstrap,wp-nav-walker,Wordpress,Twitter Bootstrap,Wp Nav Walker,我第一次使用bootstrap开发自己的wordpress主题，在使用wp bootstrap navwalker时遇到了一个问题 我创建了两个菜单，一个在sm、md和lg中可见，另一个在xs中可见。在xs中，它应该是折叠的，并在按下按钮时打开，但是在我将wp引导navwalker添加到html中之后，它就不再工作了 这是我的html： <!DOCTYPE html> <html <?php language_attributes(); ?>> <hea
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo('charset'); ?>">
<meta name="description" content="Storhamar kunstløp har i dag nærmere 100 medlemmer og løpere på skøyteskole-, aspirant- og konkurransenivå. Her er man velkommen uansett ambisjonsnivå!">
<meta name="keywords" content="Storhamar, SIL, kunstløp, figure skating, Hamar, skøyter, idrettslag, kunstløpklubb, skøyteklubb">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><?php wp_title(''); ?></title>
<!--Fonts-->
<link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,700' rel='stylesheet' type='text/css'>
<!--Icons-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.2/css/font-awesome.min.css">
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<header class="container-fluid hidden-xs">
<a href="<?php echo esc_url( home_url( '/' ) ); ?>"><img src="<?php header_image(); ?>" class="img-responsive center-block"></a>
</header>
<!-- Navbar ================================================== -->
<nav id="main-nav" class="navbar hidden-xs" data-spy="affix" data-offset-top="280">
<div class="container-fluid" id="main-nav-list">
<?php
wp_nav_menu( array(
'menu' => 'primary-lg',
'theme_location' => 'primary-lg',
'depth' => 1,
'container' => 'div',
'container_class' => 'container-fluid',
'container_id' => 'main-nav-list',
'menu_class' => 'nav navbar-nav main-nav',
'fallback_cb' => 'wp_bootstrap_navwalker::fallback',
'walker' => new wp_bootstrap_navwalker())
);
?>
</div>
</nav>
<!-- Mobile Navbar ================================================== -->
<nav id="mobile-nav" class="navbar mobile-nav navbar-default navbar-static-top visible-xs">
<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" 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>
</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(
'menu' => 'primary-xs',
'theme_location' => 'primary-xs',
'depth' => 1,
'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><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<a href="index.html"><img src="<?php header_image(); ?>" class="img-responsive visible-xs center-block"></a>
<main class="container">
因此，在使用inspect元素再次研究html之后，我自己最终发现了问题
我没有意识到导航周围的div实际上是多余的，只是复制了菜单中添加的容器。因此，在我使用“collapse navbar collapse”类删除了周围的div之后，菜单折叠菜单再次工作（单击按钮打开） 因此，在使用inspect元素再次研究html之后，我最终自己发现了问题
我没有意识到导航周围的div实际上是多余的，只是复制了菜单中添加的容器。因此，在我使用“collapse navbar collapse”类删除了周围的div之后，菜单折叠菜单再次工作（单击按钮打开）
<?php
if ( ! isset( $content_width ) ) {
$content_width = 660;
}
function SILkunstlop_setup() {
load_theme_textdomain('SILkunstlopLang', get_template_directory() . '/languages');
add_theme_support( 'title-tag' );
add_theme_support( 'automatic-feed-links' );
// Register Custom Navigation Walker
require_once('wp_bootstrap_navwalker.php');
register_nav_menus( array(
'primary-lg' => __( 'Hovedmeny stor', 'SILkunstlop-wp' ),
) );
register_nav_menus( array(
'primary-xs' => __( 'Hovedmeny liten', 'SILkunstlop-wp' ),
) );
register_nav_menus( array(
'sidebar-menu' => __( 'Sidemeny', 'SILkunstlop-wp' ),
) );
register_nav_menus( array(
'sidebar-menu2' => __( 'Sidemeny skøyteskole', 'SILkunstlop-wp' ),
) );
}
add_action('after_setup_theme', 'SILkunstlop_setup');
//Load the theme CSS
function theme_styles() {
wp_enqueue_style( 'bootstrap', get_template_directory_uri() . '/css/bootstrap.min.css');
wp_enqueue_style( 'main', get_template_directory_uri() . '/style.css');
}
//Load the theme JS
function theme_js() {
//Adds JQuery from Google's CDN. Code pulled from www.http://css-tricks.com/snippets/wordpress/include-jquery-in-wordpress-theme/
if (!is_admin()) add_action("wp_enqueue_scripts", "my_jquery_enqueue", 11);
function my_jquery_enqueue() {
wp_deregister_script('jquery');
wp_register_script('jquery', "http" . ($_SERVER['SERVER_PORT'] == 443 ? "s" : "") . "://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js", false, null);
wp_enqueue_script('jquery');
}
wp_enqueue_script( 'bootstrapjs', get_template_directory_uri() . '/js/bootstrap.min.js', array('jquery'), '', true );
wp_enqueue_script( 'theme_js', get_template_directory_uri() . '/js/custom.js', array('jquery'), '', true );
if ( is_singular() ) wp_enqueue_script('comment-reply');
}
add_action( 'wp_enqueue_scripts', 'theme_styles' );
add_action( 'wp_enqueue_scripts', 'theme_js' );
function new_excerpt_more( $more ) {
return '...';
}
add_filter('excerpt_more', 'new_excerpt_more');
/**
* Register our sidebars and widgetized areas.
*
*/
function arphabet_widgets_init() {
register_sidebar( array(
'name' => 'aktuelt',
'id' => 'aktuelt',
'before_widget' => '<div class="col-sm-8 hashtag">',
'after_widget' => '</div>',
'before_title' => '<h2>',
'after_title' => '</h2>',
) );
register_sidebar( array(
'name' => 'footer',
'id' => 'footer',
'before_widget' => '<div>',
'after_widget' => '</div>',
) );
}
add_action( 'widgets_init', 'arphabet_widgets_init' );
function searchResult() {
printf( __('Søkeresultat for: %s', 'SILkunstlopLang'), get_search_query());
}
$args = array(
// 'width' => 980,
'height' => 180,
'default-image' => get_template_directory_uri() . '/images/header.svg',
'uploads' => true,
);
add_theme_support( 'custom-header', $args );
$args = array(
'default-color' => 'A9C5DD',
'default-image' => get_template_directory_uri() . '/images/background.jpg',
'default-attachment' => 'fixed',
'default-repeat' => 'none',
'default-position-x' => 'center',
'default-position-y' => 'center',
'uploads' => true,
);
add_theme_support( 'custom-background', $args );
?>