添加樣式
打開style.css 文件添加一些基本樣式称诗。整個(gè)項(xiàng)目的目的并不是要?jiǎng)?chuàng)建一些外觀漂亮的主題痹愚，我只是希望您熟悉PHP代碼以及如何設(shè)置主題仅仆。
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;
}
保存并返回前端刷新頁面谨垃，如下圖所示：
你能看到頂部的空白區(qū)域; 這是因?yàn)槲覀円怨芾韱T身份登錄启搂，WordPress正在嘗試顯示管理欄硼控，因?yàn)槲覀儧]有顯示它的特殊功能，所以現(xiàn)在是一片空白區(qū)域胳赌。
2牢撼、打開index.php文件，在body 的結(jié)束標(biāo)簽前加入如下代碼：
<?php wp_footer(); ?>
</body>
</html>
保存并返回刷新前端頁面疑苫，如下圖：
3熏版、在header標(biāo)簽代碼中加入一個(gè)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捍掺，保存代碼返回前端刷新頁面撼短，你會(huì)看到所有東西都跑到中間位置。
4挺勿、接下來給footer 加點(diǎn)樣式曲横，讓文字居中顯示。
footer{
background: #393939;
color:#fff;
padding:10px 10px;
text-align: center;
}
分解文件
您可以看到我們有header和main區(qū)域满钟，我們循環(huán)瀏覽帖子并顯示它們胜榔，我們有footer區(qū)域「炫纾現(xiàn)在湃番，WordPress中的常見做法是將header和footer分解為獨(dú)立的文件，然后將它們包含在index.php中吭露。
1吠撮、接下來我們?cè)谥黝}文件夾中創(chuàng)建兩個(gè)新的文件：header.php 和footer.php。
2讲竿、讓我們轉(zhuǎn)到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>© <?php the_date('Y'); ?>-<?php bloginfo('name'); ?></p>
</div>
</footer>
<?php wp_footer(); ?>
</body>
</html>
5削彬、在回到index.php,我們用php get_footer替換上面剪切掉的代碼：
<?php get_footer(); ?>
返回瀏覽器前端刷新，看起來沒有任何變化秀仲。
下一節(jié)我們將學(xué)習(xí)如何點(diǎn)擊這些帖子將我們帶到單獨(dú)的帖子頁面融痛。
