WordPress で the_content() の loop が一部だけうまくいきません

Question

WordPress 初心者です。startbootsrap.com から Freelancer というテンプレートをダウンロードして、この中に複数の投稿を表示させたいと思っています。
https://startbootstrap.com/themes/freelancer/

テンプレートの中にある "Portfolio Item" 部分と "Portfolio Modal" 部分の両方に各投稿のデータを挿入したいのですが、全体をループで囲っているつもりではいるものの、前段の ”Portfolio Item" 部分の the_post_thumbnail() ではしっかりとコンテンツがループされるのに、後段 "Portfolio Modal" の the_title() や the_content() ではひとつの投稿の内容が繰り返し表示されてしまいます。

正しい投稿の ID などを引っ張ってこれていないと思うのですが、ループで the_posts() は指定しているつもりなので、”Portfolio Modals" のコードのどこかに the_posts() をリセットしてしまう何かが入っていたりするのでしょうか。。？それとも根本的なループの使い方などが間違っているのでしょうか？

後段の でも the_title() や the_content() でもループ処理ができるように修正したいです。どなたかご回答いただけますと幸いです。

<!-- Portfolio Item -->

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

<div class="col-md-6 col-lg-4 mb-5">
    <div class="portfolio-item mx-auto" data-toggle="modal" data-target="#portfolioModal">
        <div class="portfolio-item-caption d-flex align-items-center justify-content-center h-100 w-100">
            <div class="portfolio-item-caption-content text-center text-white"><i class="fas fa-plus fa-3x"></i></div>
        </div>
        <?php if (has_post_thumbnail()) : ?>
            <?php the_post_thumbnail(); ?>
        <?php else: ?>
            <img class="img-fluid" src="<?php echo get_template_directory_uri(); ?>/assets/img/portfolio/cabin.png" alt="" />
        <?php endif; ?>
    </div>
</div><!-- /Portfolio Item -->

<!-- Portfolio Modals -->
<div class="portfolio-modal modal fade" id="portfolioModal" tabindex="-1" role="dialog" aria-labelledby="portfolioModal1Label" aria-hidden="true">
    <div class="modal-dialog modal-xl" role="document">
        <div class="modal-content">
            <button class="close" type="button" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true"><i class="fas fa-times"></i></span>
            </button>
            <div class="modal-body text-center">
                <div class="container">
                    <div class="row justify-content-center">
                        <div class="col-lg-8">
                            <!-- Portfolio Modal - Title-->
                            <h2 class="portfolio-modal-title text-secondary text-uppercase mb-0" id="portfolioModal1Label"><?php the_title(); ?></h2>
                            <!-- Icon Divider-->
                            <div class="divider-custom">
                                <div class="divider-custom-line"></div>
                                <div class="divider-custom-icon"><i class="fas fa-star"></i></div>
                                <div class="divider-custom-line"></div>
                            </div>
                            <!-- Portfolio Modal - Image--><img class="img-fluid rounded mb-5" src="assets/img/portfolio/cabin.png" alt="" /><!-- Portfolio Modal - Text-->
                            <p class="mb-5"><?php the_content(); ?></p>
                            <button class="btn btn-primary" data-dismiss="modal"><i class="fas fa-times fa-fw"></i>Close Window</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div><!-- /Portfolio Modals -->

<?php endwhile; else: ?>
    <p>No Posts</p>
<?php endif; ?>

Answer 1

id="portfolioModal" がループの中にあるのは問題です。idは重複できません。
data-target="#portfolioModal"としているので、多分最初か最後の記事のモーダルのみが表示されるでしょう。

↓多分こんな感じで動くと思います。（"の位置とかに注意）

data-target="#portfolioModal<?php the_ID(); ?>">

id="portfolioModal<?php the_ID(); ?>" tabindex="-1"

【the_ID() | Function | WordPress Developer Resources】
https://developer.wordpress.org/reference/functions/the_id/

Comments

[coffeesleep]

ありがとうございます！！！
はい、まさに最初の記事がずっと表示されていました。。

そして、いただいたコードを貼り付けたら正常に動くようになりました！！
とても助かりました、本当にありがとうございます。。！