如何在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; 
}