Question

我想在这里做的是将blogposts的缩略图作为背景图像添加到320press WP-Foundation Wordpress主题中的内置Orbit滑块中。首先要说的是，我不知道如何编写PHP代码。我只是想做这个小调整，使设计看起来更好。我的代码：

<?php
  global $post;
  $tmp_post = $post;
  $args = array( 'numberposts' => 5 );
  $myposts = get_posts( $args );
  foreach( $myposts as $post ) : setup_postdata($post); 
    $post_thumbnail_id = get_post_thumbnail_id();
    $featured_src = wp_get_attachment_image_src( $post_thumbnail_id, 'wpf-home-featured');
?>

<div style="background-color: #F2F2F2; background-size:cover; background-image: url(<?php echo wp_get_attachment_image_src($post_thumbnail_id); ?>);">
  <h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
  <?php the_excerpt(); ?>
  <p><a href="<?php the_permalink(); ?>" class="button nice radius">Read More »</a></p>
</div>
<?php endforeach; ?>

这就是整个代码，现在我遇到了问题：

`<div style="background-color: #F2F2F2; background-size:cover; background-image: url(<?php echo wp_get_attachment_image_src($post_thumbnail_id); ?>);">`

如您所见，我尝试获取图像源并将其设为背景图像。我不知道如何解决这个问题，所以，提前，谢谢你的帮助！

Answer 1

尝试将其更改为

background-image: url('<?php echo $featured_src; ?>')

Answer 2

wp_get_attachment_image_src的文档揭示了这个问题。此函数返回一个数组，其中包含图像的url，width和height。此外，它接受的第二个参数是图像的输出大小。由于您使用背景大小：封面，我认为您希望图像是全分辨率。

为了输出正确的background-url而不是array（），将背景div中的echo更改为$featured_src[0]：

<div style="background-color: #F2F2F2; background-size:cover; background-image: url(<?php echo $featured_src[0]; ?>);">

要使背景图像具有完整分辨率，请将$ featured_src行的第二个参数更改为'full'：

$featured_src = wp_get_attachment_image_src( $post_thumbnail_id, 'full');

WP-Foundation（由320press）轨道滑块与背景图像

2 个答案: