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