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

Question

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

    <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;
}

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

How to wrap thumbnail image inside text in Wordpress?

css

wordpress

wordpress-theming