2016-03-23 17 views
0

私は最初からワードプレスのウェブサイトを作成しており、ページのスクロールでアンカーに問題があります。 Bootstrap Nav Walkerモジュールを使用していますが、.page-scrollクラスをメニュー項目<a>に追加するにはどうすればよいですか?ここでワードプレスメニューにカスタムクラスを追加するには<a>タグ

は私のheader.phpのメニューです:

<nav class="navbar navbar-custom navbar-fixed-top" role="navigation"> 
     <div class="container"> 
      <div class="navbar-header page-scroll"> 
       <button type="button" class="navbar-toggle collapse" data-toggle="collapse" data-target=".navbar-main-collapse"> 
        <i class="fa fa-bars"></i> 
       </button> 
       <a class="navbar-brand" href="#page-top"> 
        <img id="#page-top" src="<?php echo get_template_directory_uri(); ?>/images/logo3.png" alt="Brand logo"> 
       </a> 
      </div> 

      <?php 
       wp_nav_menu(array(
        'menu'    => 'primary', 
        'theme_location' => 'primary', 
        'depth'    => 2, 
        'container'   => 'div', 
        'container_class' => 'collapse navbar-collapse navbar-right navbar-main-collapse', 
        'container_id'  => 'bs-example-navbar-collapse-1', 
        'menu_class'  => 'nav navbar-nav', 
        'fallback_cb'  => 'wp_bootstrap_navwalker::fallback', 
        'walker'   => new wp_bootstrap_navwalker()) 
      ); 
      ?> 

      <!-- Collect the nav links, forms, and other content for toggling --> 
     </div> 
     <!-- /.container --> 
    </nav> 

これは私のjsです:

Here is my wordpress menu item

+0

の作品何が問題なの? –

+0

スクロールが機能しません。スクロールなしでホッピングしています。 – Baivaras

+0

'console'にエラーがありますか? –

答えて

0

ゴーwp_bootstrap_navwalkerに:ここで

$(function() { 
    $('.page-scroll a').bind('click', function(event) { 
     var $anchor = $(this); 
     var $anchor_scroll = $($anchor.attr('href')).offset().top; 
     var $anchor_scroll_calc = $anchor_scroll; 
     $('html, body').stop().animate({ 
      scrollTop: $anchor_scroll_calc 
     }, 1500); 
     event.preventDefault(); 
    }); 
}); 

は私のワードプレスのメニュー項目があります

$ item_output。= '';

+0

あなたの答えを投稿している間、簡単な説明をしてください。 –

0

使用

function add_nav_class($output) { 
    $output= preg_replace('/<a/', '<a class="scroll-link"', $output, 1); 
    return $output; 
} 
add_filter('wp_nav_menu', 'add_nav_class'); 

、それは、あなたがすでにあなたのNAVと `.PAGEスクロールA`カバーこのメニューのリンクに` .PAGE-scroll`を追加したようだそれだ

関連する問題