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

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

.thumbnail {
 float:left;
}