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

注册菜单

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

  1. // 注册菜单
  2. 	if(function_exists('register_nav_menus')){    
  3.           register_nav_menus(  
  4.            array(  
  5.                  'header-menu' => __( 'top-menu' ),    
  6.                 )  
  7.             );  
  8.            }

导入bootstrap菜单样式

  1. 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(); ?>

发布日期:

所属分类: WordPress 主题 标签:   


没有相关文章!