利用Bootstrap构建你的响应式WordPress主题（三）

今天我们一起来学习头部Logo,搜索框和导航的添加，首先我们的主题默认在外观下的菜单里是没有菜单选项的，我们要完成注册菜单，其次我们要把wordpress搜索换成我们的bootstrap样式，最后把我们的导航注册到我们想要的位置和样式。

《利用Bootstrap构建你的响应式WordPress主题》目录导航

1、建立基本主题模板和安装主题
2、页头和页脚，加载引入我们主题必须的css，js文件
3、主题注册Bootstrap菜单、搜索框和导航
4、首页设计index.php
5、创建single.php页
6、创建sidebar.php页
7、创建comments.php页
8、创建archive.php页

六、注册菜单搜索和导航

1、在functions.php中复制以下代码，这样在后头外观-里就有菜单选项了，我们注册了三个导航的位置，这里我们只使用第一个top-menu菜单位置，其他以后备用。

```
// 注册菜单
```

	if(function_exists('register_nav_menus')){

```
          register_nav_menus(  
```
```
           array(  
```

                 'header-menu' => __( 'top-menu' ),

                 'footer-menu' => __( 'footer-menu' ),

                 'sider-menu' => __('sider-menu')

```
                )  
```
```
            );  
```
```
           }
```

在wordpress后台-文章-分类目录-下建立好你的网站导航目录，然后在外观-菜单-下创建一个新的菜单-主题位置选定top-menu

2、在functions.php中复制以下代码，通过自定义搜索函数bootstrapwp_search_form把我们的搜索样式挂在wordorss自带的搜索函数get_search_form()中

```
/*
```
```
 * 自定义搜索框
```
```
 */
```

 function bootstrapwp_search_form( $form ) {

```
 
```

    $form = '<form role="search" method="get" id="searchform" action="' . home_url( '/' ) . '" >

    <div class="input-group pull-right" id="search"><label class="hide screen-reader-text" for="s">' . __('Search for:') . '</label>

    <input class="form-control " type="text" value="' . get_search_query() . '" name="s" id="s" />

```
	<span class="input-group-btn">
```

	<input class="btn btn-default" type="submit" id="searchsubmit" value="'. esc_attr__('Search') .'" />

```
     </span>
```
```
    </div>
```
```
    </form>';
```
```
 
```
```
    return $form;
```
```
}
```

add_filter( 'get_search_form', 'bootstrapwp_search_form' );

```
?>
```

3、我们用wordpress自带wp_nav_menu()函数显示我们在后头定制的菜单
您必须先阅读《用Bootstrap菜单样式替换你的WordPress菜单》，才能完成这一步。
在header.php中输出菜单的位置添加代码：

```
<?php
```
```
wp_nav_menu( array(
```
```
'theme_location' => 'header-menu',
```
```
'container' => '',
```
```
'menu_class' => 'nav navbar-nav',
```

'fallback_cb' => 'wp_bootstrap_navwalker::fallback',

```
'before' => '',
```
```
'after' => '',
```

'walker' => new wp_bootstrap_navwalker())

```
);
```
```
?>
```

4、目前header.php文件如下：

```
 <!DOCTYPE html>
```

    <html <?php language_attributes(); ?>>

```
      <head>
```

        <meta charset="<?php bloginfo( 'charset' ); ?>">

        <title><?php wp_title( '&hearts;', true, 'right' ); ?></title>

     <link href="<?php bloginfo('stylesheet_url');?>" rel="stylesheet">

    <?php wp_enqueue_script("jquery"); ?>

```
    <?php wp_head(); ?>
```
```
       </head>
```
```
  <body>
```
```
 
```
```
 <header>
```
```
      <div class="container">
```
```
        <div class="row">
```
```
          <div class="col-md-8">
```

            <a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php esc_attr_e( '返回首页', 'bootstrapwp' ); ?>">

              <img id="logo" src="<?php echo get_template_directory_uri(); ?>/images/logo.png" alt="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>">

```
            </a>
```
```
          </div>
```
```
          <div class="col-md-4">
```

            <?php get_search_form(); ?>

```
          </div>
```
```
        </div>
```
```
        </div>
```
```
  </header>
```
```
  <nav>
```
```
  <div class="container">
```
```
	<ul class="nav nav-pills">
```
```
	<?php
```
```
			wp_nav_menu( array(
```
```
			'theme_location' => 'header-menu',
```
```
			'container' => '',
```
```
			'menu_class' => 'nav navbar-nav',
```

			'fallback_cb' => 'wp_bootstrap_navwalker::fallback',

```
			'before' => '',
```
```
			'after' => '',
```

			'walker' => new wp_bootstrap_navwalker())

```
			);
```
```
			?>
```
```
	</ul>
```
```
	</div>
```
```
	</nav>
```

5、目前网页效果预览：

511遇见

不一样的遇见

利用Bootstrap构建你的响应式WordPress主题（三）

您可能感兴趣的文章:

相关文章: