将引导边栏菜单添加到wordpress

我正在尝试将一个引导示例站点转换为Wordpress模板，并停留在导航上

这是我的导航码

 <!-- Navigation -->
<a id="menu-toggle" href="#" class="btn btn-dark btn-lg toggle">
  <i class="fa fa-bars"></i>
</a>
<nav id="sidebar-wrapper">
  <ul class="sidebar-nav">
    <a id="menu-close" href="#" class="btn btn-light btn-lg pull-right toggle">
      <i class="fa fa-times"></i>
    </a>
    <li class="sidebar-brand">
      <a class="js-scroll-trigger" href="#top">Start Bootstrap</a>
    </li>
    <li>
      <a class="js-scroll-trigger" href="#top">Home</a>
    </li>
    <li>
      <a class="js-scroll-trigger" href="#about">About</a>
    </li>
    <li>
      <a class="js-scroll-trigger" href="#services">Services</a>
    </li>
    <li>
      <a class="js-scroll-trigger" href="#portfolio">Portfolio</a>
    </li>
    <li>
      <a class="js-scroll-trigger" href="#contact" onclick=$( "#menu-
close").click();>Contact</a>
      </li>
      </ul>
    </nav>

还有my functions.php

<?php
function mytheme_setup() {

register_nav_menus(
array(
'footer_nav' => __( 'Footer Menu', 'bootpress' ),
'top_menu' => __( 'Top Menu', 'bootpress' )
)

);

}
add_action( 'after_setup_theme', 'mytheme_setup' );
require_once('wp_bootstrap_navwalker.php');

function bootstrap_nav()
{
    wp_nav_menu( array(
            'theme_location'    => 'header-menu',
            'depth'             => 2,
            'container'         => 'false',
            'menu_class'        => 'nav sidebar-nav',
            'fallback_cb'       => 'wp_bootstrap_navwalker::fallback',
            'walker'            => new wp_bootstrap_navwalker())
    );
}


function pwwp_enqueue_my_scripts() {
  // jQuery is stated as a dependancy of bootstrap-js - it will be loaded by WordPress before the BS scripts
  wp_enqueue_script( 'bootstrap-js', '//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js', array('jquery'), true); // all the bootstrap javascript goodness
}
add_action('wp_enqueue_scripts', 'pwwp_enqueue_my_scripts');

function pwwp_enqueue_my_styles() {
  wp_enqueue_style( 'bootstrap', '//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' );

  wp_enqueue_style( 'bootstrap', '//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' );

  // this will add the stylesheet from it's default theme location if your theme doesn't already
  //wp_enqueue_style( 'my-style', get_template_directory_uri() . '/style.css');
}
add_action('wp_enqueue_scripts', 'pwwp_enqueue_my_styles');



 ?>

它显示了这个输出

---

我是网络开发新手，正在尝试了解如何将引导模板转换为Wordpress

您可能已经找到了答案，但这是我的两分钱：

如果你想使用WordPress内置的菜单功能，你不需要创建菜单。因此，您可以删除：

<ul class="sidebar-nav">
    <a id="menu-close" href="#" class="btn btn-light btn-lg pull-right toggle">
      <i class="fa fa-times"></i>
    </a>
    <li class="sidebar-brand">
      <a class="js-scroll-trigger" href="#top">Start Bootstrap</a>
    </li>
    <li>
      <a class="js-scroll-trigger" href="#top">Home</a>
    </li>
    <li>
      <a class="js-scroll-trigger" href="#about">About</a>
    </li>
    <li>
      <a class="js-scroll-trigger" href="#services">Services</a>
    </li>
    <li>
      <a class="js-scroll-trigger" href="#portfolio">Portfolio</a>
    </li>
    <li>
      <a class="js-scroll-trigger" href="#contact" onclick=$( "#menu-
close").click();>Contact</a>
      </li>
      </ul>

从

functions.php

文件

根据，您的

header.php

文件应该如下所示：

<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
            <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="<?php echo home_url(); ?>">
            <?php bloginfo('name'); ?>
        </a>
    </div>
    <?php
    wp_nav_menu( array(
        'theme_location'    => 'primary',
        'depth'             => 2,
        'container'         => 'div',
        'container_class'   => 'collapse navbar-collapse',
        'container_id'      => 'bs-example-navbar-collapse-1',
        'menu_class'        => 'nav navbar-nav',
        'fallback_cb'       => 'WP_Bootstrap_Navwalker::fallback',
        'walker'            => new WP_Bootstrap_Navwalker())
    );
    ?>
</div>

您可以在

header.php

中使用navwalker函数中的类，就像使用常规引导菜单一样

该错误似乎是由于实际的navwalker文件不在主题文件夹中引起的。确保

wp bootstrap navwalker.php

文件位于主题文件夹中（与

functions.php

位置相同）。如果要将

wp bootstrap navwalker.php

文件放在其他地方，请确保更改

'/wp bootstrap navwalker.php'

ie

'path/to/file/wp bootstrap navwalker.php'

在

functions.php

中指向该文件

希望这有帮助

<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
            <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="<?php echo home_url(); ?>">
            <?php bloginfo('name'); ?>
        </a>
    </div>
    <?php
    wp_nav_menu( array(
        'theme_location'    => 'primary',
        'depth'             => 2,
        'container'         => 'div',
        'container_class'   => 'collapse navbar-collapse',
        'container_id'      => 'bs-example-navbar-collapse-1',
        'menu_class'        => 'nav navbar-nav',
        'fallback_cb'       => 'WP_Bootstrap_Navwalker::fallback',
        'walker'            => new WP_Bootstrap_Navwalker())
    );
    ?>
</div>

<?php require_once get_template_directory() . '/wp-bootstrap-navwalker.php';