目前为止我们只定义了一种格式的帖子, 我们还可以提供诸如图库,链接,图像和报价状态更新等内容,我们可以通过不同方式格式化这些不同类型的帖子。接下来我们来学习如何定制不同格式的帖子。
精简index文件代码
打开index.php,仔细观察主循环部分的每一行代码:
Read More
创建content.php
从article标签开始到 article结束标签的所有内容。 我们将其剪切并粘贴到一个新文件中,并将其保存为content.php。然后回到index文件,在之前的 article 代码块位置添加以下代码:
保存代码到前端刷新,页面没有变化。
精简archive和search.php代码
我们再来查看archive.php,你可以看到相同的内容,我们的想法就是把while循环中的所有内容放入content.php文件中,我们剪切以下代码:
梳理content.php文件逻辑关系
跳转到content.php中,现在这里需要的代码与我们常规查看博客文章内容的代码略有不同,所以我们可以使用if条件语句检查是否获得存档或搜索结果页面。代码如下:
这段代码的意思是:如果当前页是搜索结果页或者分类存档页,那么就调用下面这段从archive文件中剪切过来的代码,来显示相应的内容。
接下来,我们将获取article标签中的所有代码并将其粘贴到else部分中,content文件的全部代码如下所示:
//else部分代码
Read More
保存代码,跳到archive.php文件中,在刚才剪掉代码的位置也粘贴上这句代码:
同样在search.php文件中用上面这句代码替换while内部的所有代码。
精简single.php代码
我们也可以在single.php文件中实现content.php文件,因为single.php文件和index.php文件中有很多相同的东西。都有一个article标签;不同的地方是index中使用了the_excerpt()摘要,而single中用的是the_content;index中多了一个Read More。进入single文件,我们删除从article开始标签到结束article标签这段代码,然后在这个位置粘贴一个get _template_part(),然后保存。再进入content.php文件,添加一些条件,覆盖之前的老代码。
Read More
定制帖子格式
现在archive.php的while循环中只有一行代码:
同样的事也发生在search,single 和 index页,接下来我们开始定制帖子格式,先来添加一个图库类型。
首先,我们转到functions.php文件。 启用我们想要使用的这些不同格式。
在register_nav_menus()函数下方插入如下代码:
register_nav_menus(array(
'primary' => __('Primary Menu'),
'footer' => __('Footer Menu')
));
//Post Format Support
add_theme_support('post-formats', array('aside', 'gallery', 'link'));
现在我们到后台打开写文章选项,会看到在右边多了一个形式选项栏,如下图:
现在也看不出它能做什么不同的事情。 所以让我们做一些与众不同的事情。
新建一篇博客,标题叫做“普通日志”,分类:IT,形式:日志,然后粘贴一些内容,最后点发布。
现在回到前端刷新,发现我们多了一篇文章,它并没有什么特别的地方
但是这样做的目的是让它以不同的方式显示出来。
接下来我们转到index.php文件中,在get_template_part()中传入第二个参数 get_post_format(),代码如下:
这是一个函数,它将允许查看文章是什么类型的帖子格式。我们转到archive.php,search.php和single.php,把第二个参数插到所有get_template_part()中。
定制日志格式
接下来我们为每一种帖子格式都创建一个模板文件,先建一个content-aside.php,然后再创建content-gallery.php 和 content-link.php。
现在,通过这些不同的文件,我们可以使我们的格式看起来不同,从content-aside.php文件开始,在文件中添加以下代码:
@
保存代码到前端窗口刷新,我们看到文章样式变了
我们为日志格式添加一些样式,让它看起来更美观:
article.post-aside small {
font-weight: bold;
}
article.post-aside .well {
background: #e0eefc;
padding: 10px;
}
保存代码,到前端刷新页面:
定制链接格式
接下来定制content-link.php,找到文件打开添加以下代码:
接下来我们回到后台在写一篇文章,帖子格式设置为链接;标题:“WordPress课程同步更新”;内容只放一个链接,然后发布。然后回到首页刷新会看到一个链接到https://www.jianshu.com/u/199fee2e0fd9的超链接标题。
然后再给链接格式添加一点样式:
article.post-link .well {
background: #f4f4f4;
padding: 10px;
}
定制相册格式
最后来搞定相册格式,新建一个文件保存为 content-gallery.php,并添加以下代码:
再去后台创建一篇相册形式的帖子,名字:美图相册,分类:相册,我们在内容中插入几张图片然后点击发布,回到前端刷新:
再来为相册格式添加点样式:
article.post-gallery {
background: #333;
color: #fff;
padding: 5px 10px;
margin-top: 5px;
}
保存代码,去前端刷新页面:
格式化完成。