ループのおすすめ画像URLを表示

Question

アーカイブページの各投稿のサムネイルURLを取得しようとして問題があります。 私は基本的なテクニックを使用しましたが、常にページの最初に紹介された画像のURLを返します。

ここに私のテンプレート・パーツ/ポスト/コンテンツ/ content.phpのコード

の一部は、この目標は、ライトボックス上の各ポストの機能を備えた画像を開くことです。 ページへのリンク：http://leos-sipek.thomasdesnoyers.com/category/divers-types-dune-ideographie-stochastique/peinture-sur-papier/metaplasme/

2番目の投稿をクリックすると、最初の投稿のおすすめ画像が表示されます。

<div class="post-thumbnail"> 
     <a rel="lightbox" data-gall="gall-frame" data-lightbox-type="inline" href="#inline-content"> 
      <?php the_post_thumbnail('twentyseventeen-featured-image'); ?> 
     </a> 
    </div> 

    <!-- Lightbox --> 

    <div id="inline-content" style="display:none;"> 
      <?php if (has_post_thumbnail($post->ID)) : ?> 
      <?php $image = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), 'single-post-thumbnail'); ?> 
      <div class="img-single" style="background-image: url('<?php echo $image[0]; ?>')"></div> 
    </div> 

おかげで、あなたのコードで

Answer 1

あなたは何か正しいと指摘しました。 実際に私は各ライトボックスに対して同じURLを指していたので、毎回同じURLを開きました。 各ライトボックスのHrefを各ポストのIDで変更しています。 youreのは、個々の投稿の画像を表示するためのWordPressを語っていないので、あなたの助け

Answer 2

あなたは$の画像アレイからの最初の要素だけを表示するには、この行を変更しよう：

<div class="img-single" style="background-image: url('<?php echo $image[0]; ?>')"></div> 

このコードを介して、すべての配列要素を介して実行します：

<?php foreach ($image as $image_link) : ?> 
<div class="img-single" style="background-image: url('<?php echo $image_link; ?>')"></div> 
<?php endforeach; ?> 

Answer 3

なぜ使用しないのですかthe_post_thumbnail_url()？あなたが唯一のループ内のすべての投稿のための1つのライトボックスを使用している場合

<div class="post-thumbnail"> 
    <a rel="lightbox" data-gall="gall-frame" data-lightbox-type="inline" href="#inline-content"> 
     <?php the_post_thumbnail('twentyseventeen-featured-image'); ?> 
    </a> 
</div> 

<!-- Lightbox --> 

<div id="inline-content" style="display:none;"> 
     <?php if (has_post_thumbnail($post->ID)) : ?> 

     <div class="img-single" style="background-image: url('<?php echo get_the_post_thumbnail_url($post->ID, 'single-post-thumbnail'); ?>')"></div> 
</div> 

ただし、ライトボックスのリンクでdata-url="<?php echo get_the_post_thumbnail_url($post->ID, 'single-post-thumbnail'); ?>"のようなものを設定する必要があります。次にJSを使用して、そのURLをスクロールして背景画像をクリックすることができます。次のようなものがあります。

<script> 
    (function($) { 
     $('a[rel="lightbox"]').on('click', function(e) { 
      var imgSrc = $(this).data('url'); 

      $('#inline-content').css('background-image', imgSrc); 
     }); 
    })(jQuery); 
</script>