利用Bootstrap构建你的响应式Wordpress主题（二）

页头和页脚是主题的重要文件，今天主要学习php wp_head();wp_enqueue_script();wp_footer()；函数来构建我们的页头和页脚，加载引入我们主题必须的css，js文件。

《利用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,现在的主题文件目录结构如下：

四、header.php页头部分

打开header.php,把以下代码复制进去

```
<!DOCTYPE html>
```
```
<html <?php language_attributes(); ?>>
```
```
  <head>
```

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

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

```
    <?php wp_head(); ?>
```

    <link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/bootstrap/css/bootstrap.css">

    <link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/style.css">

    <script src="<?php echo get_template_directory_uri(); ?>/bootstrap/js/bootstrap.js"></script>

    <script src="<?php echo get_template_directory_uri(); ?>/js/bootstrapwp.js"></script>

```
  </head>
```

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

```
/*
```

 * 网站的页面标题，来自 Twenty Twelve 1.0

```
 */
```
```
 
```

function bootstrapwp_wp_title( $title, $sep ) {

```
	global $paged, $page;
```
```
 
```
```
	if ( is_feed() )
```
```
		return $title;
```
```
 
```
```
	// 添加网站名称
```
```
	$title .= get_bloginfo( 'name' );
```
```
 
```
```
	// 为首页添加网站描述
```

	$site_description = get_bloginfo( 'description', 'display' );

	if ( $site_description && ( is_home() || is_front_page() ) )

		$title = "$title $sep $site_description";

```
 
```
```
	// 在页面标题中添加页码
```
```
	if ( $paged >= 2 || $page >= 2 )
```

		$title = "$title $sep " . sprintf( __( 'Page %s', 'bootstrapwp' ), max( $paged, $page ) );

```
 
```
```
	return $title;
```
```
}
```

add_filter( 'wp_title', 'bootstrapwp_wp_title', 10, 2 );

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

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

然后在style.css文件中，添加如下代码：

@import url('bootstrap/css/bootstrap.css');

```
body { 
```
```
     padding-top: 60px; 
```
```
     padding-bottom: 40px; 
```
```
}
```

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

五、footer.php页脚部分

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

```
 
```
```
    <div class="container">
```
```
	<hr>
```
```
	<footer>
```

        <p>版权所有 &copy;  Company 2016  <?php bloginfo('name'); ?></p>

```
      </footer>
```
```
    </div> 
```
```
 
```
```
 
```
```
    <!-- Bootstrap core JavaScript
```

    ================================================== -->

    <!-- Placed at the end of the document so the pages load faster -->

    <script src="js/jquery.min.js"></script>

    <script src="./bootstrap/js/bootstrap.min.js"></script>

```
    <?php wp_footer(); ?>  
```
```
  </body>
```
```
</html>
```

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

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

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

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

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

开functions.php文件，粘贴下面的代码：

```
<?php 
```
```
/*
```
```
 * 自定义函数加载js文件
```
```
 */
```

function bootstrapwp_scripts_with_jquery()

```
{
```

  // Register the script like this for a theme:

  wp_register_script( 'custom-script', get_template_directory_uri() . '/bootstrap/js/bootstrap.js', array( 'jquery' ) );

  // For either a plugin or a theme, you can then enqueue the script:

```
  wp_enqueue_script( 'custom-script' );
```
```
}
```

add_action( 'wp_enqueue_scripts', 'bootstrapwp_scripts_with_jquery' );

```
?>
```

511遇见

不一样的遇见

利用Bootstrap构建你的响应式Wordpress主题（二）

您可能感兴趣的文章:

相关文章: