使后缩略图成为背景图像

Question

我的 Wordpress 网站显示所有帖子，这些帖子在 index.php 上使用行（引导 3）堆叠在跨越整个宽度的文章中。

index.php - HTML

<div>
<?php if ( have_posts() ) : ?>

        <?php /* Start the Loop */ ?>
        <?php while ( have_posts() ) : the_post(); ?>

            <?php
                get_template_part( 'content' );
            ?>

        <?php endwhile; ?>
        <div class="clearfix"></div>
        <div class="col-md-12">
        </div>
    <?php else : ?>

        <?php get_template_part( 'no-results', 'index' ); ?>

    <?php endif; ?>
</div> 

content.php 显示每篇文章中的帖子（彼此堆叠，全宽，页面下方）

<article id="post-<?php the_ID(); ?>" <?php post_class('container-fluid'); ?>>
<div class="row">
  <div class="col-md-12 horiz-cell">
    <h2><a href="<?php the_permalink(); ?>" rel="bookmark"><?php the_title(); ?></a></h2>
    <?php the_category(', '); ?>
  </div>    
</div>
</article><!-- /#post -->

我在每一行中都正确显示了标题和类别。我希望每个帖子的后缩略图（我在functions.php中添加了它的使用）作为每行的背景图像。填满整个空间（背景大小：封面）

基本上是大的，“100% 宽度”和“300 像素（大约）高度”的行，每行都有相应的标题、类别及其作为背景图像的后缩略图。

Answer 1

如果尚未完成，请启用缩略图和define custom image sizes:

// Enable thumbnails
add_theme_support( 'post-thumbnails' );
add_image_size('my-fun-size',580, 480, true);

要显示缩略图： 首先，获取帖子的特色图片 URL：

参数 'my-fun-size' 应该是您在 functions.php 文件中定义的图像大小的名称 - 它也可以是 'full' 或 '缩略图'

<?php
if (has_post_thumbnail()) {
    $thumbnail_data = wp_get_attachment_image_src( get_post_thumbnail_id( get_the_ID() ), 'my-fun-size' );
    $thumbnail_url = $thumbnail_data[0];
}
?>

然后添加图片作为背景：

<article id="post-<?php the_ID(); ?>" style="background-image:url('<?php echo $thumbnail_url ?>')" <?php post_class('container-fluid'); ?> >
<div class="row">
  <div class="col-md-12 horiz-cell">
    <h2><a href="<?php the_permalink(); ?>" rel="bookmark"><?php the_title(); ?></a></h2>
    <?php the_category(', '); ?>
  </div>    
</div>
</article><!-- /#post -->

最后，应用一些 CSS 来实现你想要的背景尺寸：

article {
  background-size: cover;
}

Answer 2

听起来您已经弄清楚了 CSS 部分，所以这里是您正在寻找的 PHP/HTML：

<article id="post-<?php the_ID(); ?>" <?php post_class('container-fluid'); ?>>

  <?php $imgurl = wp_get_attachment_src( get_post_thumbnail_id($post->ID) ); ?>

  <div class="row" style="background-image: url('<?php echo $imgurl[0]; ?>');">
    <div class="col-md-12 horiz-cell">
      <h2><a href="<?php the_permalink(); ?>" rel="bookmark"><?php the_title(); ?></a></h2>
      <?php the_category(', '); ?>
    </div>    
  </div>
</article><!-- /#post -->

参考资料：

• http://codex.wordpress.org/Function_Reference/get_post_thumbnail_id
• http://codex.wordpress.org/Function_Reference/wp_get_attachment_image_src