构建一个Bootstrap WordPress主题#6 格式化帖子

1. 进入我们的index.php文件，找到下面这部分代码：

    

        

            IMAGE HERE
        
        

            

        
     

2. 在 row div 下方插入 if(has_post_thumbnail()) 检查是否有图片，再在这个 row div 的结束标签上方插入 和

    
    
IMAGE HERE
    

        

    
    
        
    

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

    

        IMAGE HERE
    

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

保存代码，刷新前端页面

显示图片

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

让我们将帖子包装在< article >标签中：

1. 在while循环中，我们将添加< article >，给它一个post类，并在我们row div的结束标签之后添加：

 
    

        
        。。。。。。
        。。。。。。
        
    

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 >标签，添加如下代码：

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

Posted At  on 
by 

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

元数据

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