学做网站培训课程介绍

当前位置：

wordpress制作符合Bootstrap的导航栏菜单（带二级菜单）

本课程视频是VIP会员课程，学习请进入VIP学习区。

新手学做网站时使用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="https://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，加入以下代码：(如果报错，替换这一句： $output .= "\n$indent<ul role=\"menu\" class=\" dropdown-menu\">\n"; ) 
    

    //添加菜单功能
    
if ( function_exists('register_nav_menus')) {register_nav_menus(array('topmenu' => ' 顶部菜单'));}
    
/*定义bootstrap二级菜单导航
    
*/
    
class wp_bootstrap_navwalker extends Walker_Nav_Menu {public function start_lvl( &$output, $depth = 0, $args = array() ) {
    
$indent = str_repeat( "\t", $depth );
    
$output .= $indent.'<ul role="menu" class=" dropdown-menu">';
    
}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="https://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下拉菜单鼠标悬停弹出

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注

相关教程

  • 漂亮的wordpress淘客模板 图文教程 (111435 次浏览)
    今天再次给大家分享一款自己仿的一个wordpress淘客模板。这个模板是我自己在别人模板的基础上进行二次开发，自己比较喜欢。注意：此模板不支持IE6,
  • 用什么建网站？Wordpress建网站好不好 (110905 次浏览)
    用什么建网站？Wordpress建网站好不好？这些问题经常被新手问上问起。可以这样说，wordpress程序可以建各种类型的网站，它的功能强大之处令人称赞，
  • 推荐一款绿色Wordpress企业网站模板（符合网站优化） 图文教程 (16817 次浏览)
    推荐一款绿色Wordpress企业网站模板，特别符合SEO优化要求。这款主题是一款绿色企业wp模板主题,很多设置都比较符合seo网站优化排名.也可以根据自己需
  • 符合SEO排名的装饰公司网站制作 图文教程附件下载 (114525 次浏览)
    这个贴子我花了很长的时间。是我公司的网站，也是我第一次完都全做了一个装修企业主题。上面的动画是用  object.js  在里面设置的。我花了少了时间，
  • Bootstrap网站制作_网站建设模板 图文教程 (1842 次浏览)
  • bootstrap响应式导航如何制作 图文教程 (19258 次浏览)
    bootstrap是一个特别好用的网站前端框架，可以让我们制作响应式网站时比较简单。对于响应式网站制作时，响应式导航是比较重要的部分。下面学做网
  • 分享一个网址导航站模板 图文教程 (17457 次浏览)
    感谢VIP学员：卓新红  的无私分享，此模板已通过学做网站论坛网的审核，大家可放心使用。分享一个网址导航站模板，这个网址导航模板可以制作图片
  • Wordpress导航调用二级子菜单 图文教程 (121586 次浏览)
    在学做网站论坛的VIP课程中，我们讲了做网站时，我们网站的导航是调用一级分类和页面，可往往为了一些需要，登录制作wordpress下拉菜单，要求调用某个
  • Dreamweaver跳转菜单制作 视频教程 (1123838 次浏览)
    什么是跳转菜单跳转菜单是文档内的弹出菜单，对站点访问者可见，并列出链接到文档或文件的选项。可以创建到整个 Web 站点内文档的链接、到其它 Web
  • WordPress导航菜单添加二级菜单的方法 图文教程 (120941 次浏览)
    在我们的建站课程中，跟大家讲过wordprss实现导航是利用二句代码来自动调用。这样只要我们在后台添加一个分类或者页面时，会自动调用出来。

相关教程

其它教程