【问题标题】:How to set a post featured image as background image in Wordpress如何在 Wordpress 中将帖子特色图片设置为背景图片
【发布时间】:2021-12-29 16:04:51
【问题描述】:

我创建了一个展示我所有帖子内容的部分。我现在的困难是将帖子缩略图设置为背景图片。

这里是节的结构:

<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 框的背景图片?

希望你能帮忙

【问题讨论】:

    标签: php html css wordpress


    【解决方案1】:

    请尝试以下代码,

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

    【讨论】:

      【解决方案2】:
        <div class="card-body"
          <?php if(has_post_thumbnail()): ?>
            style="background-image: url('<?php the_post_thumbnail_url();?>');"
          <?php endif;?>
        >
      

      这是一个简单的代码,可避免黑客入侵您的网站!尽可能停止在您的 WordPress 开发中使用“echo”。

      【讨论】:

      • OP 提出的问题与您的回答不同
      • 请在您的答案中添加一些解释,以便其他人可以从中学习 - 这里避免了“黑客攻击”的哪些部分?
      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2015-09-28
      • 2018-04-03
      • 2012-09-03
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多