目前为止我们只定义了一种格式的帖子, 我们还可以提供诸如图库,链接,图像和报价状态更新等内容,我们可以通过不同方式格式化这些不同类型的帖子。接下来我们来学习如何定制不同格式的帖子。
精简index文件代码
打开index.php,仔细观察主循环部分的每一行代码:
<?php while(have_posts()) : the_post(); ?>
<article class="post">
<h2><?php the_title(); ?></h2>
<p class="meta">
发布于 <?php the_time('F j, Y g:i a'); ?> by
<a href="<?php echo get_author_posts_url( get_the_author_meta('ID')); ?>">
<?php the_author(); ?>
</a> | 类别:
<?php
$categories = get_the_category();
$separator = ", "; $output = '';
if($categories){
foreach($categories as $category){
$output .= '<a href="'.get_category_link($category->term_id).'">'. $category->cat_name.'</a>'.$separator;
}
}
echo trim($output, $separator);
?>
</p>
<?php if(has_post_thumbnail()) : ?>
<div class="post-thumbnail">
<?php the_post_thumbnail(); ?>
</div>
<?php endif; ?>
<?php the_excerpt(); ?>
<a class="button" href="<?php the_permalink(); ?>"> Read More</a>
</article>
<?php endwhile; ?>
创建content.php
从article标签开始到 article结束标签的所有内容。 我们将其剪切并粘贴到一个新文件中,并将其保存为content.php。然后回到index文件,在之前的 article 代码块位置添加以下代码:
<?php get_template_part('content'); ?>
保存代码到前端刷新,页面没有变化。
精简archive和search.php代码
我们再来查看archive.php,你可以看到相同的内容,我们的想法就是把while循环中的所有内容放入content.php文件中,我们剪切以下代码:
<div class="archive-post">
<h4>
<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
</h4>
<p>Posted On: <?php the_time('F j, Y g:i a'); ?></p>
</div>
梳理content.php文件逻辑关系
跳转到content.php中,现在这里需要的代码与我们常规查看博客文章内容的代码略有不同,所以我们可以使用if条件语句检查是否获得存档或搜索结果页面。代码如下:
<?php if(is_search() || is_archive()) : ?>
<div class="archive-post">
<h4>
<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
</h4>
<p>Posted On: <?php the_time('F j, Y g:i a'); ?></p>
</div>
<?php else : ?>
<?php endif; ?>
这段代码的意思是:如果当前页是搜索结果页或者分类存档页,那么就调用下面这段从archive文件中剪切过来的代码,来显示相应的内容。
接下来,我们将获取article标签中的所有代码并将其粘贴到else部分中,content文件的全部代码如下所示:
<?php if(is_search() || is_archive()) : ?>
<div class="archive-post">
<h4>
<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
</h4>
<p>Posted On: <?php the_time('F j, Y g:i a'); ?></p>
</div>
<?php else : ?>
//else部分代码
<article class="post">
<h2><?php the_title(); ?></h2>
<p class="meta">
发布于 <?php the_time('F j, Y g:i a'); ?> by <a href="<?php echo get_author_posts_url( get_the_author_meta('ID')); ?>"><?php the_author(); ?>
</a> | 类别:
<?php
$categories = get_the_category();
$separator = ", "; $output = '';
if($categories){
foreach($categories as $category){
$output .= '<a href="'.get_category_link($category->term_id).'">'. $category->cat_name.'</a>'.$separator;
}
}
echo trim($output, $separator);
?>
</p>
<?php if(has_post_thumbnail()) : ?>
<div class="post-thumbnail">
<?php the_post_thumbnail(); ?>
</div>
<?php endif; ?>
<?php the_excerpt(); ?>
<a class="button" href="<?php the_permalink(); ?>"> Read More</a>
</article>
<?php endif; ?>
保存代码,跳到archive.php文件中,在刚才剪掉代码的位置也粘贴上这句代码:
<?php get_template_part('content'); ?>
同样在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文件,添加一些条件,覆盖之前的老代码。
<?php if(is_single()) : ?>
<?php the_content(); ?>
<?php else : ?>
<?php the_excerpt(); ?>
<a class="button" href="<?php the_permalink(); ?>">Read More</a>
<?php endif; ?>
定制帖子格式
现在archive.php的while循环中只有一行代码:
<?php get_template_part('content'); ?>
同样的事也发生在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(),代码如下:
<?php get_template_part('content', 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 class="post post-aside">
<div class="well">
<small>
<?php the_author(); ?>@<?php the_date(); ?>
</small>
<?php the_content(); ?>
</div>
</article>
保存代码到前端窗口刷新,我们看到文章样式变了
我们为日志格式添加一些样式,让它看起来更美观:
article.post-aside small {
font-weight: bold;
}
article.post-aside .well {
background: #e0eefc;
padding: 10px;
}
保存代码,到前端刷新页面:
定制链接格式
接下来定制content-link.php,找到文件打开添加以下代码:
<article class="post post-link">
<div class="well">
<a href="<?php echo get_the_content(); ?>">
<?php echo the_title(); ?>
</a>
</div>
</article>
接下来我们回到后台在写一篇文章,帖子格式设置为链接;标题:“WordPress课程简书同步更新”;内容只放一个链接,然后发布。然后回到首页刷新会看到一个链接到https://www.jianshu.com/u/199fee2e0fd9的超链接标题。
然后再给链接格式添加一点样式:
article.post-link .well {
background: #f4f4f4;
padding: 10px;
}
定制相册格式
最后来搞定相册格式,新建一个文件保存为 content-gallery.php,并添加以下代码:
<article class="post post-gallery">
<h2><?php the_title(); ?></h2>
<?php the_content(); ?>
</article>
再去后台创建一篇相册形式的帖子,名字:美图相册,分类:相册,我们在内容中插入几张图片然后点击发布,回到前端刷新:
再来为相册格式添加点样式:
article.post-gallery {
background: #333;
color: #fff;
padding: 5px 10px;
margin-top: 5px;
}
保存代码,去前端刷新页面:
格式化完成。