从0到1制作WordPress主题#7添加样式和分解文件

添加样式

打开style.css 文件添加一些基本样式。整个项目的目的并不是要创建一些外观漂亮的主题，我只是希望您熟悉PHP代码以及如何设置主题。
1、在样式表中加入以下代码：

body{
    font-family: Arial;
    font-size:15px;
    color:#333;
    background:#f4f4f4;
    margin:0;
    padding:0;
    line-height: 1.7em;
} 
header{
    background: #393939;
    color:#fff;
    padding:20px 10px;
} 
header h1{
    color:#fff;
    margin:0;
    padding:0; 
    padding-bottom: 10px; 
}
.main{
    margin:15px 0;
}

保存并返回前端刷新页面，如下图所示：
header样式

你能看到顶部的空白区域; 这是因为我们以管理员身份登录，WordPress正在尝试显示管理栏，因为我们没有显示它的特殊功能，所以现在是一片空白区域。
2、打开index.php文件，在body 的结束标签前加入如下代码：

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

保存并返回刷新前端页面，如下图：
管理栏

3、在header标签代码中加入一个class=“container”的div，如下：

<header>
    <div class ="container">
        <h1><?php bloginfo('name'); ?></h1>
        <span><?php bloginfo('description'); ?></span>
    </div>
</header>

样式如下：

.container{
    width:1020px;
    margin:0 auto;
    overflow: auto;
}

在.main 和footer中加入同样的代码.container，保存代码返回前端刷新页面，你会看到所有东西都跑到中间位置。

4、接下来给footer 加点样式，让文字居中显示。

footer{
    background: #393939;
    color:#fff;
    padding:10px 10px;
    text-align: center;
}

分解文件

您可以看到我们有header和main区域，我们循环浏览帖子并显示它们，我们有footer区域。现在，WordPress中的常见做法是将header和footer分解为独立的文件，然后将它们包含在index.php中。

1、接下来我们在主题文件夹中创建两个新的文件：header.php 和footer.php。
2、让我们转到index.php文件并剪切以下代码部分，并粘贴到header.php中。

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
    <meta charset="<?php bloginfo('charset'); ?>">
    <title><?php bloginfo('name'); ?></title>
    <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>">
    <?php wp_head(); ?>
</head>
<body>
<header>
    <div class="container">
    <h1><?php bloginfo('name'); ?></h1>
    <span><?php bloginfo('description'); ?></span>
    </div>
</header>

3、在回到index.php,我们用php get_header替换上面剪切掉的代码：

<?php get_header(); ?>

4、将以下代码剪切，并粘贴到footer.php 文件中，并保存

<footer>
    <div class="container"> 
    <p>&copy; <?php the_date('Y'); ?>-<?php bloginfo('name'); ?></p>
    </div>
</footer>

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

5、在回到index.php,我们用php get_footer替换上面剪切掉的代码：

<?php get_footer(); ?>

返回浏览器前端刷新，看起来没有任何变化。

下一节我们将学习如何点击这些帖子将我们带到单独的帖子页面。