[wordpress主题]WordPress输出Bootstrap导航栏结构的菜单例子

最近tennfy在用Bootstrap重写博客主题，由于之前没有用过Bootstrap，所以也是花了不少功夫来了解Bootstrap。Bootstrap提供了很完整的css样式布局，对于有一定前端基础的人来说真的非常方便。

利用Bootstrap做wordpress主题遇到的第一个问题就是输出Bootstrap导航栏结构的菜单，这样才能够利用Bootstrap提供的样式进行菜单的显示。本文就来介绍下如何实现wordpress输出Bootstrap的菜单结构。

Bootstrap导航栏结构

常见的Bootstrap导航栏为如下形式：

defaultnavbar_demo

其HTML结构为：

熟悉wordpress的朋友都知道，wordpress一般采用wp_nav_menu函数输出菜单，而通过该函数输出的菜单是得不到上述的html结构的。不过值得高兴的是，wp_nav_menu函数支持自定义输出html结构。

wordpress中wp_nav_menu函数的参数如下所示：

 
$defaults = array(  
    "theme_location"  => "",  
    "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"      => "

%3$s",  
    "depth"           => 0,  
    "walker"          => "" 
);  
 
wp_nav_menu( $defaults );  
 
?>

其中，我们需要修改的就是walker参数。

输出Bootstrap导航栏结构菜单

在header.php中，通过如下代码输出导航栏菜单：

上面代码中walker参数的值是一个类，所以接下来你需要添加这个类，在主题的functions.php文件中添加下面代码：


 
/**
 * Class Name: wp_bootstrap_navwalker 
 * GitHub URI: https://github.com/twittem/wp-bootstrap-navwalker 
 * Description: A custom WordPress nav walker class to implement the Bootstrap 3 navigation style in a custom theme using the WordPress built in menu manager. 
 * Version: 2.0.4 
 * Author: Edward McIntyre - @twittem 
 * License: GPL-2.0+ 
 * License URI: http://www.gnu.org/licenses/gpl-2.0.txt 
 */ 
 
class wp_bootstrap_navwalker extends Walker_Nav_Menu {  
 
    /**
     * @see Walker::start_lvl() 
     * @since 3.0.0 
     * 
     * @param string $output Passed by reference. Used to append additional content. 
     * @param int $depth Depth of page. Used for padding. 
     */ 
    public function start_lvl( &$output, $depth = 0, $args = array() ) {  
        $indent = str_repeat( "\t", $depth );  
        $output .= "\n$indent

\n";  
    }  
 
    /**
     * @see Walker::start_el() 
     * @since 3.0.0 
     * 
     * @param string $output Passed by reference. Used to append additional content. 
     * @param object $item Menu item data object. 
     * @param int $depth Depth of menu item. Used for padding. 
     * @param int $current_page Menu item ID. 
     * @param object $args 
     */ 
    public function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {  
        $indent = ( $depth ) ? str_repeat( "\t", $depth ) : "";  
 
        /**
         * Dividers, Headers or Disabled 
         * ============================= 
         * Determine whether the item is a Divider, Header, Disabled or regular 
         * menu item. To prevent errors we use the strcasecmp() function to so a 
         * comparison that is not case sensitive. The strcasecmp() function returns 
         * a 0 if the strings are equal. 
         */ 
        if ( strcasecmp( $item->attr_title, "divider" ) == 0 && $depth === 1 ) {  
            $output .= $indent . "
• ";  
          } else if ( strcasecmp( $item->title, "divider") == 0 && $depth === 1 ) {  
              $output .= $indent . "
• ";  
          } else if ( strcasecmp( $item->attr_title, "dropdown-header") == 0 && $depth === 1 ) {  
              $output .= $indent . "
• " . esc_attr( $item->title );  
          } else if ( strcasecmp($item->attr_title, "disabled" ) == 0 ) {  
              $output .= $indent . "
• " . esc_attr( $item->title ) . "";  
          } else {  
   
              $class_names = $value = "";  
   
              $classes = empty( $item->classes ) ? array() : (array) $item->classes;  
              $classes[] = "menu-item-" . $item->ID;  
   
              $class_names = join( " ", apply_filters( "nav_menu_css_class", array_filter( $classes ), $item, $args ) );  
   
              if ( $args->has_children )  
                  $class_names .= " dropdown";  
   
              if ( in_array( "current-menu-item", $classes ) )  
                  $class_names .= " active";  
   
              $class_names = $class_names ? " class="" . esc_attr( $class_names ) . """ : "";  
   
              $id = apply_filters( "nav_menu_item_id", "menu-item-". $item->ID, $item, $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, $item, $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 .= "attr_title ) . ""> ";  
              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, $item, $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, $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, $max_depth, $depth, $args, $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 .= " class="" . $container_class . """;  
   
                  $fb_output .= ">";  
              }  
   
              $fb_output .= "  
              if ( $menu_id )  
                  $fb_output .= " id="" . $menu_id . """;  
   
              if ( $menu_class )  
                  $fb_output .= " class="" . $menu_class . """;  
   
              $fb_output .= ">";  
              $fb_output .= "Add a menu";  
              $fb_output .= "";  
   
              if ( $container )  
                  $fb_output .= "";  
   
              echo $fb_output;  
          }  
      }  
  }

  [wordpress主题]WordPress输出Bootstrap导航栏结构的菜单例子

  http://m.bbyears.com/css/94557.html

  推荐访问:wordpress教程 wordpress大学