如何将自定义类添加到wordpress菜单<a> tag

时间:2016-03-23 10:59:09

标签: php jquery wordpress

I'm creating a wordpress website from scratch and I have problem with page scroll to anchor. I'm using Bootstrap Nav Walker module for it, how should I add my .page-scroll class to my menu item <a>?

Here is my header.php menu:

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

This is my js:

$(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();
    });
});

Here is my wordpress menu item:

Here is my wordpress menu item

2 个答案:

答案 0 :(得分:0)

转到wp_bootstrap_navwalker

$ item_output。='';

答案 1 :(得分: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');

并且有效