1. 进入我们的index.php文件,找到下面这部分代码:
<?php while(have_posts()) : the_post(); ?>
<div class="row">
<div class="col-md-3">IMAGE HERE</div>
<div class="col-md-9">
<h2><?php echo the_title(); ?></h2>
</div>
</div>
<?php endwhile; ?>

2. 在 row div 下方插入 if(has_post_thumbnail()) 检查是否有图片,再在这个 row div 的结束标签上方插入 <?php else : ?> 和 <?php endif; ?>

<div class="row">
<?php if(has_post_thumbnail()): ?>
<div class="col-md-3">IMAGE HERE</div>
<div class="col-md-9">
<h2><?php echo the_title(); ?></h2>
</div>
<?php else : ?>
<?php endif; ?>
</div>

3. 如果有缩略图,那么它将显示三列和九列,但如果没有缩略图,那么我们希望它是一个完整的十二列。 为此,我们修改代码,在 else 部分加入以下代码:

<?php else: ?>
<div class="col-md-12">IMAGE HERE</div>
<?php endif; ?>

4. 我们先从包含缩略图的帖子开始。 我们将摆脱文字Image Here。 然后创建一组 post-thumbnail 类的 div,然后在div内使用the_post_thumbnail():

<div class="col-md-3">
<div class="post-thumbnail">
<?php the_post_thumbnail(); ?>
</div>

保存代码,刷新前端页面

图片显示了,但图片尺寸太大了,没关系显示图片的功能实现了,尺寸再慢慢调。

  1. 让我们将帖子包装在< article >标签中:
    在while循环中,我们将添加< article >,给它一个post类,并在我们row div的结束标签之后添加</ article>:
<article class="post">
<div class="row">
<?php if(has_post_thumbnail()): ?>。。。。。。。。。。。。<?php endif; ?>
</div>
</article>

2. 打开 style.css 文件,添加article.post img,设置宽度100%,高度 auto,margin-top:30px

article.post img{
width:100%;
height:auto;
margin-top:30px;
}

刷新页面

 

3. 回到index.php文件,我们把标题做成一个链接。 我们直接进入< h2 >标签,添加如下代码:

<h2><a href="<?php echo the_permalink(); ?>"><?php echo the_title(); ?></a></h2>

4. 在< /h2>结束标签下,我们将放置元数据。 我们将它添加到一个段落中并给它一个meta 类

<p class="meta">Posted At <?php the_time(); ?> on <?php the_date(); ?>by <strong>
<?php the_author(); ?></strong>
</p>

刷新前端页面,看到元数据出现了

你可以看到时间,日期以及作者。 此外,文章标题变成一个链接,所以如果我点击它,它会把我们带到那个页面或那个帖子。

 

 

发表评论

电子邮件地址不会被公开。 必填项已用*标注