実現したいこと
カスタム投稿一覧で最初6件表示し、もっと見るボタンをクリックすると7件目以降が全て表示されるようにしたいです。
発生している問題・分からないこと
なぜかもっと見るボタンをクリックすると6件目の記事も表示されてしまうのです。
イメージとしては、上から最新の記事が1,2,3,4,5,6,6,7といった形で表示されてしまいます。
エラーメッセージ
error
1エラーメッセージは特に出ていません。該当ソースは以下になります。
該当のソースコード
archive
1<?php get_header();?> 2 3<main id="under"> 4 <nav> 5 <ol class="breadcrumbs"> 6 <li><a href="<?php echo home_url();?>">TOP</a></li> 7 <li>EXHIBITIONS</li> 8 </ol> 9 </nav> 10 <div id="exhibitions" class="page-wrapper"> 11 <h1 class="text-center">EXHIBITIONS</h1> 12 <article id="exhibitions-container" data-count="<?php echo $count; ?>" data-post-type="" class="exhibitions-container exhibitions-list"> 13 <?php while (have_posts()): the_post(); ?> 14 <a href="<?php the_permalink(); ?>"> 15 <article class="exhibitions-item d-flex flex-row"> 16 <div class="exhibitions-item-img"> 17 <?php the_post_thumbnail(); ?> 18 </div> 19 <div class="exhibitions-item-tt"> 20 <h2><?php the_title(); ?></h2> 21 <p><?php echo get_field('sub_tt'); ?></p> 22 <p class="open"> 23 <?php echo get_field('date_start'); ?> 〜 <?php echo get_field('date_end'); ?> 24 </p> 25 <div class="archive-info"> 26 <?php if (get_field('closing_day')) : ?> 27 <p>※<?php echo get_field('closing_day'); ?></p> 28 <?php endif; ?> 29 <?php if (get_field('open')) : ?> 30 <p><?php echo get_field('open'); ?>〜<?php echo get_field('close'); ?> (Last day<?php if (get_field('close_lastday')) : ?><?php echo get_field('close_lastday'); ?><?php endif; ?>)</p> 31 <?php endif; ?> 32 <?php if (get_field('24hour')) : ?> 33 <p><?php echo get_field('24hour'); ?></p> 34 <?php endif; ?> 35 <p><?php echo get_field('place'); ?></p> 36 <p><?php echo get_field('address'); ?></p> 37 </div> 38 <div class="archive-statement"> 39 <?php 40 $text = mb_substr(get_field('statement'), 0, 62); 41 echo $text . '...'; 42 ?> 43 </div> 44 <p class="date"><?php echo get_post_time('j M Y'); ?></p> 45 </div> 46 </article> 47 </a> 48 <?php endwhile; ?> 49 </article> 50 </div><!-- page-wrapper --> 51<div id="load-more-container"> 52 <button id="load-more-btn">もっと見る</button> 53</div> 54</main> 55 56 57<?php get_footer();?>
functions.php
1add_action('wp_ajax_load_more_exhibitions', 'load_more_exhibitions'); 2add_action('wp_ajax_nopriv_load_more_exhibitions', 'load_more_exhibitions'); 3 4function load_more_exhibitions() 5{ 6 $page = $_GET['page']; 7 $args = array( 8 'post_type' => 'exhibitions', 9 'posts_per_page' => 6, 10 'paged' => $page 11 ); 12 $query = new WP_Query($args); 13 $output = ''; 14 if ($query->have_posts()) { 15 while ($query->have_posts()) { 16 $query->the_post(); 17 ob_start(); 18 ?> 19 <a href="<?php the_permalink(); ?>"> 20 <article class="exhibitions-item d-flex flex-row"> 21 <div class="exhibitions-item-img"> 22 <?php the_post_thumbnail(); ?> 23 </div> 24 <div class="exhibitions-item-tt"> 25 <h2><?php the_title(); ?></h2> 26 <p><?php echo get_field('sub_tt'); ?></p> 27 <p class="open"> 28 <?php echo get_field('date_start'); ?> 〜 <?php echo get_field('date_end'); ?> 29 </p> 30 <div class="archive-info"> 31 <?php if (get_field('closing_day')) : ?> 32 <p>※<?php echo get_field('closing_day'); ?></p> 33 <?php endif; ?> 34 <?php if (get_field('open')) : ?> 35 <p><?php echo get_field('open'); ?>〜<?php echo get_field('close'); ?> (Last day<?php if (get_field('close_lastday')) : ?><?php echo get_field('close_lastday'); ?><?php endif; ?>)</p> 36 <?php endif; ?> 37 <?php if (get_field('24hour')) : ?> 38 <p><?php echo get_field('24hour'); ?></p> 39 <?php endif; ?> 40 <p><?php echo get_field('place'); ?></p> 41 <p><?php echo get_field('address'); ?></p> 42 </div> 43 <div class="archive-statement"> 44 <?php 45 $text = mb_substr(get_field('statement'), 0, 62); 46 echo $text . '...'; 47 ?> 48 </div> 49 <p class="date"><?php echo get_post_time('j M Y'); ?></p> 50 </div> 51 </article> 52 </a> 53 <?php 54 $output .= ob_get_clean(); 55 } 56 } 57 wp_reset_postdata(); 58 echo json_encode(explode('<!--next-item-->', $output)); 59 wp_die(); 60}
footer.phpのscriptタグ内
1 document.addEventListener('DOMContentLoaded', function () { 2 var container = document.getElementById('exhibitions-container'); 3 var loadMoreButton = document.getElementById('load-more-btn'); 4 var perPage = 6; // Number of items to show per page 5 var count = parseInt(container.getAttribute('data-count')); 6 var page = 1; 7 var totalItems = <?php echo $wp_query->found_posts; ?>; 8 9 if (count <= perPage) { 10 loadMoreButton.style.display = 'none'; 11 } 12 13 loadMoreButton.addEventListener('click', function () { 14 page++; 15 var xhr = new XMLHttpRequest(); 16 xhr.open('GET', '<?php echo admin_url('admin-ajax.php') . '?action=load_more_exhibitions&page='; ?>' + page, true); 17 xhr.setRequestHeader('Content-Type', 'application/json;charset=UTF-8'); 18 xhr.onreadystatechange = function () { 19 if (xhr.readyState === 4 && xhr.status === 200) { 20 var newExhibitions = JSON.parse(xhr.responseText); 21 if (newExhibitions.length > 0) { 22 newExhibitions.forEach(function (exhibition) { 23 container.insertAdjacentHTML('beforeend', exhibition); 24 }); 25 count += newExhibitions.length; 26 container.setAttribute('data-count', count); 27 if (count >= totalItems) { 28 loadMoreButton.style.display = 'none'; 29 } 30 } else { 31 loadMoreButton.style.display = 'none'; 32 } 33 } 34 }; 35 xhr.send(); 36 }); 37 });
試したこと・調べたこと
- teratailやGoogle等で検索した
- ソースコードを自分なりに変更した
- 知人に聞いた
- その他
上記の詳細・結果
GoogleやchatAIで「archive-exhibitions.phpの記事一覧について。最初6件表示し、7件目以降はもっと見るボタンをクリックすると表示するようにしたい。」と検索しましたが、エラー解消となる情報は見つかりませんでした。
補足
特になし
あなたの回答
tips
プレビュー