WordPress集成Bootstrap导航条

作为一名WEB开发者,想必应该知道Bootstrap大名吧,强大的删格布局已经风靡全球,正如你所见本站正是Wordpress与Bootstrap的结合体,导航条并没有多余写什么CSS样式,纯Bootstrap风格,That is Cool!下面就来介绍如何将Bootstrap导航条组件集成到Wordpress主题中,主要步骤为:1.注册导航菜单register_nav_menus;2.创建菜单辅助对象walker;3.模板调用菜单wp_nav_menu。(本文读者建立在会使用bootstrap导航条的基础上)

注册导航菜单

打开functions.php,使用register_nav_menus()函数来注册菜单:

 

register_nav_menus(array(
    'primary' => __('主菜单', 'idleblog'),
//    'footer' => __('页脚菜单', 'idleblog'),
));

其中键值”primary”表示该菜单的唯一标识,可以创建多个导航菜单,如”footer”等。

创建Walker对象

Walker对象是Wordpress用来扩展自身功能的一个辅助机制,让开发者在不修改程序源代码的基础上扩展自己需要的功能,比如我们要对导航菜单Nav_Menu进行扩展,则只需要创建一个继承Walker_Nav_Menu类库(该类继承的Walker基类)的对象即可。

国外已经有先驱写好Walker了,我们直接拿来用即可,鉴于大陆网民可能很难访问原网站,博主已经打包放在code上了,如果你使用的Bootstrap2则下载后面即可,传送门:bootstrap3bootstrap2

我们最好将该类库放在主题独立的文件中比如”inc/wp_bootstrap_navwalker.php”,然后在functions.php中引入:

if (!class_exists('Wp_Bootstrap_Navwalker')) {
    require get_template_directory() . '/inc/wp_bootstrap_navwalker.php';
}

模板中调用导航菜单

我们知道Wordpress有个直接调用导航条的函数wp_nav_menu($args=array()),我们要自己定义一个类似功能的函数吗?No,我们仍然利用WP原生的导航条函数,下面简单介绍我们本教程需要用到的几个参数。

  • theme_location:主题functions.php中注册菜单的位置标识;
  • depth:菜单的深度,比如”2″表示只显示二级菜单;
  • container:包含菜单的容器,默认为”div”,我们可以设置为false表示不需要外容器;
  • menu_class:菜单项ul的样式
  • fallback_cb:如果后台未创建菜单时候的回调函数;
  • walker:自定义的辅助函数;

知道各参数的意义了,下面我们直接在合适的地方调用函数即可。

wp_nav_menu(array(
    'theme_location' => 'primary',
    'depth' => 2,
    'container' => FALSE,
    'menu_class' => 'nav navbar-nav',
    'fallback_cb' => 'Wp_Bootstrap_Navwalker::fallback',
    'walker' => new Wp_Bootstrap_Navwalker()
));

 

之后,只需要后台为“主菜单”位置新建菜单即可。