站长朋友们在使用的过程中，当做成自适应网站，引入Bootstrap框架的时候，希望可以输出Bootstrap结构的导航栏菜单，这样就够利用Bootstrap提供的样式进行菜单的显示。这篇WordPress教程里我们就向大家介绍一下如何在wordpress网站中输出Bootstrap结构的菜单。
我们先来看一下Bootstrap导航栏结构HTML代码:
wordpress一般采用wp_nav_menu函数输出导航栏菜单，而通过该函数输出的菜单是得不到上述的HTML结构的。可喜的是wp_nav_menu函数支持自定义输出HTML结构。
wordpress中wp_nav_menu函数的参数如下所示：
'','menu' => '','container' => 'div','container_class' => '','container_ID' => '','menu_class' => 'menu','menu_ID' => '','echo' => true,'fallback_cb' => 'wp_page_menu','before' => '','after' => '','link_before' => '','link_after' => '','items_wrap' => '','depth' => 0,'walker' => '' ); wp_nav_menu( $defaults );?>我们要修改的是walker参数。
1. 切换到主题目录，打开functions.PHP文件，加入以下代码：
attr_Title,'divIDer' ) == 0 && $depth === 1 ) { $output .= $indent . 'Title,'divIDer') == 0 && $depth === 1 ) { $output .= $indent . 'attr_Title,'dropdown-header') == 0 && $depth === 1 ) { $output .= $indent . 'Title ); } else if ( strcasecmp($item->attr_Title,'Disabled' ) == 0 ) { $output .= $indent . 'classes ) ? array() : (array) $item->classes; $classes[] = 'menu-item-' . $item->ID; $class_names = join( ' ',apply_filters( 'nav_menu_CSS_class',array_filter( $classes ),$args ) ); if ( $args->has_children ) $class_names .= ' dropdown'; if ( in_array( 'current-menu-item',$classes ) ) $class_names .= ' active'; $class_names = $class_names ? ' ' : ''; $ID = apply_filters( 'nav_menu_item_ID','menu-item-'. $item->ID,$args ); $ID = $ID ? ' ID="' . esc_attr( $ID ) . '"' : ''; $output .= $indent . ''; $atts = array(); $atts['Title'] = ! empty( $item->Title ) ? $item->Title : ''; $atts['target'] = ! empty( $item->target ) ? $item->target : ''; $atts['rel'] = ! empty( $item->xfn ) ? $item->xfn : ''; // If item has_children add atts to a. if ( $args->has_children && $depth === 0 ) { $atts['href'] = '#'; $atts['data-toggle'] = 'dropdown'; $atts['class'] = 'dropdown-toggle'; $atts['aria-haspopup'] = 'true'; } else { $atts['href'] = ! empty( $item->url ) ? $item->url : ''; } $atts = apply_filters( 'nav_menu_link_attributes',$atts,$args ); $attributes = ''; foreach ( $atts as $attr => $value ) { if ( ! empty( $value ) ) { $value = ( 'href' === $attr ) ? esc_url( $value ) : esc_attr( $value ); $attributes .= ' ' . $attr . '="' . $value . '"'; } } $item_output = $args->before; /* * Glyphicons * =========== * Since the the menu item is NOT a divIDer or header we check the see * if there is a value in the attr_Title property. If the attr_Title * property is NOT null we apply it as the class name for the glyphicon. */ if ( ! empty( $item->attr_Title ) ) $item_output .= ' '; else $item_output .= ''; $item_output .= $args->link_before . apply_filters( 'the_title',$item->title,$item->ID ) . $args->link_after; $item_output .= ( $args->has_children && 0 === $depth ) ? ' ' : ''; $item_output .= $args->after; $output .= apply_filters( 'walker_nav_menu_start_el',$item_output,$depth,$args ); } } /** * Traverse elements to create List from elements. * * display one element if the element doesn't have any children otherwise,* display the element and its children. Will only traverse up to the max * depth and no ignore elements under that depth. * * This method shouldn't be called directly,use the walk() method instead. * * @see Walker::start_el() * @since 2.5.0 * * @param object $element Data object * @param array $children_elements List of elements to continue traversing. * @param int $max_depth Max depth to traverse. * @param int $depth Depth of current element. * @param array $args * @param string $output Passed by reference. Used to append additional content. * @return null Null on failure with no changes to parameters. */ public function display_element( $element,&$children_elements,$max_depth,$args,&$output ) { if ( ! $element ) return; $ID_fIEld = $this->db_fIElds['ID']; // display this element. if ( is_object( $args[0] ) ) $args[0]->has_children = ! empty( $children_elements[ $element->$ID_fIEld ] ); parent::display_element( $element,$children_elements,$output ); } /** * Menu Fallback * ============= * If this function is assigned to the wp_nav_menu's fallback_cb variable * and a manu has not been assigned to the theme location in the wordpress * menu manager the function with display nothing to a non-logged in user,* and will add a link to the wordpress menu manager if logged in as an admin. * * @param array $args passed from the wp_nav_menu function. * */ public static function fallback( $args ) { if ( current_user_can( 'manage_options' ) ) { extract( $args ); $fb_output = null; if ( $container ) { $fb_output = '<' . $container; if ( $container_id ) $fb_output .= ' id="' . $container_id . '"'; if ( $container_class ) $fb_output .= ' '; $fb_output .= '>'; } $fb_output .= ''; $fb_output .= ''; $fb_output .= ''; if ( $container ) $fb_output .= ''; echo $fb_output; } }}