零基础建站培训介绍

当前位置:

wordpress制作符合Bootstrap的导航栏菜单(带二级菜单)

新手学做网站时使用wordpress程序做网站,它有一个很棒的功能,就是在后台创建导航菜单,在后台我们可以任意的拖动导航栏目。wordpress程序结合Bootstrap框架,就可以制作出一个响应式的动态网站。并且可以自动调用后台的导航栏目。

wordpress and Bootstrap

前面的课程,我们讲到了bootstrap响应式导航如何制作,给出了静态的响应式导航制作方法。那么如何让wordpress制作符合Bootstrap的导航栏菜单呢?

wordpress制作符合Bootstrap的导航栏菜单分为二种:

一种是:只需要一级导航,不带二级菜单。

代码如下:

<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<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.xuewangzhan.net/">学做网站论坛</a>
</div>

<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<?php if(function_exists('wp_nav_menu')) wp_nav_menu(array('theme_location' =>'topmenu','container' => false, 'items_wrap' => '%3$s','depth' => 1 )); ?>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>

另一种:输出带有下拉二级菜单导航。

WordPress一般采用wp_nav_menu函数输出导航栏菜单,默认输出的导航菜单是不符合Bootstrap下拉菜单的,如果我们想输出带有下拉二级菜单导航,需要我们通过模板函数进行自定义输出html结构。

方法如下:

  1. 打开自己模板模板函数functions.php,加入以下代码:
    /*
    定义bootstrap二级菜单导航
    代码来源:学做网站论坛http://www.xuewangzhan.net/
    */

    class wp_bootstrap_navwalker extends Walker_Nav_Menu {public function start_lvl( &$output, $depth = 0, $args = array() ) {
    $indent = str_repeat( "\t", $depth );
    $output .= "\n$indent<ul role=\"menu\" class=\" dropdown-menu\">\n";
    }public function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
    $indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';if ( strcasecmp( $item->attr_title, 'divider' ) == 0 && $depth === 1 ) {
    $output .= $indent . '<li role="presentation" class="divider">';
    } else if ( strcasecmp( $item->title, 'divider') == 0 && $depth === 1 ) {
    $output .= $indent . '<li role="presentation" class="divider">';
    } else if ( strcasecmp( $item->attr_title, 'dropdown-header') == 0 && $depth === 1 ) {
    $output .= $indent . '<li role="presentation" class="dropdown-header">' . esc_attr( $item->title );
    } else if ( strcasecmp($item->attr_title, 'disabled' ) == 0 ) {
    $output .= $indent . '<li role="presentation" class="disabled"><a href="#">' . esc_attr( $item->title ) . '</a>';
    } 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 . '<li' . $id . $value . $class_names .'>';

    $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'] = $item->url;
    $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;

    if ( ! empty( $item->attr_title ) )
    $item_output .= '<a'. $attributes .'><span class="glyphicon ' . esc_attr( $item->attr_title ) . '"></span>&nbsp;';
    else
    $item_output .= '<a'. $attributes .'>';

    $item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after;
    $item_output .= ( $args->has_children && 0 === $depth ) ? ' <span class="caret"></span></a>' : '</a>';
    $item_output .= $args->after;

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

    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 );
    }

    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 .= '<ul';

    if ( $menu_id )
    $fb_output .= ' id="' . $menu_id . '"';

    if ( $menu_class )
    $fb_output .= ' class="' . $menu_class . '"';

    $fb_output .= '>';
    $fb_output .= '<li><a href="' . admin_url( 'nav-menus.php' ) . '">Add a menu</a></li>';
    $fb_output .= '</ul>';

    if ( $container )
    $fb_output .= '</' . $container . '>';

    echo $fb_output;
    }
    }
    }
  2. 在网站需要显示导航的地方(header.php文件中)通过如下代码输出带二级菜单导航栏:
    <nav class="navbar navbar-default">
    <div class="container">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
    <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.xuewangzhan.net/">学做网站论坛</a>
    </div>  <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
    <?php
    wp_nav_menu( array(
    'theme_location' => 'topmenu',
    'depth' => 2,
    'container' => false,
    'menu_class' => 'nav navbar-nav',
    'fallback_cb' => 'wp_page_menu',
    //添加或更改walker参数
    'walker' => new wp_bootstrap_navwalker())
    );
    ?></div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
    </nav>
  3. 通过上面的代码,就可以输出带二级导航的菜单了。但是现在的二级菜单是点击后再出现的,如果想做成鼠标经过时,弹出二级菜单,请参考:bootstrap下拉菜单鼠标悬停弹出
上一课: 下一课:

发表评论

*

* 绝不会泄露