2016-08-08 14 views
1

初めてブートストラップを使用して独自のWordPressテーマを開発していますが、wp-bootstrap-navwalkerを使用する際に問題が発生しました。wp-bootstrap-navwalkerを使用した折りたたみメニューの問題

私は、sm、md、lgに見えるメニューとxsに表示されるメニューの2つを作成しました。 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); 

?> 

誰もが私の問題が発信されている場所への手掛かりを持っていますか?

何か手がかりをいただき、ありがとうございます。詳細をお知らせください。

ベスト

、 エレナ

答えて

0

は、だから私は実際に要素を検査して、再びHTMLを勉強した後、最終的に問題を自分自身を発見しました。

私のnavの周りのdivが実際に余分であり、メニューによって追加されたコンテナを複製したことに気付かなかった。だから私は "折りたたみナビバ - 崩壊"のクラスで周囲のdivを削除した後、メニューの折りたたみメニューが再び働いた(ボタンをクリックすると開きます)。

関連する問題