現状
WordPress(テーマ:HTML5 Blank WordPress Theme)のfront-page.php内にて、infinite-scroll.jsを使用し無限スクロールを実現しようとしているのですが、【もっと見る】ボタンを押下すると、過去の記事が表示されず既に表示されている記事と同じ記事が追加されてしまいます。
例えば12記事あり、6件づつ表示させたいのですが16番目が初期表示されており【もっと見る】を押すと残りの712番目の記事を表示させたいのですが16番目の下に再度16の記事が追加されてしまいます。新着6件の記事が繰り返しループで表示されるが、総記事数は投稿数と同じになります。
ひたすらググったのですが分からず、どなたかご教授頂ければ幸いです、、、
実現したいこと
6件の新着記事が出ており、もっと見るを押下すると6件づつ古い記事が表示される。
恐らく【event.php】内のループの記述に問題があるのでは無いかと考えております。
参考にした記事
WordPress に Google 風の無限スクロールを実装
次のページの記事を無限に読み込む「Infinite Scroll」の実装方法【WordPress】
WordPress設定
1ページに表示する最大投稿数はposts_per_page同様【6】に設定しております。
コード(front-page.php) ※関係ある部分のみ
php
1<div class="container"> 2 <?php get_template_part( 'event' ); ?> 3</div><!-- container -->
コード(event.php)
php
1<div class="list"> 2 <ul class="list__inner"> 3 <?php 4 $args = array( 5 'posts_per_page' => 6, // 表示件数の指定 6 ); 7 $posts = get_posts( $args ); 8 foreach ( $posts as $post ): // ループの開始 9 setup_postdata( $post ); // 記事データの取得 10 ?> 11 <li class="list__card"> 12 <div class="text"> 13 <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a> 14 </div> 15 </li> 16 <?php 17 endforeach; // ループの終了 18 wp_reset_postdata(); // 直前のクエリを復元する 19 ?> 20 </ul> 21 <?php get_template_part( 'infinite-scroll' ); ?> 22 <?php get_template_part('pagination'); ?> 23</div>
コード(infinite-scroll.php)
php
1<?php 2 global $paged; 3 if( empty( $paged ) ) $paged = 1; 4 5 global $wp_query; 6 $pages = $wp_query -> max_num_pages; 7 if( !$pages ) { 8 $pages = 1; 9 } 10 // 1ページしかない or 最後のページでは出力しない条件分岐をさせる 11 if( $pages != 1 && $paged < $pages ) { 12 ?> 13 <button class="eventMoreBtn" type="button">もっと見る</button> 14 <div class="scroller-status" style="display:none;"> 15 <div class="infinite-scroll-request">読込中...</div> 16 <p class="infinite-scroll-last">これ以上は記事がありません</p> 17 <p class="infinite-scroll-error">読み込むページがありません</p> 18 </div> 19 20<?php } 21 ?>
コード(pagination.php)
php
1<!-- pagination --> 2<div class="pagination"> 3 <?php html5wp_pagination(); ?> 4</div> 5<!-- /pagination --> 6
設定(script.js)
js
1$('.list__inner').infiniteScroll({ 2 // options 3 append: '.list__card', 4 path: '.next', 5 hideNav: '.pagination', 6 button: '.eventMoreBtn', 7 scrollThreshold: false, 8 status: '.scroller-status', 9 history: 'false', 10 });
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/12/11 15:10
2019/12/11 15:29
2019/12/11 15:39