ページ遷移しない投稿一覧のページネーションを、jQueryで手軽に実装する

投稿一覧にページネーションは付きものです。
100ウェブ事例紹介でも、一覧ページにおける通常のメインループでのページネーションについては何度も書いています。
参考までに代表的なメインループでのページネーションの記述について、以下に書いておきます。

例として archive.php

<?php
if (have_posts()) {
  while (have_posts()) {
    the_post();
    //ループ処理
  }
}
 
global $wp_rewrite;
$paginate_base = get_pagenum_link(1);
if(strpos($paginate_base, '?') || ! $wp_rewrite->using_permalinks()){
  $paginate_format = '';
  $paginate_base = add_query_arg('paged','%#%');
} else {
  $paginate_format = (substr($paginate_base,-1,1) == '/' ? '' : '/') .
  user_trailingslashit('page/%#%/','paged');
  $paginate_base .= '%_%';
}
echo paginate_links(array(
  'base' => $paginate_base,
  'format' => $paginate_format,
  'total' => $wp_query->max_num_pages,
  'mid_size' => 1,
  'current' => ($paged ? $paged : 1),
  'prev_text' => '＜',
  'next_text' => '＞',
)); ?>

これが一般的な一覧ページでのページネーションの記述です。
この場合、2ページ目を表示するときにはページ遷移が発生します。
　
さて今回は、めったにないケースですが、投稿の詳細ページのサイドバーなどに最新投稿10件とかを表示し、そのサイドバーの投稿一覧内だけでページネーションもしたいケースについて考えます。
このケースでは、本文部分はそのままにしておきたいのでページ遷移はさせないようにしたいですよね。
ページ遷移させないようにするなら、まあAjaxを使って非同期で次の10件を取ってくるやり方が王道ではあります。
ただ、これは少し難易度が上がるので、今回は少し要領よくやってしまう方法についてご紹介します。

その方法とは、投稿全件取得してしまって、最初は最新の10件だけ表示しておき、ページネーションリンクが押されたら次の10件を表示するようにする方法です。
これを実装するにあたり使うのが、jQueryプラグイン「paginathing.js」。
これを使うと、投稿を全件取得しておいて、設定した件数で分割してページネーション表示させるなんてことができます。
　
まず、paginathing.min.js をダウンロードしましょう。
Githubに上がっているのでここから取りましょう。
paginathing.js
ダウンロードしたpaginathing.min.jsを好きなディレクトリに収め（ここではjsフォルダに収めることとします）、jQueryと一緒に参照します。
jQueryは3.3.1で実際に動くのを確認していますが、他のバージョンでも動くと思います（1系でも動くようです）。
　
header.phpなど

<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="js/paginathing.min.js"></script>
<script>
$(function () {
  $('.js-pagination').paginathing({ //親要素のclassを記述
    perPage: 10, //10件ずつ
    prevNext: true,
    firstLast: false,
    prevText: '＜',
    nextText: '＞',
    containerClass: 'side-pagination-container', //この辺のクラスは自由に設定
    ulClass: 'pnavi', //この辺のクラスは自由に設定
    activeClass: 'current', //この辺のクラスは自由に設定
  })
});
</script>

これで準備OK。
表示させたい箇所に次のように記述します。

<?php
$posts = get_posts(array( //メインループではないのでget_postsにします
  'posts_per_page' => -1 //全件取得してしまいます
));
$html = '<ul class="js-pagination">';
foreach ($posts as $post){
  $html .=  '<li>
    <a href="'.get_the_permalink($post->ID).'">'.get_the_title($post->ID).'</a>
  </li>';
}
$html .= '</ul>';
echo $html;
?>

最新の10件が表示され、ページネーションリンクをクリックすると次の10件が表示されるページネーションのできあがりです。
　
投稿を全件取得する処理なので、一覧に画像を表示させたい場合などは重くなる可能性があり、おススメできません。画像を表示させたい場合は、普通にAjaxを使って実装するのが良いと思います。
あくまでも、王道でない、亜流の、しかし手っ取り早く、ページ遷移しないページネーションを実装する方法でした。

関連記事:

functions.phpでカスタム投稿とカスタムタクソノミーを作成する方法 イベントカレンダーをつくる 一覧ページの記事の並び順を複数のカスタムフィールドの値で制御する 記事の表示順をカスタムフィールドの値で制御する 親ページがある投稿のIDのリストを取得する メモリエラーの解決 ページネーションのある投稿一覧ページで、最新の投稿１件だけレイアウトを変える 固定ページにページネーション機能を持たせる トップページに設定した固定ページでページネーションする カスタムフィールドを含む記事レコードの一括インポート アドバンストカスタムフィールドの複数選択チェックボックスの値をCSVインポートする ウィジェットをショートコードにして任意の場所で表示する カテゴリページの投稿一覧の取得条件をカテゴリごとに変える 人気記事を取得・表示するプラグイン「WordPress Popular Posts」のカスタマイズ 言語設定が「英語」のブラウザからのアクセスの時、英語ページに強制的にリダイレクトさせる プラグインなしで多言語サイト（英語サイトなど）の作り方 【頻出】よく使う便利なテンプレートタグ一覧【WordPress入門】 WordPressカスタマイズ上級編その２（WebAPI） Vue.js を使って WP REST API で取得した他サイトの投稿データを自サイトに表示する 管理画面を使わず、Vue.js と WP REST API を使って、Webページから直接記事データ等を更新する WP REST API でアドバンストカスタムフィールドの値を取得する WordPress製 売上管理システム （専用テーマ販売）の事例 予約システム クラウドソーシング オンラインスクール WordPressカスタマイズ上級編その１（関数）
,,,