クリックしたときに各投稿のワードプレスモーダル

Question

"続きを読む"ボタンがクリックされたときに、私はこのステップで立ち往生しているので、ワードプレスのモーダルウィンドウでシングル投稿コンテンツを表示しようとしています。モーダルが開かれていますが、クリックした投稿に依存するのではなく、最初の（最新の）投稿コンテンツのみが表示されます。いずれかの投稿をクリックすると、最初の投稿コンテンツしか得られません。 Plsは私を助け、私は私のプロジェクトを終了したい。最近の投稿を読んでより多くのボタンが表示されている

私のindex.php

<!-- The Modal --> 
 
<div id="myModal" role="dialog" class="modal hide fade"> 
 

 
    <!-- Modal content --> 
 
<div class="modal-content"> 
 
\t <br> 
 
\t <div class="modal-header"> 
 
\t \t <span class="close">&times;</span> 
 
\t \t <h2><?php the_title(); ?></h2> 
 
\t </div> 
 
\t <br> 
 
\t <div class="modal-body"> 
 
\t \t <p><?php if (have_posts()) : while (have_posts()) : the_post(); the_content(); endwhile; else: ?> 
 
         <p>Sorry, no posts matched your criteria.</p> 
 
        <?php endif; ?></p> 
 
        <p class="posted">Posted at: <br><?php echo get_the_date('d-m-Y'); ?> <?php the_time('H:i:s'); ?></p> 
 
        <?php comments_template() ?> 
 
\t \t <br><br> 
 
\t </div> 
 

 
</div> 
 
<!-- Modal end --> 
 
</div>

ファイル、：

<div id="posts"> 
 

 
\t <div class="post-div"><?php 
 
     
 
     $category = get_queried_object_id(); 
 
     
 
     $paged = get_query_var('paged') ? get_query_var('paged') : 1; 
 
     
 
     $args = array( 
 
        'posts_per_page' => 3, 
 
        'cat' => 2, 
 
        'paged' => $paged,); 
 
     
 
     $recent_posts = new WP_Query($args); 
 
     while($recent_posts->have_posts()) : 
 
     $recent_posts->the_post(); global $post; ?> 
 
     
 
     <h2><?php the_title(); ?></h2> 
 
\t \t <p><span class="date">Posted at: <br><?php echo get_the_date('d-m-Y'); ?> <?php the_time('H:i:s'); ?></span></p> 
 
     <?php if (has_post_thumbnail()) : ?><?php the_post_thumbnail('full') ?><?php endif ?> \t 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed arcu in odio pretium facilisis. Aliquam ut libero id justo lobortis faucibus...</p> 
 
     <button class="read-more">Read More</button> 
 
     
 
     <?php endwhile; ?> 
 
     <?php wp_reset_postdata(); ?> 
 
    </div> 
 
\t 
 
</div>

とJavaScript：

var modal = document.getElementById('myModal'); \t \t 
 
\t \t 
 
\t for (i=0; i < 50; i++) { 
 

 
\t \t var btn = document.getElementsByClassName("read-more")[i]; 
 
     btn.onclick = function() { 
 
      modal.style.display = "block"; 
 
     } 
 
}

はあなたの助けをありがとう！

Answer 1

使用1 addEventListner

var modal = document.getElementById('myModal'); 
var posts = document.getElementById("posts"); 
posts.addEventListener("click", function(e) { 
    var button = e.target; 
    if(button.classList.contains("read-more")) 
    modal.classList.remove("hide"); 
}); 

Answer 2

私が表示されるモーダルを取得していますが、私は動的なコンテンツを表示したいです。私は最新の投稿コンテンツしか入手できませんが、投稿に応じて適切なコンテンツを取得したいと考えています。