繁体   English   中英

如何向Wordpress菜单<a>标签</a>添加自定义类

[英]How to add custom class to wordpress menu <a> tag

我正在从头开始创建wordpress网站,但页面滚动锚定时遇到问题。 我正在使用Bootstrap Nav Walker模块,如何将.page-scroll类添加到菜单项<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:

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

这是我的wordpress菜单项:

这是我的WordPress菜单项

转到wp_bootstrap_navwalker

$ item_output。='';

采用

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

它有效

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM