用php做一个自定义的首页,WordPress主题制作进阶#10自定义主页

这节我们将创建一个自定义主页，然后将小工具添加到指定的位置。

新建一个文件并将其保存为front-page.php。 如果我们重新加载主页，它会完全空白，因为它正在查看front-page.php文件。 所以我将复制page.php中的内容并将其粘贴到front-page.php中。

刷新前端页面：

首页样式

看起来不太好看，因为这个格式是用来显示帖子内容的。现在我们到网站后台外观 -> 菜单，将菜单里的首页移除，然后到页面新建一个Home页面(为了和之前的页面做区分，当然仍然可以叫首页)和一个Blog页面。

新建home页

然后我们转到Settings内的阅读项：

设置首页

在您的主页显示中，设置一个静态页面， 主页选择Home；对于文章页选择Blog，然后我们将保存它。 现在我们将进入外观 - > 菜单，将Home 和 Blog 勾选，添加到右侧菜单结果内，保存菜单。

添加菜单

回到前端页面，导航菜单多了Home和Blog，点击Blog会跳转到博客文章页；但是点击Home，就只会看到“homepage”，所以我们来处理这个问题。

现在我们想让首页看起来有点不同，我希望有一个Showcase小部件。 此外，我不需要侧边栏，并在下方有三个框和三个不同的小工具。 我们转到front-page.php并删除main类，在下面的代码块中突出显示，因为main类限制了div的宽度：

然后删掉整个侧边栏部分代码：

保存代码，刷新前端页面，会看到侧边栏不见了

没有侧边栏

我们先来做我们的Showcase小工具，看看它会去哪里; 在

下面。 我将从index.php中复制以下代码块，将其粘贴，然后将侧边栏中的ID更改为showcase

现在我们来制作三个盒子，我们将放在最后一个div元素的正上方。 所以把上面这段代码粘贴三次。 这个将是box1，box2和box3。保存代码

现在我们到网站后台，进入外观 -> 工具页：

文本插件

我们将抓取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主题的功能。 我们还剩最后一个部分课程，评论。

下一节课我们学习为帖子添加评论功能。