Question

我很难导航on this site，这是一个使用Bootstrap入门主题的WordPress网站。我继承了该网站，并希望尽快使导航正常工作。

导航块的代码；

 <nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">
      <a href="<?php echo get_home_url(); ?>/"><img id="nav-logo" class="logo" src="<?php echo get_home_url(); ?>/images/eagle.png" alt="Kennett Eagles Logo - An eagle bursting through with the word Eagles above talons." /></a>
      <div class="navbar-header">
        <button class="hamburger hamburger--elastic-r navbar-toggle collapsed hide" type="button" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar" aria-label="Menu">
          <span class="hamburger-box">
            <span class="hamburger-inner"></span>
          </span>
        </button>

        <a id="mobile-logo" class="navbar-brand" href="index.html"><img class="logo" src="<?php echo get_home_url(); ?>/images/eagle.png"/></a>

      </div>

      <div id="navbar" class="navbar-collapse collapse" role="navigation">
        <ul class="nav navbar-nav">
            <?php wp_nav_menu( array( 
                'menu' => 'Main Menu',
                'theme_location' => 'primary',
                'items_wrap' => '<li>%3$s</li>', 
                'menu_class' => 'scroll-to-div',
                'container' => false
            ) ); ?>
        </ul>
      </div>
    </div>
  </nav>

菜单使用的JS代码；这只是巨大的JS文件that you can view here.

的一部分

$(function () {
  function t(t) {
    $("html, body").animate({
      scrollTop: t.offset().top - 100
    }, 0)
  }
  $("#mobile-logo").is(":visible") && $("#navbar a").on("click", function (t) {
    $(".hamburger-box").click()
  }), "" !== window.location.hash && t($(window.location.hash.replace("nav-", ""))), $("#navbar a, .scroll-to-div").on("click", function (e) {
    "/" === window.location.pathname && (e.preventDefault(), location.hash = $(this).data("div"), t($("#" + $(this).data("div"))), $("#navbar li").removeClass("active"), $(this).parent().addClass("active"), location.hash.replace("#", ""))
  })
})

和functions.php文件，这是我正在使用的代码块，我试图在其中获取data-div进入a标签，但调用与正确菜单项相对应的正确页面。 / p>

/*
 * Add scroll-to-div class to main navigation <a> links and data-div for the jump to.
 */
function add_menuclass($ulclass) {
    return preg_replace('/<a/', '<a class="scroll-to-div"' . 'data-div="<?php get_page($id); ?>"', $ulclass, 1);
}
add_filter('wp_nav_menu', 'add_menuclass');

我的问题是导航和一切正常on this development site here。甚至没有data-div，但一切正常。

实时站点没有。它会抛出TypeError t.offset(...) is undefined; can't access its "top" property.

Answer 1

这可能无法解决您的全部问题，但至少是其中的一部分。

您的链接HTML如下显示：由于您的<a class="scroll-to-div"data-div="<?php get_page($id); ?>" href="https://kennetteagleshockey.com/about/">About</a>方法中的语法错误，在呈现的页面上出现add_menuclass。

尝试更改

return preg_replace('/<a/', '<a class="scroll-to-div"' . 'data-div="<?php get_page($id); ?>"', $ulclass, 1);

到

return preg_replace('/<a/', '<a class="scroll-to-div" data-div="'.get_page($id).'"', $ulclass, 1);

请注意，之前，class属性和data-div属性之间的输出中没有空格，并且PHP代码是字符串的一部分。上面的更改解决了这些问题。

您的JavaScript可能会出现问题，也可能不会出现问题-但这至少是朝正确方向迈出的一步。

Answer 2

因此，在functions.php文件中，我不得不使用{{1}拆分要添加到导航链接中的类以及data-div在标签<a>中的放置位置。 }

nav_menu_link_attributes

您必须将页面的ID放入代码中，因此我必须为每个菜单项重复四次以上的代码。也许马虎，但它可行。

为什么我不能使用Bootstrap在WordPress主题的此导航菜单中使用data-div？

2 个答案: