Wordpress中的自定义Nav无法加载页面 [英] Custom Nav in Wordpress not Loading Pages

问题描述

我已经在html/css中创建了一个自定义导航，并将其应用于wordpress中的header.php文件中(所有页面链接都链接到我的html页面).我将如何使用这种导航样式作为我的主要导航? IE.每当我创建页面时，页面链接都会进入导航吗?我尝试删除所有的html链接，但似乎无法正常工作.目前，这是该网站的链接: http://ixd487.firebird.sheridanc.on .ca/wordpress/

I've created a custom nav in html/css and have applied it to my header.php file in wordpress (with all the page links linking to my html pages). How would I use this nav style as my main nav? ie. whenever I create a page, the page link goes onto the nav? I've tried deleting all the html links but it doesn't seem to work. Here's a link to the site at the moment: http://ixd487.firebird.sheridanc.on.ca/wordpress/

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

Below is what I pasted into the nav section in my 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 --> 

推荐答案

我一直在我的网站上进行此操作.首先，在functions.php中

I've been doing this on my website. First, in 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

Next, in an includes folder, I use assets/includes. You should use a bootstrap walker menu: https://github.com/wp-bootstrap/wp-bootstrap-navwalker

现在，在您的header.php中:

Now, in your 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>

它应该创建一个动态的boostrap菜单.

It should create a dynamic boostrap menu.

这篇关于Wordpress中的自定义Nav无法加载页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！