将Bootstrap菜单集成到WordPress Nav中

Question

这是我的Bootstrap导航菜单代码。我想使用Bootstrap Navwalker代码和“Page-Scroll”将以下内容与WordPress菜单结合起来。你能帮我吗？

<nav class="navbar navbar-default navbar-fixed-top" role="navigation"> 
    <div class="container"> 
     <div class="navbar-header page-scroll"> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"> 
       <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 page-scroll" href="#page-top"><img src="http://LOGO" width="100" style="position:relative;bottom:20px;"></a> 
     </div> 

     <!-- Collect the nav links, forms, and other content for toggling --> 
     <div class="collapse navbar-collapse navbar-ex1-collapse"> 
      <ul class="nav navbar-nav"> 
       <!-- Hidden li included to remove active class from about link when scrolled up past about section --> 
       <li class="hidden"> 
        <a class="page-scroll" href="#page-top"></a> 
       </li> 
       <li> 
        <a class="page-scroll" href="#about">About</a> 
       </li> 
       <li> 
        <a class="page-scroll" href="#services">Portfolio</a> 
       </li> 
       <li> 
        <a class="page-scroll" href="#blog">Blog</a> 
       </li> 
       <li> 
        <a class="page-scroll" href="#contact">Contact</a> 
       </li> 
      </ul> 
     </div> 
     <!-- /.navbar-collapse --> 
    </div> 
    <!-- /.container --> 
</nav> 

我想将Bootstrap Navwalker代码与class =“page-scroll”整合在一起。我怎么做？

这里是引导NavWalker代码：

<?php wp_nav_menu(array(
'container_class' => 'menu-header', 
'theme_location' => 'primary', 
'items_wrap' => '<ul id="%1$s" class="%2$s nav navbar-nav">%3$s</ul>', 
'walker' => new wp_bootstrap_navwalker, 
'menu' => 'top_menu', 
'depth' => 2, 
'container' => false, 
'menu_class' => 'nav', 
)); ?> 

谢谢。

Answer 1

你必须写一个子类方法start_el（）在wp_bootstrap_navwalker，将你的CSS类添加到每一个环节中的菜单：

class wp_bootstrap_navwalker extends Walker_Nav_Menu { 
    /** 
    * Start the element output. 
    * 
    * The $args parameter holds additional values that may be used with the child 
    * class methods. Includes the element output also. 
    * 
    * @since 2.1.0 
    * @abstract 
    * 
    * @param string $output   Passed by reference. Used to append additional content. 
    * @param object $object   The data object. 
    * @param int $depth    Depth of the item. 
    * @param array $args    An array of additional arguments. 
    * @param int $current_object_id ID of the current item. 
    */ 
    function start_el(&$output, $item, $depth = 0, $args = array(), $id = 0) { 
     $indent = ($depth) ? str_repeat("\t", $depth) : ''; 
     $class_names = 'class="page-scroll"'; 
     $output .= $indent . '<li' . $id . $class_names . '>'; 

     //Add attributes to link element. 
     $attributes = ! empty($item->attr_title) ? ' title="' . esc_attr($item->attr_title) .'"' : ''; 
     $attributes .= ! empty($item->target) ? ' target="' . esc_attr($item->target ) .'"' : ''; 
     $attributes .= ! empty($item->xfn) ? ' rel="' . esc_attr($item->xfn) .'"' : ''; 
     $attributes .= ! empty($item->url) ? ' href="' . esc_attr($item->url) .'"' : ''; 
     $attributes .= 'class="page-scroll"'; 

     $item_output .= '<a'. $attributes .'>'; 
     $item_output .= $args->link_before . apply_filters('the_title', $item->title, $item->ID) . $args->link_after; 
     $item_output .= '</a>'; 
     $item_output .= $args->after; 

     $output .= apply_filters('walker_nav_menu_start_el', $item_output, $item, $depth, $args); 

    } 
}