php - WP-Foundation (by 320press) Orbit Slider with background-image

Question

ここでやりたいことは、ブログ投稿の投稿サムネイルを背景画像として、320press WP-Foundation Wordpress-theme 内の組み込みの 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

wp_get_attachment_image_srcのドキュメントで問題が明らかになります。この関数は、画像の URL、幅、および高さを含む配列を返します。また、受け入れる 2 番目の引数は、イメージの出力サイズです。background-size:cover で使用しているため、画像をフル解像度にしたいと思います。

array() の代わりに適切な background-url を出力するには、バックグラウンド div の echo を次のように変更します$featured_src[0]。

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

背景画像をフル解像度にするには、$featured_src 行の 2 番目の引数を次のように変更します'full'。

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

Answer 2

に変更してみてください

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