[英]How to add class to link (a tag) while creating custom wordpress toolbar menu?
[英]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菜单项:
转到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.