Question

我是第一次使用bootstrap开发自己的wordpress主题，而且在使用wp-bootstrap-navwalker时我遇到了一个问题。

我创建了两个菜单，一个在sm，md和lg中可见，另一个在xs中可见。在xs中，它应该被折叠，并在按下按钮时打开，但是在我将wp-bootstrap-navwalker添加到我的html后，它不再有效。

这是我的HTML：

<!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">

这是我的functions.php：

<?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 );

?>

有没有人知道我的问题来自哪里？

非常感谢您提供的任何线索，并告诉我是否应该提供更多信息！

最佳，埃琳娜

Answer 1

所以我在使用inspect元素再次研究html后，实际上自己发现了问题。

我没有意识到导航器周围的div实际上是多余的，只是复制了菜单添加的容器。所以在我删除了周围的div＆＃34;折叠navbar-collapse＆＃34;菜单折叠菜单再次工作（单击按钮时打开）。

使用wp-bootstrap-navwalker折叠菜单的问题

1 个答案: