将Bootstrap侧边栏菜单添加到wordpress

我正在尝试将Bootstrap示例站点转换为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>

和我的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');



 ?>

及其显示此输出https://imagebin.ca/v/3aEVBnR3NOjd我是Web开发的新手, 并试图获得有关将Bootstrap模板转换为Wordpress的知识

#1

你可能已经找到答案, 但这是我的两分钱：

如果要使用内置菜单功能的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>

实际的Navwalker函数位于你的headerp.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())
    );
}

从你的functions.php文件。

在WP Bootstrap Navwalker Github页面上, 你的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>

functions.php中的唯一内容(当然是关于navwalker！)应该是：

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

你可以使用header.php中navwalker函数中的类, 就像常规的Bootstrap菜单一样。

该错误似乎是由于实际的navwalker文件不在主题文件夹中引起的。确保wp-bootstrap-navwalker.php文件位于主题文件夹(与functions.php相同的位置)中。如果要将wp-bootstrap-navwalker.php文件放置在其他位置, 请确保更改’/wp-bootstrap-navwalker.php’；即’path / to / file / wp-bootstrap-navwalker.php’;在functions.php中指向文件。

希望有帮助！