将Bootstrap侧边栏菜单添加到wordpress

我正在尝试将Bootstrap示例站点转换为Wordpress模板并卡在导航中
这是我的导航代码

< !-- Navigation --> < a id="menu-toggle" href="http://www.srcmini.com/#" 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="http://www.srcmini.com/#" 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="http://www.srcmini.com/#top"> Start Bootstrap< /a> < /li> < li> < a class="js-scroll-trigger" href="http://www.srcmini.com/#top"> Home< /a> < /li> < li> < a class="js-scroll-trigger" href="http://www.srcmini.com/#about"> About< /a> < /li> < li> < a class="js-scroll-trigger" href="http://www.srcmini.com/#services"> Services< /a> < /li> < li> < a class="js-scroll-trigger" href="http://www.srcmini.com/#portfolio"> Portfolio< /a> < /li> < li> < a class="js-scroll-trigger" href="http://www.srcmini.com/#contact" onclick=$( "#menu- close").click(); > Contact< /a> < /li> < /ul> < /nav>

【将Bootstrap侧边栏菜单添加到wordpress】和我的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="http://www.srcmini.com/#" 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="http://www.srcmini.com/#top"> Start Bootstrap< /a> < /li> < li> < a class="js-scroll-trigger" href="http://www.srcmini.com/#top"> Home< /a> < /li> < li> < a class="js-scroll-trigger" href="http://www.srcmini.com/#about"> About< /a> < /li> < li> < a class="js-scroll-trigger" href="http://www.srcmini.com/#services"> Services< /a> < /li> < li> < a class="js-scroll-trigger" href="http://www.srcmini.com/#portfolio"> Portfolio< /a> < /li> < li> < a class="js-scroll-trigger" href="http://www.srcmini.com/#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="http://www.srcmini.com/< ?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中指向文件。
希望有帮助!

    推荐阅读