WordPress に Google 風の無限スクロールを実装

Infinite Scrollで無限スクロールを実装する方法

福岡在住ウェブデザイナー。 WordPress のカスタマイズを、「見やすさ」と「使いやすさ」にこだわり紹介しています。

Google が、モバイル検索結果で無限スクロールを導入しました。

これまでは「次へ」ボタンをタップすると、 2 ページ目に移動していました。

これからは「もっと見る」ボタンをタップすると、ページを遷移せず検索結果の続きが表示されます。

この Google に似た無限スクロールを、このサイトのトップページやカテゴリーページで導入しました。

その導入方法のご紹介です。

実際の動作は、このサイトのトップページ、または下の動画でご確認ください。「もっと見る」ボタンをクリック・タップすれば、次のページが読み込まれます。

Infinite Scroll を使用

無限スクロールを導入する際には、下記の 2 つを考慮しないといけません。

  • クローラーに配慮する
  • ユーザーの使い勝手に配慮する

クローラーは無限スクロールが苦手です。なので、「検索エンジンとの相性を考慮した無限スクロールのベストプラクティス」に沿う必要があります。

また、自動的に無限スクロールが始まると、サイトの使い勝手が悪くなる恐れがあります。「フッターを見たいのに、見られない!」と私は何度も思ったことがあります。

この 2 つともしっかりと考慮できるのが、 JavaScript ライブラリの Infinite Scroll

しかも、設置方法が簡単なので、サイト運営者にも優しい JavaScript ライブラリです。

Infinite Scroll の読み込み

最初にすることは、 Infinite Scroll の設置と読み込みです。

テーマフォルダの直下に、 infinite-scroll.js ファイルを作成します。

作成した infinite-scroll.js ファイルに、 infinite-scroll.pkgd.min.js をそのまま全てコピペをします。

あとは作成した infinite-scroll.js をサイトで読み込みます。このサイトでは、下記のコードを使い </body> タグ直前で読み込みました。

<script src="<?php echo get_stylesheet_directory_uri(); ?>/infinite-scroll.js"></script>

上記のコードは、子テーマの使用を想定しています。

「もっと見る」ボタンを作成

次にすることは、無限スクロールを開始する「もっと見る」ボタンの作成です。

テーマフォルダの直下に、 infinite-scroll.php ファイルを作成します。

作成した infinite-scroll.php ファイルに、下記のコードを追加します。

<?php

// 現在のページ数
global $paged;
if( empty( $paged ) ) $paged = 1;
    
// 総ページ数
global $wp_query;
$pages = $wp_query -> max_num_pages;
if( !$pages ) {
    $pages = 1;
}

// ページが1ページしかない場合は出力しない・最後のページでも出力しない
if( $pages != 1 && $paged < $pages ) {
    echo ' 
    <button id="more-button" type="button">もっと見る</button>
    <div class="scroller-status">
        <div class="infinite-scroll-request"></div>
        <p class="infinite-scroll-last">これ以上は記事がありません</p>
        <p class="infinite-scroll-error">読み込むページがありません</p>
    </div>
    ';
}

ページが 1 ページしかない場合には、ボタンは表示しないようにしています。また、最後のページでもボタンは表示されません。読み込むページがない時は、ボタンはいりません。

18 行目から 22 行目の部分は、Infinite Scroll のオプションの status を使うためのもの。

status を使うことで、最後の記事の下に「これ以上は記事がありません」と表示されます。

最後の記事の下に表示される「これ以上は記事がありません」

読み込むページがない場合には、「読み込むページがありません」と表示されます。最後のページでもページネーションに「次へ」などがある場合に、この指定が活きてきます。

これ以上読み込むページがない場合に表示される「読み込むページがありません」

テンプレートにボタンを設置

作成した infinite-scroll.php ファイルを、記事一覧を呼び出しているテンプレートのお好きな場所に設置します。

設置するためのコードは下記のとおりです。

<?php get_template_part( 'infinite-scroll' ); ?>

テーマによって、記事一覧を呼び出しているテンプレートは違います。 Simplicity であれば list.php 。 Cocoon であれば tmp/list.php です。

最適なボタンの設置場所はサイトによって異なりますが、おすすめはページネーションの上。記事一覧の下に広告を設置している場合は、特におすすめです。「もっと見る」ボタンの上に、広告が常に表示されるのは大きいはず。

JavaScript で設定

次は Infinite Scroll の設定です。 JavaScript を追加するファイルに、以下のコードを追加します。

jQuery( document ).ready( function($) {
    if( $( '.next a' )[0] ) {
        $( '#list' ).infiniteScroll({
            append: '.entry',
            path: '.next a',
            hideNav: '.pagination',
            button: '#more-button',
            scrollThreshold: false,
            status: '.scroller-status',
            history: 'push',
        });
    }
});

1 行ずつご説明します。

まず 3 行目の #list は、記事一覧を囲む要素を指定します。例えば、記事一覧の HTML が下記のものだとします。

<div id="list">
    <article class="entry"></article>
    <article class="entry"></article>
    <article class="entry"></article>
    ...
</div>

各記事の <article><div id="list"></div> が囲んでいます。この要素の id または class を指定します。

4 行目の .entry は、各記事(上記の HTML では <article> )の id または class を指定します。この append に指定した要素が、無限スクロールで読み込まれたページに追加されていきます。

2 行目と 5 行目の .next a は、次のページへの URL を指定します。 URL は、ページネーションから拾います。例えば、ページネーションの HTML が下記のものだとします。

<ul class="pagination">
    <li><a href="最初のページのURL"></a></li>
    <li><a href="現在のページの前のURL"></a></li>
    <li>現在のページ数</li>
    <li><a href="現在のページの次のURL"></a></li>
    <li><a href="現在のページの次の次のURL"></a></li>
    ...
    <li class="next"><a href="次のページのURL"></a></li>
    <li><a href="最後のページのURL"></a></li>
</ul>

次のページの URL である.next a ( 8 行目)は、たいてい「次へ」とか「 > 」で表示されている部分です。この <a> タグの id または class を指定します。

6 行目の .pagination は、ページネーション(上記の HTML では <ul> )の id または class を指定します。 hideNav に指定することで、ページネーションが非表示になります。

7 行目から 10 行目は変更する必要はありません。

Infinite Scroll の詳細な設定は、 Options で説明されています。

CSS で装飾

あとは「もっと見る」ボタンなどの CSS を指定すれば終わりです。

CSS の一例は下記のとおり。サイトによって、 CSS はだいぶ違うはずです。

#more-button {
  background: #eee;
  height: 56px;
  margin: 40px 0 0;
  width: 100%;
}

.scroller-status {
  display: none;
  margin-top: 40px;
}

.infinite-scroll-request {
  animation: scroll-request 1.1s infinite linear;
  border: 4px solid #00b8d4;
  border-left: 4px solid #fff;
  border-radius: 50%;
  height: 48px;
  margin: auto;
  width: 48px;
}

@keyframes scroll-request {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.infinite-scroll-last,
.infinite-scroll-error {
  color: #757575;
  text-align: center;
}

13 行目から 30 行目までは、ローディングアイコンの指定です。ローディングアイコンは、「もっと見る」ボタンをクリック・タップした後に表示されます。

ローディングアイコンの例

ローディングアイコンの CSS は、 Single Element CSS Spinners をご参考にするといいかもしれません。

各ローディングアイコンの下にある < View Source > をクリックすると、 CSS が出てきます。 CSS のセレクタの .loader.infinite-scroll-request に変更するだけで真似できます。


Infinite Scroll は、数年前からサイトに無限スクロールを導入するための代表的な JavaScript ライブラリでした。ただ、数年前より、大幅に進化しています。素晴らしい。

Google 風の無限スクロールを簡単に導入できる上に、私は動作にも大満足です。ユーザー体験の向上を期待できます。

また、「もっと見る」ボタンをクリック・タップしない、自動的な無限スクロールにも対応できます。

無限スクロールを導入したいなとお考えの方は、 Infinite Scroll に頼ってはいかがでしょうか。

Facebook ページにいいね!をする
Twitter でフォロワーになる

シェアする

URL をコピーする