質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

89.86%

投稿一覧の非同期読み込み時に連番のクラス名やモーダル表示要素が出力されない

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 71

仕様

wordpressでwp_queryによるループでカスタム投稿・カスタムタクソノミーの記事一覧を表示しています。
カード型記事一覧のうち、カードをひとつをクリックすると、モーダルウィンドウが出てきて、そこの詳細が表示されます。
記事一覧の2ページ目以降は通常のページャーではなく、jQueryプラグインのinfinite-scrollにて追加読み込みしています。

起きている問題

もっと見るボタンを押すと、
カード型の記事一覧は問題なく表示されます。

ただ、
モーダル表示用の要素が生成されず、

open=".media_list_"も
通常は、
open=".media_list_4"
open=".media_list_5"
open=".media_list_6"
と出るのですが、

もっと見るを押すと、
再び、open=".media_list_7"とクラス名が出てほしいのですが、
open=".media_list_4"になってしまいます。

まとめると
もっと見るとクリックしたときに
・モーダル表示用の要素を生成したい
・open=".media_list_$i"を連番で出したい
です。

ソースコード

<?php
$args = array(
        'post_type' => 'product',
        'taxonomy' => 'product_cat', 
        'term' => 'shop',
        'posts_per_page' => 3, 
        'paged' => $paged
    );
    $wp_query = new WP_Query( $args );
    if ($wp_query->have_posts()) : $i=4;
        while ($wp_query->have_posts()) :  $wp_query->the_post();
    ?>
<!--カード型記事-->
<div data-wow-delay="<?php echo $i ?>00ms" class="post-media2 wow fadeIn col-12 col-md-4 col-lg-4 mb-5" data-izimodal-open=".media_list_<?php echo $i ?>">
    <div class="card img-thumbnail">
    <div class="card-body text-center">
        <p class="card-text text-left">hoge</p>
    </div>
    </div>
</div>

<!--モーダル表示用-->
<div class="media_list_<?php echo $i ?>" data-izimodal-group="group" data-izimodal-loop=true>
<div class="iziModal-close"><a href="javascript:void(0)" data-izimodal-close=""><span></span><span></span></a></div>
<?php $i++; endwhile; 
    else: echo '記事がありません。';
    endif; wp_reset_postdata(); ?>
</div>


<!--もっと見るのボタン-->
<span class="next_posts_link1">
    <?php next_posts_link(); ?>
</span>

<?php
    global $paged;
    if( empty( $paged ) ) $paged = 1;

    global $wp_query;
    $pages = $wp_query -> max_num_pages;
    if( !$pages ) {
        $pages = 1;
    }
    if( $pages != 1 && $paged < $pages ):
 ?>

<div class="scroll_wrap">
<button class="view-more-button" type="button">もっと見る</button>
<div class="scroller-status page-load-status" style="display:none;">
    <div class="infinite-scroll-request"></div>
    <p class="infinite-scroll-last mb-5">これ以上、製品はありません</p>
    <p class="infinite-scroll-error mb-5">読み込むページがありません</p>
</div>
</div>

<?php endif; ?>

wp_scriptにて読み込んでいるJS

jquery-1.12.4
infinite-scroll.pkgd.min.js
iziModal.min.js

wp_script('infinite-scroll-js','https://unpkg.com/infinite-scroll@3/dist/infinite-scroll.pkgd.min.js',true);
wp_script('izimodal-js','https://cdnjs.cloudflare.com/ajax/libs/izimodal/1.5.1/js/iziModal.min.js',true);
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

0

PHPはページ出力が終わると終了します。なので、$i=4;は毎回4になります。
$pagedから1を引いたものと1ページあたりの件数を掛けて4と足す必要があると思います。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2020/01/17 14:05

    ありがとうございます。
    やりたいことが変わってきましたので新しく投稿します。
    $pagedの方法も試してみます。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 89.86%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる