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

Question

已连接到此问题：https://wordpress.stackexchange.com/questions/300387/default-menu-items-for-custom-theme-but-easily-delete-able-customize-able-by-u

因此，再次使用此引导程序模板作为示例：https://blackrockdigital.github.io/startbootstrap-creative/

菜单项将连接到这些部分，因此当点击它们时它们会滚动到。但是，如何以ux / ui友好的方式将菜单项动态链接到每个相应的部分，以便当用户更改项目或菜单时，它们会链接回该部分？

换句话说，我会有一个默认的易于更改的菜单和主题附带的菜单项。但是，我如何才能让用户轻松将不同的菜单项连接到同一部分？我如何将菜单项动态连接到所述部分？

Answer 1

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

部分本身也需要有一个唯一的标识符，因此提供的JS实际上可以滚动到给定的部分。以下是如何完成此操作的示例：

1. 我们将从创建和编辑WordPress菜单开始。确保从菜单项设置链接，以便它们可以使用即将到来的锚点滚动功能。这些网址的必须匹配您希望滚动到的前端部分的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;
	});
});

1. 现在，要在模板中输出菜单，我们将继续使用wp_nav_menu（）函数：https://developer.wordpress.org/reference/functions/wp_nav_menu/。确保在父DIV周围使用此函数，其ID与JS函数中调用的内容相匹配（在此示例中，ID为“navigation”）。这是预期标记的一个例子（记住，我在后端命名了我的菜单菜单测试）：

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