将默认主题菜单动态连接到单页分区

假设您的主题使用原生WordPress菜单页为您各自的网站构建自定义菜单,这相对容易。为了使其正常工作,需要在页面中添加一些自定义JS来处理向下滚动到给定节的操作。

节本身也需要有一个唯一的标识符,因此提供的JS实际上可以滚动到给定的节。下面是一个如何实现这一点的示例:

1. 我们将从创建和编辑WordPress菜单开始。请确保设置菜单项中的链接,以便它们与即将到来的锚滚动功能配合使用。这些url的 必须 匹配要滚动到的前端部分的ID。

2. 现在,我们可以利用jQuery触发一个单击功能,该功能将用户向下滚动到页面上的相应部分。下面是一个可以使用的函数示例。请记住,由于需要确保菜单的父包装器具有函数要查找的ID,因此需要对函数进行一些格式化。功能如下:

$('#navigation a').on('click', function (e) {
	//Stop page from doing default stuff
  	e.preventDefault();
  	//Get content panel ID from clicked element
  	var contentPanelId = $(this).attr("href");
  	//Animate to clicked element
	$('html, body').stop().animate({
		scrollTop: $(contentPanelId).offset().top
	}, 900, 'swing', function () {
		window.location.hash = target;
	});
});

3. 现在,要在模板中输出菜单,我们将继续使用wp\u nav\u menu()函数: https://developer.wordpress.org/reference/functions/wp_nav_menu/ 。请确保将此函数的使用包装在一个父DIV中,该DIV的ID与JS函数中调用的内容相匹配(在本例中,ID为“navigation”)。下面是一个预期标记的示例(请记住,我在后端将我的菜单命名为menu-menu-test):

   <header id="navigation" class="site-header" role="banner">
   
       <?php wp_nav_menu( array('menu' => 'menu-test' ) ); ?>
   
   </header><!-- #masthead -->
   

应该是这样!很明显,无论您希望菜单以何种方式显示在页面上,都需要其他样式来布局菜单。对于这个概念,最重要的是要记住标记元素的ID 必须 匹配菜单项的散列URL。如果页面上没有具有各自ID的div,JavaScript将无法知道滚动到哪个元素。

Here is a live example of the menu functioning the way you want it to on my personal portfolio.