动态将默认主题菜单连接到一页区域 _主题

与此问题相关：https://wordpress.stackexchange.com/questions/300387/default-menu-items-for-custom-theme-but-easily-delete-able-customizeize-able-by-u
因此, 再次使用此引导程序模板作为示例：https://blackrockdigital.github.io/startbootstrap-creative/
菜单项将连接到这些部分, 因此在单击时将其滚动到。但是, 我将如何以ux / ui友好方式将菜单项动态链接到每个相应的部分, 以便当用户去更改项目或菜单时, 他们将链接回该部分？
换句话说, 我将拥有一个默认的易于更改的菜单, 并且菜单项随主题一起提供。但是, 如何使用户轻松将不同的菜单项连接到同一部分呢？以及如何将菜单项动态连接到所述部分？
#1 假设你的主题使用本机WordPress菜单页面为你各自的网站构建自定义菜单, 这相对容易。为了使其正常工作, 需要在页面上添加一些自定义JS, 以处理向下滚动到给定部分的情况。
部分本身也将需要具有唯一的标识符, 因此提供的JS实际上可以滚动到给定的部分。这是有关如何完成此操作的示例：
我们将从创建和编辑WordPress菜单开始。确保从菜单项设置链接, 以便它们与即将到来的锚点滚动功能一起使用。这些网址必须与你希望滚动到的前端部分的ID相匹配。

文章图片
现在, 我们可以利用jQuery触发点击功能, 该功能会将用户向下滚动到页面上的相应部分。这是你可以使用的功能的示例。请记住, 由于你需要确保菜单的父包装具有要查找的功能的ID, 因此需要对功能进行某种格式设置。功能如下：

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

现在, 要在模板中输出菜单, 我们将继续使用wp_nav_menu()函数：https://developer.wordpress.org/reference/functions/wp_nav_menu/。确保在父DIV周围使用此函数, 其ID与JS函数内部所调用的ID匹配(在此示例中, 该ID为” 导航” )。这是预期标记的示例(请记住, 我在后端将菜单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将无法知道滚动到哪个元素。
【动态将默认主题菜单连接到一页区域】这是菜单的实时示例, 该菜单以你想要的方式作用于我的个人档案袋。