なぜWordpressではfancyboxの内容が同じですか？

Question

私はfancybox2でいくつかのブログ記事を表示したいと思います。投稿の詳細情報を学びたいユーザーは、投稿のサムネイルをクリックすると残りのコンテンツがポップアップで開きます。

すべてのサムネイルはfancyboxで開きますが、今回は他のサムネイルの内容は最初の投稿と同じです。ここにテーマファイルに追加したコードがあります。

<a href="#inline1" rel="gallery" class="fancybox"><?php the_post_thumbnail('thumbnail', array('class' => 'aligncenter')); ?></a> 

<div id="inline1" style="width:400px;display: none;"> 
    <?php the_post_thumbnail('thumbnail', array('class' => 'aligncenter')); ?><?php the_content(); ?> 

</div> 

そして、ここでのテーマファイルのフルバージョンです：

<?php 
    $query = ff_get_query_for_section(); 
?> 
<!-- Logotypes Section --> 

      <section <?php ff_print_section_attributes($query->get('section-options'), 'small-section pt-10 pb-10');// class="small-section bg-dark pt-10 pb-10"?>> 
       <div class="container relative"> 

        <div class="row"> 
        <div class="col-md-8 col-md-offset-2 col-lg-8 col-lg-offset-2"> 


          <div class="thumbnail"> 

           <div id="content-1" class="content mCustomScrollbar"> 

            <?php 
$catquery = new WP_Query('cat=48&posts_per_page=10'); 
while($catquery->have_posts()) : $catquery->the_post(); 

?> 

<ul class="referans"> 
<div class="reffoto"><a href="#inline1" rel="gallery" class="fancybox"><?php the_post_thumbnail('thumbnail', array('class' => 'aligncenter')); ?></a> 

<div id="inline1" style="width:400px;display: none;"> 
    <?php the_post_thumbnail('thumbnail', array('class' => 'aligncenter')); ?><?php the_content(); ?> 

</div> 


</div> 
<div class="refyazi"><?php echo substr(get_the_excerpt(), 0,70); ?>...</div> 
</ul> 


<?php endwhile; ?> 



<script> 
// Get the modal 
var modal = document.getElementById('myModal'); 

// Get the button that opens the modal 
var btn = document.getElementById("myBtn"); 

// Get the <span> element that closes the modal 
var span = document.getElementsByClassName("close")[0]; 

// When the user clicks the button, open the modal 
btn.onclick = function() { 
    modal.style.display = "block"; 
} 

// When the user clicks on <span> (x), close the modal 
span.onclick = function() { 
    modal.style.display = "none"; 
} 

// When the user clicks anywhere outside of the modal, close it 
window.onclick = function(event) { 
    if (event.target == modal) { 
     modal.style.display = "none"; 
    } 
} 
</script> 


     </div> 
    </div> 

          </div> 
         </div> 
        </div> 
       </div> 

      </section> 

      <!-- End Logotypes --> 

誰もがそのことについてどんな考えを持っていますか？どうもありがとう！

Answer 1

あなたのIDは常に同じです。そのため、同じコンテンツが表示されます。あなたのサムネイルをエコーするときに、[ループ]（https://codex.wordpress.org/The_Loop）の中にいるよう

<?php $query = ff_get_query_for_section(); ?> 
<!-- Logotypes Section --> 
<section <?php ff_print_section_attributes($query->get('section-options'), 'small-section pt-10 pb-10');// class="small-section bg-dark pt-10 pb-10"?>> 
    <div class="container relative"> 
     <div class="row"> 
      <div class="col-md-8 col-md-offset-2 col-lg-8 col-lg-offset-2"> 
       <div class="thumbnail"> 
        <div id="content-1" class="content mCustomScrollbar"> 
         <?php $i = 0; ?> 
         <?php $catquery = new WP_Query('cat=48&posts_per_page=10'); ?> 
         <?php while($catquery->have_posts()) : $catquery->the_post();?> 
          <ul class="referans"> 
           <div class="reffoto"> 
            <a href="#inline<?php echo $i; ?>" rel="gallery" class="fancybox"> 
             <?php the_post_thumbnail('thumbnail', array('class' => 'aligncenter')); ?> 
            </a> 
            <div id="inline<?php echo $i; ?>" style="width:400px;display: none;"> 
             <?php the_post_thumbnail('thumbnail', array('class' => 'aligncenter')); ?> 
             <?php the_content(); ?> 
            </div> 
           </div> 
           <div class="refyazi"> 
            <?php echo substr(get_the_excerpt(), 0,70); ?>... 
           </div> 
          </ul> 
          <?php $i++; ?> 
         <?php endwhile; ?> 
         <script> 
         // Get the modal 
         var modal = document.getElementById('myModal'); 

         // Get the button that opens the modal 
         var btn = document.getElementById("myBtn"); 

         // Get the <span> element that closes the modal 
         var span = document.getElementsByClassName("close")[0]; 

         // When the user clicks the button, open the modal 
         btn.onclick = function() { 
          modal.style.display = "block"; 
         } 

         // When the user clicks on <span> (x), close the modal 
         span.onclick = function() { 
          modal.style.display = "none"; 
         } 

         // When the user clicks anywhere outside of the modal, close it 
         window.onclick = function(event) { 
          if (event.target == modal) { 
           modal.style.display = "none"; 
          } 
         } 
         </script> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</section> 
<!-- End Logotypes -->