利用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菜单位置,其他以后备用。

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

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

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

  1. /*
  2.  * 自定义搜索框
  3.  */
  4.  function bootstrapwp_search_form( $form ) {
  5.  
  6.     $form = '<form role="search" method="get" id="searchform" action="' . home_url( '/' ) . '" >
  7.     <div class="input-group pull-right" id="search"><label class="hide screen-reader-text" for="s">' . __('Search for:') . '</label>
  8.     <input class="form-control " type="text" value="' . get_search_query() . '" name="s" id="s" /> 
  9. 	<span class="input-group-btn">
  10. 	<input class="btn btn-default" type="submit" id="searchsubmit" value="'. esc_attr__('Search') .'" />
  11.      </span>
  12.     </div>
  13.     </form>';
  14.  
  15.     return $form;
  16. }
  17. add_filter( 'get_search_form', 'bootstrapwp_search_form' );
  18. ?>

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

  1. <?php
  2. wp_nav_menu( array(
  3. 'theme_location' => 'header-menu',
  4. 'container' => '',
  5. 'menu_class' => 'nav navbar-nav',
  6. 'fallback_cb' => 'wp_bootstrap_navwalker::fallback',
  7. 'before' => '',
  8. 'after' => '',
  9. 'walker' => new wp_bootstrap_navwalker())
  10. );
  11. ?>

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

  1.  <!DOCTYPE html>
  2.     <html <?php language_attributes(); ?>>
  3.       <head>
  4.         <meta charset="<?php bloginfo( 'charset' ); ?>">
  5.         <title><?php wp_title( '&hearts;', true, 'right' ); ?></title>
  6.      <link href="<?php bloginfo('stylesheet_url');?>" rel="stylesheet">
  7.     <?php wp_enqueue_script("jquery"); ?>
  8.     <?php wp_head(); ?>
  9.        </head>
  10.   <body>
  11.  
  12.  <header>
  13.       <div class="container">
  14.         <div class="row">
  15.           <div class="col-md-8">
  16.             <a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php esc_attr_e( '返回首页', 'bootstrapwp' ); ?>">
  17.               <img id="logo" src="<?php echo get_template_directory_uri(); ?>/images/logo.png" alt="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>">
  18.             </a>
  19.           </div>
  20.           <div class="col-md-4">
  21.             <?php get_search_form(); ?> 
  22.           </div>
  23.         </div>
  24.         </div>
  25.   </header>
  26.   <nav>
  27.   <div class="container">
  28. 	<ul class="nav nav-pills">
  29. 	<?php
  30. 			wp_nav_menu( array(
  31. 			'theme_location' => 'header-menu',
  32. 			'container' => '',
  33. 			'menu_class' => 'nav navbar-nav',
  34. 			'fallback_cb' => 'wp_bootstrap_navwalker::fallback',
  35. 			'before' => '',
  36. 			'after' => '',
  37. 			'walker' => new wp_bootstrap_navwalker())
  38. 			);
  39. 			?>
  40. 	</ul>
  41. 	</div>
  42. 	</nav>

5、目前网页效果预览:

Bootstrap


发布日期:

所属分类: BootStrap, WordPress 主题 标签: