这节我们将创建一个自定义主页，然后将小工具添加到指定的位置。
新建一个文件并将其保存为front-page.php。 如果我们重新加载主页，它会完全空白，因为它正在查看front-page.php文件。 所以我将复制page.php中的内容并将其粘贴到front-page.php中。
刷新前端页面：
看起来不太好看，因为这个格式是用来显示帖子内容的。现在我们到网站后台外观 -> 菜单，将菜单里的首页移除，然后到页面新建一个Home页面（为了和之前的页面做区分，当然仍然可以叫首页）和一个Blog页面。
然后我们转到Settings内的阅读项：
在您的主页显示中，设置一个静态页面， 主页选择Home；对于文章页选择Blog，然后我们将保存它。 现在我们将进入外观 - > 菜单，将Home 和 Blog 勾选，添加到右侧菜单结果内，保存菜单。
回到前端页面，导航菜单多了Home和Blog，点击Blog会跳转到博客文章页；但是点击Home，就只会看到“homepage”，所以我们来处理这个问题。
现在我们想让首页看起来有点不同，我希望有一个Showcase小部件。 此外，我不需要侧边栏，并在下方有三个框和三个不同的小工具。 我们转到front-page.php并删除main类，在下面的代码块中突出显示，因为main类限制了div的宽度：
<div class="container content">
<div class="main block">
<?php while(have_posts()) : the_post(); ?>
然后删掉整个侧边栏部分代码：
<div class="side">
<?php if(is_active_sidebar('sidebar')) : ?>
<?php dynamic_sidebar('sidebar'); ?>
<?php endif; ?>
</div>
保存代码，刷新前端页面，会看到侧边栏不见了
我们先来做我们的Showcase小工具，看看它会去哪里; 在<div class =“container content”>下面。 我将从index.php中复制以下代码块，将其粘贴，然后将侧边栏中的ID更改为showcase
<?php if(is_active_sidebar('showcase')) : ?>
<?php dynamic_sidebar('showcase'); ?>
<?php endif; ?>
现在我们来制作三个盒子，我们将放在最后一个div元素的正上方。 所以把上面这段代码粘贴三次。 这个将是box1，box2和box3。保存代码
<?php if(is_active_sidebar('box1')) : ?>
<?php dynamic_sidebar('box1'); ?>
<?php endif; ?>
<?php if(is_active_sidebar('box2')) : ?>
<?php dynamic_sidebar('box2'); ?>
<?php endif; ?>
<?php if(is_active_sidebar('box2')) : ?>
<?php dynamic_sidebar('box2'); ?>
<?php endif; ?>
</div>
现在我们到网站后台，进入外观 -> 工具页：
我们将抓取Text并将其放在Showcase中，然后我们将在Content文本框中粘贴一些代码; 好吧，不是一些代码，而只是一些HTML。 点击保存。
在Box1中也放一个文本工具，然后在这里放一个标题，叫“Box1标题”。 然后我会在那里粘贴一些示例文本。为Box 2做同样的事情。对于Box 3 我们把近期文章小工具放入其中，并将该标题设置为“最新消息”。
转到前端，刷新页面。 现在我们有了小工具。
他看起来并不好看，我们来给它加一些样式：
.showcase {
background: #e0eefc;
padding: 40px;
margin-bottom: 30px;
text-align: center;
}
.showcase h1 {
text-align: center;
}
.box {
width: 32%;
float: left;
padding: 0 6px;
}
.box h3 {
text-align: center;
background: #009acd;
padding: 5px;
color: #fff;
}
保存代码，刷新前端页面：
你可以看到我们有最新消息；我们可以点击那里并转到不同的帖子。 有相册和博客帖子，为了让这个看起来好一点，我会去我们放置side-widget li的地方并添加.box li：
.side-widget li,
.box li {
list-style: none;
line-height: 2.1em;
border-bottom: 1px dotted #ccc;
}
这不是最好看的样式，但整个项目的重点不是设计或风格，而是为了让您熟悉创建WordPress主题的功能。 我们还剩最后一个部分课程，评论。
下一节课我们学习为帖子添加评论功能。
