添加引导工具栏菜单使用WordPress

Question

我想转换一个引导程序示例网站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 我是网络开发新手，试图获得一些知识Ab出引导模板转换为WordPress的

Answer 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文件。所以一定要从functions.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()) 
    ); 
} 

。

每WP Bootstrap Navwalker Github page，你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以指向该文件。

希望有帮助！