将帖子缩略图设置为背景

时间：2016-03-25 作者：moeses

我的产品只有一个页面，其中列出了所有产品。我就是这样做的：

<ul class="produkte">
    <?php $args = array( \'post_type\' => \'produkte\', \'posts_per_page\' => 30 );

    $loop = new WP_Query( $args );
    while ( $loop->have_posts() ) : $loop->the_post();
        echo \'<li class="produkt">\';
        echo \'<a href="\' . get_permalink() . \'">\';
        echo \'<div class="produkt-info">\';
        the_title(\'<h3>\', \'</h3>\');
        if (has_post_thumbnail()) {
            echo \'<figure class="imgBox">\';
           the_post_thumbnail(\'full\', array(\'class\' => \'img-resp\') );
           echo "</figure>";
        }
        echo \'</div>\';
        echo \'</a>\';
        echo \'</li>\';
    endwhile; ?>
</ul>
我决定将帖子缩略图设置为li的背景图像。产品。当我这样做的时候：

echo \'<li class="produkt" style="background: url(\'.the_post_thumbnail().\')">\';
页面在li元素上方生成一个image元素。我做错了什么？？

5 个回复
最合适的回答,由SO网友:Tung Du 整理而成

这里的问题是the_post_thumbnail() 不返回图像url，但返回img标记。

您可以使用此代码

$url = wp_get_attachment_url( get_post_thumbnail_id($post->ID) );
echo \'<li class="produkt" style="background: url(\'. $url.\')">\';

SO网友:mspseudolus

现在get_the_post_thumbnail_url WordPress中提供的功能。

法典中的用法示例：

$featured_img_url = get_the_post_thumbnail_url(get_the_ID(),\'full\');

https://developer.wordpress.org/reference/functions/get_the_post_thumbnail_url/

SO网友:WP-Silver

根据WordPress Codex the\\u post\\u thumbnail（）函数Display the post thumbnail. https://developer.wordpress.org/reference/functions/the_post_thumbnail/ 但这将输出整个图像标记，而不仅仅是src，在您的情况下，src是必需的。

相反，您应该使用wp\\u get\\u attachment\\u image\\u src（）函数Retrieve an image to represent an attachment.. https://developer.wordpress.org/reference/functions/wp_get_attachment_image_src/

因此，我建议尝试以下方法：

//this retrieve the full version of image
$image_data = wp_get_attachment_image_src ( get_the_post_thumbnail( $post->ID), \'full\' );
$image_url = $image_data[0];
echo \'<li class="produkt" style="background: url(\'. $image_url .\')">\';

SO网友:Pedro Marques

尝试使用背景大小：封面，背景位置：中心，背景大小：300px 100px；

<?php
echo \'<li class="produkt" style="background-image: url(\'<?php the_post_thumbnail_url(); ?>\'); background-size: cover; background-position: center; background-repeat: no-repeat; background-size: 300px 100px;">\';
?>

SO网友:YassineDr

只需回显帖子缩略图url：

<li class="produkt" style="background-image: url(<?php echo the_post_thumbnail_url(); ?>);">></li>

标签： post-thumbnails   小码农  

相关推荐