WordPressのブログやメディアサイトで、ページネーションではなく無限スクロールを導入すると、ユーザーの体験が向上します。この記事では、Ajaxを使って無限スクロールを実現する方法を具体的に解説します。
JavaScriptでAjaxリクエストを送信
無限スクロールを実現するJavaScriptを用意します。jQueryを使用して、スクロール時に次の記事を非同期で取得します。
jQuery(document).ready(function ($) {
let currentPage = 1; // 現在のページ
const maxPage = parseInt(ajax_object.max_page); // 最大ページ数
const ajaxUrl = ajax_object.ajax_url; // Ajax URL
// 無限スクロール
$(window).on('scroll', function () {
if ($(window).scrollTop() + $(window).height() >= $(document).height() - 300) {
if (currentPage < maxPage) {
currentPage++;
$.ajax({
url: ajaxUrl,
method: 'POST',
data: {
action: 'load_more_posts',
page: currentPage,
},
beforeSend: function () {
$('#loading-icon').show(); // ローディングアイコンを表示
},
success: function (response) {
if (response) {
$('#post-container').append(response); // 記事を追加
$('#loading-icon').hide(); // ローディングアイコンを非表示
} else {
$('#loading-icon').hide();
}
},
});
}
}
});
});
上記コードでは、スクロール位置がページ下部に近づいたとき、次の記事を取得して表示します。
PHPで記事データを返す
functions.php に以下のコードを追加して、Ajaxリクエストを受け取り、記事データを返す処理を作成します。
function load_more_posts() {
$paged = isset($_POST['page']) ? intval($_POST['page']) : 1;
$query_args = array(
'post_type' => 'post',
'posts_per_page' => 5,
'paged' => $paged,
);
$query = new WP_Query($query_args);
if ($query->have_posts()) {
while ($query->have_posts()) {
$query->the_post();
echo '';
echo '' . esc_html(get_the_title()) . '
';
echo '' . esc_html(get_the_excerpt()) . '
';
echo ' ';
}
}
wp_reset_postdata();
wp_die();
}
add_action('wp_ajax_load_more_posts', 'load_more_posts');
add_action('wp_ajax_nopriv_load_more_posts', 'load_more_posts');
このコードは、指定されたページ番号に基づいて記事データを取得し、HTML形式で返します。
Ajax用のデータを渡す
functions.php に以下のスクリプトを追加して、フロントエンドに必要なデータを渡します。
function enqueue_infinite_scroll_scripts() {
wp_enqueue_script('infinite-scroll', get_template_directory_uri() . '/js/infinite-scroll.js', array('jquery'), null, true);
wp_localize_script('infinite-scroll', 'ajax_object', array(
'ajax_url' => admin_url('admin-ajax.php'),
'max_page' => ceil(wp_count_posts()->publish / 5), // 最大ページ数
));
}
add_action('wp_enqueue_scripts', 'enqueue_infinite_scroll_scripts');
これにより、ajax_object 変数を通じて ajax_url と max_page をJavaScriptに渡します。
HTMLで投稿リストを表示
記事リストを表示するHTMLを用意します。
<div id="post-container">
<?php
$query = new WP_Query(array(
'post_type' => 'post',
'posts_per_page' => 5,
'paged' => 1,
));
if ($query->have_posts()) {
while ($query->have_posts()) {
$query->the_post();
?>
<article class="post">
<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<p><?php the_excerpt(); ?></p>
</article>
<?php
}
wp_reset_postdata();
}
?>
</div>
<div id="loading-icon" style="display: none;">
<p>読み込み中...</p>
</div>
このコードでは、最初の5件の記事を表示し、Ajaxで読み込んだ記事を #post-container に追加します。
スタイルの調整
ローディングアイコンのデザインを追加します。
#loading-icon {
text-align: center;
margin: 20px 0;
font-size: 14px;
color: #555;
}
まとめ
WordPressでAjaxを使った無限スクロールを実装することで、ユーザー体験を向上させることができます。この方法はシンプルながら柔軟性が高く、カスタマイズも容易です。