WordPressの記事一覧においてAjaxで記事を追加読み込みする
WordPressの記事一覧画面において、1ページの表示件数を超えた場合、通常ページングでページを分けると思いますが、ページの遷移はさせずAjaxを用いて現行ページに次の記事を追加する方法を調べてみました。
記事追加読み込みボタンの設置
最初に追加読み込みボタンを設置します。
現在のクエリで「max_num_pages」が1より大きい（1ページ以上のページングがある）場合にボタンを出力するようにします。
例えばこんな感じ。
これで例えば1ページ表示する件数を10とした時に記事が11以上あれば以下のように「もっと見る」テキストが出力されるようになります。
ボタンとなるspanタグに「data-pt=”post”」とありますが、これによって読み込む投稿タイプを選別するようにしています。
デフォルトの投稿タイプしか使っていないのであればそのまま「post」でOKです。
当然今の状態ではただのテキストにすぎないので、ボタンをクリックした時の処理を加えていきましょう。
ボタン押下時の処理
まず好きな名前のjsファイルを作成します。
今回は仮に「ajax_append_post.js」とします。
内容は以下の通りです。
dataに現在のクエリ情報やページ情報など渡してAjaxリクエストを送信するのですが、クエリやページ情報は後述する「wp_localize_script()」によってWordpressから引き渡されます。
「action」は後程必要となる名前になります。分かりやすい任意の値で大丈夫ですが、今回は「loadmore」としておきます。
投稿タイプに関しては前述の「data-pt」の値が引き渡されますが、記述がない場合は「post」が渡るようにしています。
またAjaxリクエストの前に「beforeSend」でボタンに対して「loading」というクラスの付与とテキストを「読み込み中」に変更しています。
こうすることで例えばローディングアニメーション画像を出して読み込み中ということをユーザーに分かりやすく伝えることもできます。
送信の完了が確認できれば先ほどの「loading」クラスを削除、テキストも元に戻したうえで、返された記事情報をappendで記事囲み要素の最後に追加します。
そして現在のページにプラス1をして最終ページ数にまで達していればボタンを削除します。
今回はエラー時も同じくボタンを削除していますが、エラーメッセージを出した方が親切かもですね。
クエリ情報やページ情報などをajax_append_post.jsに引き渡す
前述した「wp_localize_script()」を使って作成した「ajax_append_post.js」に値を引き渡します。
お使いのテーマディレクトリ内のfunctions.phpに下記の記述をします。
まず「wp_enqueue_scripts」にadd_actionでフックします。
「global $wp_query」で現在のクエリ情報を取得し、「wp_register_script」で先ほど作成した「ajax_append_post.js」を登録します。
その際のハンドル名は「append_post」とします。
次の「wp_localize_script」で「ajax_append_post.js」で必要な情報を渡していきます。
第一引数では引き渡し先となるjsファイルのハンドル名を入力します。先ほどの「append_post」ですね。
第二引数ではデータを格納する変数名を入力します。「ajax_append_post.js」内の「append_post_params.posts」の「append_post_params」の部分ですね。
第三引数で実際に格納する内容を入力します。
まずAjaxのアクセス先となる「ajaxurl」に「admin-ajax.php」へのパスを記述します。
「posts」にはクエリ文字列をJSON形式で格納。
「current_page」には現在のページ番号を格納。
「max_page」は多数のページ数がある場合の最終ページ番号を格納。
これでこれらの情報が「append_post_params」として「ajax_append_post.js」に引き渡されます。
最後にAjax通信で受け取った情報を整形するために下記の2つのアクションフックを使います。
「wp_ajax_[アクション名]」と「wp_ajax_nopriv_[アクション名]」になります。
このアクション名は「ajax_append_post.js」の「action」で指定したものになりますので、今回は「wp_ajax_loadmore」と「wp_ajax_nopriv_loadmore」となります。
ちなみに「wp_ajax_xxxx」はログインユーザー用、「wp_ajax_nopriv_xxxx」は未ログイン（一般ユーザー）用のアクションフックです。
あとは$_POSTに各情報が格納されているので、それらをうまいこと整形して出力しておしまいです。
参照サイト
今回の記事にあたって下記のサイトが非常に参考になりました。
ボタンでの追加読み込み以外にスクロールで自動読み込みの方法もあるので気になる人はぜひご覧ください。
