第八课WordPress主题制作引入bootstrap导航菜单和搜索框

文章目录[隐藏]

注册菜单
导入bootstrap菜单样式
前台菜单调用
自定义搜索框
前台菜单调用搜索框

在本课的WordPress主题制作教程中 引入了bootstrap自适应导航菜单，和自定义了bootstrap的搜索样式。

注册菜单

优酷土豆链接：优酷土豆视频高清观看

优酷全部教程播单：http://i.youku.com/i/UNTU3NDYyODg0/playlists

源码、和高清下载：百度云地址：http://pan.baidu.com/s/1b6zOKY

本课百度云盘下载 密码：进QQ群 521068947 到群文件下载对应的课程。

所有视频播放密码： 511yj.com

所有源码高清视频解压密码： www.511yj.com

本人QQ: 272586593

WordPress后台默认是没有菜单选项的，必须在functions.php注册一个菜单

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

	if(function_exists('register_nav_menus')){

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

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

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

导入bootstrap菜单样式

include_once('inc/wp_bootstrap_navwalker.php');

http://www.511yj.com/bootstrap-wordpress-menu.html

前台菜单调用

<?php
            wp_nav_menu( array(
                'menu'              	=> '顶部导航',
                'theme_location'        => 'top-menu',
                'depth'             	=> 2,
                'menu_class'       	=> 'nav navbar-nav',
                'fallback_cb'       	=> 'wp_bootstrap_navwalker::fallback',
                'walker'            	=> new wp_bootstrap_navwalker())
            );
        ?>

自定义搜索框

自定义搜索函数yj_search_form把我们的搜索样式挂在wordorss自带的搜索函数get_search_form()中

在functions.php加入代码

/*
 * 自定义搜索框
 */
 function yj_search_form( $form ) {
 
    $form = '<form class="navbar-form navbar-right" role="search" method="get" id="searchform" action="' . home_url( '/' ) . '" >
    <div class="input-group" 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" placeholder="search"/> 
 
    </div>
    </form>'; 
    return $form;
}
add_filter( 'get_search_form', 'yj_search_form' );

前台菜单调用搜索框

<?php get_search_form(); ?>

511遇见

不一样的遇见