利用Bootstrap构建你的响应式Wordpress主题(二)

1、建立基本主题模板和安装主题
2、页头和页脚,加载引入我们主题必须的css,js文件
3、主题注册Bootstrap菜单、搜索框和导航
4、首页设计index.php
5、创建single.php页
6、创建sidebar.php页
7、创建comments.php页
8、创建archive.php页
现在在我们的主题目录下面新建一个文件夹bootstarp把bootstrap三个文件夹js,css,fonts剪切进去,新建文件夹images,js,现在的主题文件目录结构如下:

bootstrapwp

打开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.     <?php wp_head(); ?>
  7.     <link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/bootstrap/css/bootstrap.css">
  8.     <link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/style.css">
  9.     <script src="<?php echo get_template_directory_uri(); ?>/bootstrap/js/bootstrap.js"></script>
  10.     <script src="<?php echo get_template_directory_uri(); ?>/js/bootstrapwp.js"></script>
  11.   </head>

php language_attributes();动态生成语言代码;
bloginfo( 'charset' );获得网站的字符集;
php wp_head();钩子函数,很多插件把自己的函数挂到这个函数上面,去加载需要的样式表和脚本文件,它允许插件开发者向你的站点动态地添加CSS和 javascript ,如果我们不在模板中引入这个,一个插件将不能工作;
get_template_directory_uri(); 获得主题文件的位置,echo get_template_directory_uri(); 输出位置,正确加载 bootstrap.cssstyle.css;
bootstrapwp.js是我们的主题自己使用的js文件
wp_title(); 不同的页面动态的生成文章标题,但是我们想根据不同的页面去获得不同的标题效果,所以我们需要在functions.php文件中自定义一个函数挂到 wp_title(); 函数中,首先在我们的主题根目录下建立 functions.php 文件,复制以下代码:

  1. /*
  2.  * 网站的页面标题,来自 Twenty Twelve 1.0
  3.  */
  4.  
  5. function bootstrapwp_wp_title( $title, $sep ) {
  6. 	global $paged, $page;
  7.  
  8. 	if ( is_feed() )
  9. 		return $title;
  10.  
  11. 	// 添加网站名称
  12. 	$title .= get_bloginfo( 'name' );
  13.  
  14. 	// 为首页添加网站描述
  15. 	$site_description = get_bloginfo( 'description', 'display' );
  16. 	if ( $site_description && ( is_home() || is_front_page() ) )
  17. 		$title = "$title $sep $site_description";
  18.  
  19. 	// 在页面标题中添加页码
  20. 	if ( $paged >= 2 || $page >= 2 )
  21. 		$title = "$title $sep " . sprintf( __( 'Page %s', 'bootstrapwp' ), max( $paged, $page ) );
  22.  
  23. 	return $title;
  24. }
  25. add_filter( 'wp_title', 'bootstrapwp_wp_title', 10, 2 );

有关title的优化,建议您阅读 《wordpress网站标题动态优化的几种形式》 http://www.511yj.com/wordpress-title-youhua.html
为了简化我们的头部文件header.php,css链接我们也可以修改如下:

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

然后在style.css文件中,添加如下代码:

  1. @import url('bootstrap/css/bootstrap.css'); 
  2. body { 
  3.      padding-top: 60px; 
  4.      padding-bottom: 40px; 
  5. }

在此完成的部分中使用了一个特殊的WordPress标签,不管在我们网站的哪个页面它都能自动把 bootstrap 的CSS链到我们的主题,你会看到这个代码bloginfo()函数将以不同的方式在本教程中使用。然后我们使用 @import 标签从我们的主style.css文件中引入Bootstrap的CSS文件。
现在的header.php是这样子的

  1.     <!DOCTYPE html>
  2.  
  3.     <html <?php language_attributes(); ?>>
  4.  
  5.       <head>
  6.  
  7.         <meta charset="<?php bloginfo( 'charset' ); ?>">
  8.  
  9.         <title><?php wp_title( '&hearts;', true, 'right' ); ?></title>
  10.  
  11.      <link href="<?php bloginfo('stylesheet_url');?>" rel="stylesheet">
  12.     <?php wp_enqueue_script("jquery"); ?>
  13.     <?php wp_head(); ?>
  14.        </head>

接下来我们添加 wp_footer() 标签,它和wp_head()拥有同样的功能。我们闭合body标签前把这些放好。我们也要改变我们加载JavaScript文件的方法,将它们移至header.php文件,所以更新你的footer.php变成这样:

  1.  <!-- Footer -->
  2.     <div class="container">
  3. 	<hr>
  4. 	<footer>
  5.         <p>版权所有 &copy;  Company 2016  <?php bloginfo('name'); ?></p>
  6.       </footer>
  7.     </div> <!-- /container -->
  8.  
  9.  
  10.     <!-- Bootstrap core JavaScript
  11.     ================================================== -->
  12.     <!-- Placed at the end of the document so the pages load faster -->
  13.     <script src="js/jquery.min.js"></script>
  14.     <script src="./bootstrap/js/bootstrap.min.js"></script>
  15.     <?php wp_footer(); ?>  
  16.   </body>
  17. </html>

现在我们可以回来通过WordPress推荐的加载JavaScript的方式添加JavaScript,这个方法包括使用 wp_enqueue_script() 函数。

首先,我们在wp_head()前面使用这个函数来加载 jquery ,接下来在你的header.php文件中放置下面代码:

  1. <?php wp_enqueue_script("jquery"); ?>
  2. <?php wp_head(); ?>

下面我们将用wp_head()方法加载JavaScript,请记住,wp_head()方法是插件和主题中经常用来向header.php文件中添加CSS和JavaScript的。

我们要在functions.php加载我们的JavaScript,这可能看起来像用很多多余的步骤去加载一个JavaScript 文件,但由于你的主题会变得越来越复杂,这将有助于一切保持清洁和有组织。

开functions.php文件,粘贴下面的代码:

  1. <?php 
  2. /*
  3.  * 自定义函数加载js文件
  4.  */
  5. function bootstrapwp_scripts_with_jquery()
  6. {
  7.   // Register the script like this for a theme:
  8.   wp_register_script( 'custom-script', get_template_directory_uri() . '/bootstrap/js/bootstrap.js', array( 'jquery' ) );
  9.   // For either a plugin or a theme, you can then enqueue the script:
  10.   wp_enqueue_script( 'custom-script' );
  11. }
  12. add_action( 'wp_enqueue_scripts', 'bootstrapwp_scripts_with_jquery' );
  13. ?>

发布日期:

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