サポート » その他 » カスタム投稿詳細をモーダルにしたら挙動がおかしい

  • 投稿一覧から詳細ページをsingle-**.phpを使わずにswiperとJSの組み合わせでモーダル+スライドさせたいのですが、モーダルの中身が必ず一番新しい投稿になってしまってクリックした内容が表示されません。

    data-slide-index=”<?php the_ID(); ?>”で投稿のID取得、JSでも指定しているのですがうまく行かず、、、
    どなたかご教示いただけませんでしょうか。

    なお、swiperはCDNで読み込みしております。

    <link
      rel="stylesheet"
      href="https://unpkg.com/swiper@7/swiper-bundle.min.css"
    />
    <script src="https://unpkg.com/swiper@7/swiper-bundle.min.js"></script>

    【phpコード内容】
    一覧部分

    <ul class="swiperModalButton">
    <?php
        $args = [
        'post_type' => 'achievement', // カスタム投稿名
        'posts_per_page' => 30, // 表示させる数
        'paged' => $paged,
        ];
        $my_query = new WP_Query($args); ?>
        <?php if ($my_query->have_posts()): ?>
        <?php while ($my_query->have_posts()) : $my_query->the_post(); ?>
        <li class="modalOpen" data-slide-index="<?php the_ID(); ?>">
                <?php if(has_post_thumbnail()): ?>
                <img src="<?php the_post_thumbnail_url(''); ?>">
                <?php endif; ?>
                <h3><?php the_title(); ?></h3>
        </li>
        <?php endwhile; ?>
        <?php else: ?>
    <?php endif; wp_reset_postdata(); ?>  
    </ul>

    モーダル中身

    <div class="modal" id="modal">
    <div class="modal__overlay modalClose"></div>
    <div class="modal__content">
        <div class="modal_inner">
            <div class="modal__close-btn modalClose" aria-label="閉じる"><i class="fa-regular fa-circle-xmark"></i></div>
            <!-- スライダー -->
            <div class="swiper modalInSlider">
                <ul class="swiper-wrapper">
                    <?php
                        $args = [
                        'post_type' => 'achievement',
                        'posts_per_page' =>100,
                        ];
                        $my_query = new WP_Query($args); ?>
                        <?php if ($my_query->have_posts()): ?>
                        <?php while ($my_query->have_posts()) : $my_query->the_post(); ?>
                    <li class="swiper-slide modalInSlider">
                    <?php if( get_field('***') ): ?>
                        <img src="<?php the_field('***'); ?>" />
                    <?php endif; ?>
                    </li>
                        <?php endwhile; ?>
                        <?php else: ?>
                        <?php endif; wp_reset_postdata(); ?>
                </ul>
            </div>
        </div>
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
    </div>

    【JSコード内容】

    //modal
    window.addEventListener("DOMContentLoaded", () => {
      // モーダルを取得
      const modal = document.getElementById("modal");
      // モーダルを開く
      const openModalBtns = document.querySelectorAll(".modalOpen");
      // モーダルを閉じる
      const closeModalBtns = document.querySelectorAll(".modalClose");
    
      // モーダルのボタンクリック
      openModalBtns.forEach((openModalBtn) => {
        openModalBtn.addEventListener("click", () => {
          // data-modalで設定したスライド番号を取得
          const modalIndex = openModalBtn.dataset.slideIndex;
          swiper.slideTo(modalIndex);
          modal.classList.add("is-active");
        });
      });
    
      // モーダルの閉じるボタンクリック
      closeModalBtns.forEach((closeModalBtn) => {
        closeModalBtn.addEventListener("click", () => {
          modal.classList.remove("is-active");
        });
      });
    
       // Swiperの設定
       const swiper = new Swiper(".swiper", {
        loop: true,
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
        spaceBetween: 30, //任意のマージン
      });
    
    });

    参照した参考記事はこちら:
    素のJSとSwiperでモーダル内にスライダーを表示する方法
    JavaScriptのSwiperをモーダルでスライダー・カルーセル表示

    よろしくお願いいたします。

    • このトピックはkarashiが1年、 4ヶ月前に変更しました。
    • このトピックはkarashiが1年、 4ヶ月前に変更しました。
    • このトピックはkarashiが1年、 4ヶ月前に変更しました。
2件の返信を表示中 - 1 - 2件目 (全2件中)
  • こんにちは

    ざっと見た感じ(下記より)では data-slide-index はスライド番号(インデックス)ではないですか?

    // data-modalで設定したスライド番号を取得
    const modalIndex = openModalBtn.dataset.slideIndex;

    スライド番号なら、下記のような感じではどうでどうでしょう?(未検証)
    data-slide-index="<?php echo $my_query->current_post + 1; ?>"

    トピック投稿者 karashi

    (@karashi)

    @ishitaka さん
    返答ありがとうございます!

    提案いただいたコードで実装したところ、思い通りの挙動になりました。
    大変助かりました!ありがとうございます。

2件の返信を表示中 - 1 - 2件目 (全2件中)
  • トピック「カスタム投稿詳細をモーダルにしたら挙動がおかしい」には新たに返信することはできません。