jQueryとAjaxで、Twitterタイムラインのように「新しいツイート〇件を読む」という機能を実装する

Question

###前提・実現したいこと
WordPressの質問です。

Twitterタイムラインのように「新しいツイート〇件を読む」というボタンを表示したいです。

文末の現在のソースコードによって、Ajaxで１０秒ごとにWordPressのループを実行しているのですが、このときに新着記事だけをどうやって抽出するのでしょうか？

現在のソースコードでは、

$("#ajax_lists").html(data); 

としており、この「data」には「WordPressのループを実行した記事のデータ」が入っているわけですが、そこからどのようにして新着記事だけを？

現在のソースコードでは、#ajax_listsの中身が全て入れ替わってしまうので、新着記事だけをappendしたいです。

###現在のソースコード
※指定間隔でAJAXリクエストするjQueryプラグイン（JQuery-PeriodicalUpdater）を使用しています。

test.js

$.PeriodicalUpdater('http://example.com/wp-content/themes/twentyfifteen-child/test.php',{
	method: 'get',
	minTimeout: 10000,
	type: 'html',
	multiplier:1,
	maxCalls: 0
},
function(data){
	// ➀このdataからどうやって新着記事を抽出するのか？
	$("#ajax_lists").html(data); 
});

test.php

<?php
$args = array( 'post_type' => 'Products', 'posts_per_page' => -1 );
$the_query = new WP_Query($args);
if($the_query->have_posts()):
	while ($the_query->have_posts()): $the_query->the_post();
	echo '<h2>' . get_the_title() . '</p>';
	endwhile;
	wp_reset_postdata();
else:
	echo '<p>情報がありません。</p>';
endif;
?>

Comments

[noka_blank]

課題となっているのは、以下の2点でしょうか？

1. WordPressで新しく投稿された記事を10件取得する方法がわからない。
2. 取得したデータをjQueryで10件ずつHTMLに追記する方法がわからない。

[sharishari]

noka_blank様
「10件」と「10秒」とお間違いでしょうか？
特に「件数」は不明です。
「10秒」ごとに「現在表示中の記事よりも新しい記事（件数は不明）」を取得したいという課題です。

[noka_blank]

すいません、読み間違えました。
質問の内容理解できました。

[sharishari]

noka_blank様
いえこちらこそ、読みにくい内容でした。すみません。
ちなみに質問では「test.phpで全記事を取得し、そこから新着記事を抽出する方法」を聞いていますが、mts10806様に頂戴したご回答から「test.phpで新着記事を取得する方法」がベターだという発想に至りました。
現在はこのベターな方法について模索しているところでして、もし良いお考えがあしましたら宜しくお願い致します。

Answer 1

このときに新着記事だけをどうやって抽出するのでしょうか？

考え方としては幾つかありますが、「今読んだ投稿の最新番号」をどこかに保持しておく方法が必要なのは同じです。
DB上（個々のユーザーのテーブル）ですとか、ブラウザ自体にデータを保存しておくlocalstorageというやり方もあります。
もちろん「維持しておかなくて良い（毎回最初の○件だけ出しておいて次を読み込むで次を出す）」のであればJavaScriptのグローバル変数とかに最新番号を維持しておいてそこから読み出すのもありです。

いずれも必要なのは本質問にタグでつけられていないAjaxの技術ですね。

Comments

[sharishari]

mts10806様
ありがとうございます。Ajaxのタグ追加しておきます。

ところで、たとえば最新の記事番号として固有の番号を「X」としてローカルに保存しておくとして、次の流れとしてご提示の２つの考え方について確認させてください。

➀test.phpでは「X以降の記事を全件読み込む」というループを作って記事データを取得し、X以降を出力する。

➁test.phpでは「とりあえず全件読み込む」というループを作って記事データを取得し、X以降を出力する。（質問のtest.phpと同様）

さて➁は質問のtest.phpと同様で、➀に比べると無駄なデータの読み込みがあるように思います。なので、ご教授頂いた➀を採用できれば良さそうだと感じました。

そこでお聞きしたいのですが、WordPressでループを作るとき、➀にあるような「X以降の記事を全件読み込む」というループを作る関数はあるのでしょうか？
ざっと見た感じWP_Queryにそれは見当たらず、もしご存知であれば教えて頂けませんでしょうか。

[m.ts10806]

WordPressではどこまで対応できるものか知らないですが、SQLにはoffset , limit という考え方があります。
○件目からX件取得　という考え方ですね。
そこをうまく引数として情報を渡すようにすればプログラム上は分岐をかけるだけでSQLは1回投げるだけで済むように思いますがいかがでしょうか。

[sharishari]

mts10806様
早速のご返信ありがとうございます。
SQLですか。あまり得意ではないので、今回はWordPressの方向でもう少し考えてみたいと思います。
方向性やキーワードをご提案頂いたお蔭で発想が進みました。どうもありがとうございました。

[m.ts10806]

WordPressに精通しているわけではないですがWP_Queryも検索条件をまとめてSQL文を作る材料にしているだけのはずです。
ページャーを作る際にも使われるようなので取得件数や取得開始位置を決めるオプションもありそうに思います。探してみてください。