無限スクロールを実装する方法【WordPress】

この記事の前提条件

対象: WordPress + JavaScript
難易度: ★★★
所要時間: 約20分

記事一覧の下部までスクロールすると、ページ送りボタンを押さなくても自動的に次の記事が読み込まれる「無限スクロール」。SNSのタイムラインでおなじみのUIですが、WordPressで自作する場合の考え方を紹介します。

目次非表示

全体の仕組み: REST APIで追加記事を取得する
「スクロールが下端に近づいた」判定にはIntersection Observerを使う
まとめ

全体の仕組み: REST APIで追加記事を取得する

実装の骨組みはシンプルです。WordPressに標準搭載されているREST APIを使い、JavaScript側からページ番号を指定して記事データを取得し、HTMLを組み立てて末尾に追加していきます。

fetch(`/wp-json/wp/v2/posts?page=2&per_page=10`)
  .then(response => response.json())
  .then(posts => {
    posts.forEach(post => {
      const html = `<article><h2>${post.title.rendered}</h2></article>`;
      document.querySelector('.post-list').insertAdjacentHTML('beforeend', html);
    });
  });

テーマファイルの改修なしに、WordPress標準のREST APIエンドポイント(/wp-json/wp/v2/posts)からJSON形式で記事データを取得できるのがポイントです。

「スクロールが下端に近づいた」判定にはIntersection Observerを使う

「スクロール量」を都度計算して監視する古い実装は、頻繁に処理が走ってしまいパフォーマンスに悪影響が出やすいため、現在はIntersectionObserverという「特定の要素が画面内に入ったかどうか」だけを効率よく監視するAPIを使うのが標準的です。

const observer = new IntersectionObserver((entries) => {
  if (entries[0].isIntersecting) {
    loadNextPage(); // 一覧の末尾にある目印要素が見えたら次のページを読み込む
  }
});

observer.observe(document.querySelector('.load-trigger'));

記事一覧の一番下に、目印となる空のdiv要素(.load-trigger)を置いておき、それが画面内に入ったタイミングで次のページを読み込む、という仕組みです。

⚠️ 無限スクロールはSEO・UX面のデメリットも理解した上で導入する

無限スクロールは、フッターにたどり着けない(お問い合わせや利用規約へのリンクが埋もれる)、ブラウザの「戻る」ボタンで元の位置に戻れない、特定の記事だけをURLで共有しづらいといったデメリットもあります。SNSのタイムラインのような「延々と見続けてもらう」コンテンツには向いていますが、ブログの記事一覧のような「目的の記事を探して読む」用途では、従来のページネーション(ページ送り)の方が使いやすいケースも多いです。導入前に、本当にこのサイトに合っているか検討することをおすすめします。

まとめ

WordPress標準のREST API(/wp-json/wp/v2/posts)から記事データを取得して追加していく
「下端に近づいた」判定にはIntersectionObserverを使うのが今の標準
フッターに届かない・戻れないなどのデメリットもあるため、サイトの性質に合っているか検討してから導入する