wordpress菜单输出bootstrap菜单样式

萌月自用主题的导航菜单一直很简单,木有二级菜单也木有亮点。由于wordpress输出的菜单的格式和bootstrap的不同,小二苘又不会代码,所以渣渣导航菜单用到现在,最近折腾了一点终于学会了。

一、首先下载歪果仁开源的WordPress下生成Bootstrap导航条HTML代码文件:wp_bootstrap_navwalker.php ,放到主题根目录里,或者你自己自定义文件夹里,我是放在inc文件夹里。然后在主题的functions.php文件中添加以下代码:

// 导入bootstrap菜单样式
include_once('inc/wp_bootstrap_navwalker.php');

二、注册主题菜单,在主题的functions.php文件中添加以下代码:

register_nav_menus(
array(
'nav-menu' => __( '主导航' )
)
);

因为我的主题只用一个头部主导航,不想用太多的导航,就这么简单了解决了。

三、在header.php中输出菜单的位置添加代码:

<?php
wp_nav_menu( array(
'theme_location' => 'nav-menu',
'container' => '',
'menu_class' => 'nav navbar-nav',
'fallback_cb' => 'wp_bootstrap_navwalker::fallback',
'before' => '',
'after' => '',
'walker' => new wp_bootstrap_navwalker())
);
?>

四、最后我的导航条整体代码是:

<header class="navbar navbar-default" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<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="<?php echo get_option('home'); ?>/" title="<?php bloginfo('description'); ?>"><span class="glyphicon glyphicon-heart-empty"></span> <?php bloginfo('name'); ?></a>
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse navbar-right" id="bs-example-navbar-collapse-1">
<?php
wp_nav_menu( array(
'theme_location' => 'nav-menu',
'container' => '',
'menu_class' => 'nav navbar-nav',
'fallback_cb' => 'wp_bootstrap_navwalker::fallback',
'before' => '',
'after' => '',
'walker' => new wp_bootstrap_navwalker())
);
?>
<form class="navbar-form navbar-right" role="search" method="get" id="searchform" action="<?php bloginfo('home'); ?>">
<div class="form-group">
<input type="text" class="form-control" placeholder="搜索" name="s" id="s" >
</div>
</form>
</div>
</div>
</header>

 

本文共 6 个回复

  1. Era says:
    我匆匆的走来,, 主题也算比较简洁了。
  2. JV says:
    那个dropdown-menu的类,估计是在wp_bootstrap_navwalker.php 里面被定义了。 :idea:
      1. JV says:
        @小二苘 之前我自己也用bootstrap的菜单,只把需要的css和js抠出来了,下拉子菜单有个class是dropdown-menu,这个是必须的,wp菜单的子菜单class是sub-menu,必须改成dropdown-menu才能用。 :idea:

发表留言,喵!