WordPressで投稿一覧などを表示する際、通常のページネーションはページの再読み込みが発生します。しかし、ユーザー体験を向上させたい場合、Ajaxを使って非同期で次ページの投稿を読み込む方法が効果的です。本記事では、Ajaxによるページネーションの実装手順を詳しく解説します。
Ajaxページネーションの概要とメリット
Ajaxページネーションとは、ユーザーが「次へ」などのページリンクをクリックしたときに、画面全体を再読み込みするのではなく、一部だけ(投稿一覧など)を非同期で読み込む仕組みです。
これにより、
- ページ遷移がスムーズになる
- サイト全体の読み込み負荷を軽減できる
- UIがモダンに感じられる
HTML構造と初期ループの準備
まず、投稿一覧とページネーションを含む基本構造を作成します。
<div id="ajax-post-list">
<?php
$paged = get_query_var('paged') ? get_query_var('paged') : 1;
$args = array(
'post_type' => 'post',
'paged' => $paged,
'posts_per_page' => 5,
);
$query = new WP_Query($args);
if ($query->have_posts()) :
while ($query->have_posts()) : $query->the_post();
echo '<article><h2>' . get_the_title() . '</h2></article>';
endwhile;
echo '<div class="pagination">';
echo paginate_links(array(
'total' => $query->max_num_pages,
'current' => $paged,
'format' => '?paged=%#%',
'prev_text' => '« 前へ',
'next_text' => '次へ »',
));
echo '</div>';
endif;
wp_reset_postdata();
?>
</div>
JavaScriptによるAjax処理の追加
次に、クリックイベントをフックしてAjax通信を行うJavaScriptを設置します。
jQuery(document).ready(function ($) {
$(document).on('click', '.pagination a', function (e) {
e.preventDefault();
const link = $(this).attr('href');
$('#ajax-post-list').append('<div class="loading">読み込み中...</div>');
$.ajax({
url: link,
type: 'GET',
success: function (res) {
const newPosts = $(res).find('#ajax-post-list').html();
$('#ajax-post-list').html(newPosts);
},
});
});
});
functions.phpでAjax用のスクリプトを読み込む
先ほどのJavaScriptは、テーマのfunctions.php
で読み込むように設定します。
function enqueue_ajax_pagination_scripts() {
wp_enqueue_script('ajax-pagination', get_template_directory_uri() . '/js/ajax-pagination.js', array('jquery'), null, true);
}
add_action('wp_enqueue_scripts', 'enqueue_ajax_pagination_scripts');
注意点:URLの履歴とSEO
Ajaxによるページ切り替えはURLが変わらないため、ブラウザの戻るボタンで操作できなかったり、Googleにクロールされない可能性があります。これを解決するには、
history.pushState()
でURLを書き換える- <noscript>タグで通常のページネーションも設置しておく
などの工夫が必要です。
まとめ
Ajaxによる非同期ページネーションは、WordPressサイトのUXを向上させる手段として非常に有効です。本記事で紹介した方法は、比較的シンプルな構成で実現可能なので、ぜひ導入を検討してみてください。
ご希望があれば、カスタム投稿タイプ対応やURL書き換え対応など、より高度な実装も紹介できます。