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

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

新規登録して質問してみよう
ただいま回答率
85.47%
WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

Q&A

0回答

85閲覧

wordpress×ajaxでもっと見るボタンで記事一覧を表示する際の記事重複

ems

総合スコア23

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

0グッド

1クリップ

投稿2024/04/10 08:36

実現したいこと

カスタム投稿一覧で最初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'); ?>&nbsp;〜&nbsp;<?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'); ?>&nbsp;〜&nbsp;<?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件目以降はもっと見るボタンをクリックすると表示するようにしたい。」と検索しましたが、エラー解消となる情報は見つかりませんでした。

補足

特になし

気になる質問をクリップする

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

tabuu

2024/04/11 05:55

load_more_exhibitions関数内でoutputを'<!--next-item-->'という文字列で分割して配列化していますがどのような意図で行っている処理でしょうか?
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.47%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問