Question

是否可以针对不同的帖子动态更改CSS中调用的背景图像？总之，我希望将WordPress中帖子的特色图像显示为背景？

background: #253340 url('assets/images/blog/post-2.jpg') no-repeat 50% top;

我在这个论坛上尝试过这个但是没有用。

background: #253340 url(<?php echo $variable_holding_img_url; ?>) no-repeat 50% top;

Answer 1

<?php
$image_url = 'my_default_image_url.jpg'; // fallback image url

if ( has_post_thumbnail() ) {
    $post_thumbnail_id = get_post_thumbnail_id();
    $image_url = wp_get_attachment_image_src( $post_thumbnail_id, 'large' )[0]; // large or full or custom size
}
?>

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

功能参考

Answer 2

如果您的主题支持发布缩略图，只要css代码在模板中而不是在单独的css文件中，您就可以执行以下操作

<?php if (has_post_thumbnail( $post->ID ) ): ?>
    <?php $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'single-post-thumbnail' ); ?>
    <div id="custom-bg" style="background: #253340 url('<?= $image[0] ?>') no-repeat 50% top;')">

    </div>
<?php endif; ?>

Answer 3

不，上面的代码会破坏你的工作，因为它会返回所有精确的图像标签和数据。你应该这样使用。

$image_url = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ));
<!-- div that holds the background -->
<div style="background: #253340 url('<?php echo $image_url[0]; ?>') no-repeat 50% top;">
    <!-- some other content -->
</div>

它会产生精确的输出。

注意：此代码将放在php文件中，而不是在你的css文件中。

动态更改CSS中的背景图像，用于wordpress中的不同帖子

3 个答案:

功能参考