如何动态导航菜单以及如何调用所有 class

Question

我在函数中注册了菜单。在输出中，我用主题位置、菜单 ID、菜单 class 调用 wp_nav_menu，但我无法调用 li 和 class。我如何调用 li 和 a class

          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#ftco-nav" aria-controls="ftco-nav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="fa fa-bars"></span> Menu
          </button>
          <div class="collapse navbar-collapse" id="ftco-nav">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item active"><a href="index.html" class="nav-link">Home</a></li>
                <li class="nav-item"><a href="about.html" class="nav-link">About</a></li>
                <li class="nav-item"><a href="services.html" class="nav-link">Services</a></li>
                <li class="nav-item"><a href="project.html" class="nav-link">Project</a></li>
                <li class="nav-item"><a href="blog.html" class="nav-link">Blog</a></li>
              <li class="nav-item"><a href="contact.html" class="nav-link">Contact</a></li>
            </ul>
          </div>
        </div>
      </nav>

Answer 1

如果您想将 classes 添加到您的菜单项，您可以在后端的设计 -> 菜单 -> 右上角切换 "screen options" -> [=35] 下执行此操作=] "css classes"。之后，您可以将 classes 添加到您的菜单项中。

也许你想改变菜单的完整输出，你可以使用wp_get_nav_menu_items函数。你给它 id（将鼠标悬停在 "delete menu" link 上，它会在 url 中显示 id），然后你会得到菜单项：

<?php
    $menuID = '12'; // ID of your menu
    $primaryNav = wp_get_nav_menu_items($menuID); // get your menu items
?>

现在您可以使用菜单中的所有项目，并且可以使用 foreach 并使用您的个人标记输出所有项目。

<ul id="ftco-nav">
    <?php
        foreach( $primaryNav as $item ) {
            $link = $item->url; // get the url of item
            $title = $item->title; // get title of item
            ?>

            <li class="item"><a href="<?php echo $link; ?>"><?php echo $title; ?></a></li>

    <?php } ?>
</ul>

您可以为 ul 和 li 提供您喜欢的所有 classes，并且仍然拥有菜单中的所有项目。

也许您想提供 "active" class，以便在查看页面时活动菜单项具有不同的样式。为此，您可以获得当前 url 并检查它是否与菜单项的 link 相同。如果是，则设置活动 class。所以你的代码看起来像这样：

<ul id="ftco-nav">
    <?php
        foreach( $primaryNav as $item ) {
            $link = $item->url; // get the url of item
            $title = $item->title; // get title of item
            $active_page = false;
            $current_url = (isset($_SERVER['HTTPS']) && $_SERVER['HTTPS'] === 'on' ? "https" : "http") . "://$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]";
            if ($link == $current_url) { $active_page = true; }
        ?>

        <li class="item <?php if ($active_page == true) { echo 'active'; } ?>"><a href="<?php echo $link; ?>"><?php echo $title; ?></a></li>

    <?php } ?>
</ul>

这样您就可以完全个性化您的菜单，而无需使用自定义 walker 或过滤器。希望这有帮助。

如何动态导航菜单以及如何调用所有 class

How to dynamic nav menu and how to call all class

wordpress

wordpress-theming