Wordpress 中的自定义导航不加载页面

Question

我在 html/css 中创建了一个自定义导航，并将其应用于我在 wordpress 中的 header.php 文件（所有页面链接都链接到我的 html 页面）。我将如何使用这种导航样式作为我的主要导航？ IE。每当我创建页面时，页面链接都会进入导航？我试过删除所有的 html 链接，但它似乎不起作用。以下是该网站的链接：http://ixd487.firebird.sheridanc.on.ca/wordpress/

下面是我粘贴到 header.php 中导航部分的内容

                    <!-- nav -->
                 <nav class="navbar navbar-expand-lg navbar-dark navbar-site sticky-top0 nav-fill0 navbar-lg0 navbar-transparent0" role="navigation">
    <div class="container">
        <button class="navbar-toggler site-toggler collapsed" type="button" data-toggle="collapse" data-target="#siteMenu" aria-controls="siteMenu" aria-expanded="false" aria-label="Toggle navigation">Menu</button>

        <div class="collapse navbar-collapse" id="siteMenu">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item home-icon">
                    <a class="nav-link" href="index.html">Home</a>
                </li>
                <li class="nav-item ">
                    <a class="nav-link" href="whymac.html">Why McMaster?</a>
                </li>
                <li class="nav-item ">
                    <a class="nav-link" href="co-op.html">Co-Op/Internships</a>
                </li>
                <li class="nav-item ">
                    <a class="nav-link" href="summergrad.html">Summer & Recent Grads</a>
                </li>
                <li class="nav-item ">
                    <a class="nav-link" href="funding.html">Funding</a>
                </li>

                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="https://mps.mcmaster.ca/_staging/bw/elements/#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Recruitment
</a>    <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                        <a class="dropdown-item" href="careerfairs.html">Career Fairs</a>
                        <a class="dropdown-item active" href="infosessions.html">Information Sessions</a>

                    </div>
                </li>
                <li class="nav-item ">
                    <a class="nav-link" href="postnow.html">Post Now</a>
                </li>
                <li class="nav-item ">
                    <a class="nav-link" href="contact.html">Contact</a>
                </li>
            </ul>
        </div>
    </div>
</nav>
                    <?php html5blank_nav(); ?>

                <!-- /nav --> 

Answer 1

我已经查看了您的网站，但找不到您上面提到的具有“navbar-nav mr-auto”类的 ul。另外，不要添加静态导航，而是使用 Bootstrap NavWalker 将 Bootstrap 菜单与 WordPress 集成。

https://github.com/wp-bootstrap/wp-bootstrap-navwalker

Answer 2

我一直在我的网站上这样做。一、在functions.php中

/**************************************
* My Custom Menu
**************************************/
add_theme_support('menus');
register_nav_menus( array(
  'primary' => __( 'main_menu', 'menu-header' ),
) );

接下来，在includes 文件夹中，我使用assets/includes。您应该使用引导程序菜单：https://github.com/wp-bootstrap/wp-bootstrap-navwalker

现在，在你的 header.php 中：

<nav class="navbar navbar-default">
    <div class="container">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="yourwebsitelink"><img class="logo" src="<?php bloginfo('template_url'); ?>/assets/images/logo.png" alt=""/></a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <?php require_once('assets/includes/wp_bootstrap_navwalker.php'); ?>
    <?php
        wp_nav_menu( array(
            'menu'              => 'Menu',
            'theme_location'    => 'menu-header',
            'depth'             => 2,
            'container'         => 'div',
            'container_class'   => 'collapse navbar-collapse nav navbar-nav navbar-right //Custom CS if needed',
            'container_id'      => 'bs-example-navbar-collapse-1',
            'menu_class'        => 'nav navbar-nav navbar-right',
            'fallback_cb'       => 'wp_bootstrap_navwalker::fallback',
            'walker'            => new wp_bootstrap_navwalker())
        );
    ?>

  </div><!-- /.container-fluid -->
</nav>

它应该创建一个动态引导菜单。