如何在Wordpress中的文本中包裹缩略图图像？

Question

我知道我必须在Wordpress论坛中提问。 但我有点疯了stackoverflow，我先问这里。 我从头开始开发Wordpress主题。在我的博客文章中，我想将缩略图图像包裹在文本中。 我使用的代码是

<div class="row"> 

     <?php if(has_post_thumbnail()): ?> 
      <div class="col-xs-12 col-sm-4"> 
      <div class="thumbnail"><?php the_post_thumbnail('small'); ?></div> 
      </div> 
      <div class="col-xs-12 col-sm-8"> 
      <?php the_content(); ?> 
      </div> 

     <?php else: ?>  
      <div class="col-xs-12"> 
      <?php the_content(); ?> 
      </div> 

     <?php endif; ?> 
    </div> 

现在是内容和缩略图图像并排。 我喜欢将图像包裹在文本中。 图片是。

Answer 1

您正在将缩略图和内容封装在两个不同的列中，这就是它们并排显示的原因。将您的代码更改为：

<div class="row"> 

     <?php if(has_post_thumbnail()): ?> 
      <div class="col-xs-12 col-sm-12"> 
      <div class="thumbnail"><?php the_post_thumbnail('small'); ?></div> 
      <?php the_content(); ?> 
      </div> 

     <?php else: ?>  
      <div class="col-xs-12"> 
      <?php the_content(); ?> 
      </div> 

     <?php endif; ?> 
    </div> 

然后将缩略图div用css左右浮动。

.thumbnail { 
float:left; 
}