首页 » 技术分享 » WordPress主题制作进阶#10自定义主页

WordPress主题制作进阶#10自定义主页

　
评论关闭　1,130次浏览

这节我们将创建一个自定义主页，然后将小工具添加到指定的位置。
新建一个文件并将其保存为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的宽度：

<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;
}

保存代码，刷新前端页面（如果样式没生效，到functions.php中找到对应的box，将block类名改为box即可生效。上一节最后给出的一段代码以做修正，可供参考）：

好看的样式

你可以看到我们有最新消息；我们可以点击那里并转到不同的帖子。 有相册和博客帖子，为了让这个看起来好一点，我会去我们放置side-widget li的地方并添加.box li：

.side-widget li,
.box li {
    list-style: none;
    line-height: 2.1em;
    border-bottom: 1px dotted #ccc;
}

这不是最好看的样式，但整个项目的重点不是设计或风格，而是为了让您熟悉创建WordPress主题的功能。 我们还剩最后一个部分课程，评论。

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

转载自原文链接, 如需删除请联系管理员。

原文链接：WordPress主题制作进阶#10自定义主页，转载请注明来源！

赞 0