2017-04-23 23 views
0

投稿内容をすべて表示するセクションを作成しました。私の苦労は、ポストサムネイルを背景画像として設定することです。Wordpressで投稿画像を背景画像として設定するには

ここでセクションの構造:

<section id="testimonials"> 
    <div class="testimonials-container"> 
     <div class="heading-container"> 
      <h3 class="page-title">Testimonials</h3> 
     </div> 
     <div class="testimonials-box"> 
      <?php 
       $queryposts = array(   
        'post__in' => array(75,73), 
        'post_type' => 'post', 
        'posts_per_page' => -1, 
        'order' => 'ASC' 
       ); 
       $lastblog = new WP_Query($queryposts);    
       if($lastblog->have_posts()): 
        while($lastblog->have_posts()): $lastblog->the_post(); ?> 

        <div class="testimonial-wrapper"> 
         <div class="testimonial-item"> 
          <p class="test-content"><?php the_content(); ?></p> 
          <p class="test-title"><?php the_title(); ?></p> 
          <?php $thumb = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), 'full');?> 
          <div class"image-class" style="background-image: url('<?php echo $thumb['0'];?>')"></div> 
          </div> 
        </div> 
        <?php endwhile; 
       endif;    
       wp_reset_postdata(); 
      ?> 
     </div> 
    </div> 
</section> 

ここに私のCSS:

section#testimonials { 
    height: 400px; 
    background-image: url(images/testimonials-bg.jpg); 
    background-size: cover; 
    background-repeat: no-repeat; 
    text-align: center; 

} 

.testimonial-wrapper { 
    width: 100%; 
    max-width: 900px; 
    margin: 0 auto; 
} 

.image-class{ 
    display: block; 
    width: 125px; 
    height: 125px; 
    background-size: cover; 
    background-repeat: no-repeat; 
} 

私はページを表示しようとすると、画像が表示され、ページを検査する抱き合わせていない、それはこのことを示しています:

background-image: url((unknown)); 

私のdivボックスの背景イメージとしてどのようにサムネイルを設定できますか?

あなたは

答えて

3

、以下のコードを試してみてください、それはそれで動作します

<?php $thumb = get_the_post_thumbnail_url(); ?> 
<div class"image-class" style="background-image: url('<?php echo $thumb;?>')"></div> 
+0

感謝してください役立つことを願って。 –

関連する問題