Reras-factory

jQuery.autopagerを使ってWordPressに無限スクロールを実装する方法

このブログでも採用している記事一覧の無限スクロールを実装する方法を紹介します

Ajaxを使う利点

このjQuery.autopagerはAjaxと呼ばれる技術を使ったもので、Ajaxは『Asynchronous Javascript+XML』の略だそうです。ページ内の要素の表示やHTTPリクエスト、レスポンスを非同期に処理し表示の高速化を図る際に有効な技術です。簡単に言うと、html上で外部のcssとjavascriptを読み込む処理をするときにAjax無しではcssの読み込みが終わってからjavasctiptを読み込み、その後ページの描画が行われますが、Ajaxで非同期処理させると、htmlを読み込んだ時点で描画処理が開始され、cssやjavasctiptが読み込まれ次第、スタイルやスクリプトを反映させる、と表示が高速化できます。このブログでも非同期読み込みを行っているので、ページ自体はすぐに表示されますが、一番サイズが大きいWebフォントの読み込みが終わるまで文字が描画されません。描画の完了までの時間は変わらずとも、少しでもページを表示することでユーザーの離脱率を下げることができるのではないでしょうか。

無限スクロールの仕組み

Ajaxは上記の他にも様々なことができ、無限スクロールではjavascriptを使ってページの一部をリアルタイムに書き換える機能を使っています。html上の指定のクラスのみをロードさせ、ヘッダーやサイドバー、フッターなどはそのままに、記事エリアのみを更新している訳です。

実装

ヘッダー

まずはこちらのプラグインをダウンロードし、適当なディレクトリに格納します。
続いてヘッダーもしくはフッターに以下のコードを入力して下さい

<script src="<?php echo get_template_directory_uri() ?>/jquery.autopager-1.0.0.js"></script>
//  無限スクロール最大ページ数取得
var maxpage = <?php echo $wp_query->max_num_pages; ?>; 
$('#loading').css('display', 'none');
$.autopager({
    content: '.post',// 読み込むコンテンツ
    link: '#next a', // 次ページへのリンク
    autoLoad: false,// スクロールの自動読込み解除
    start: function(current, next){
      $('#loading').css('display', 'block');
      $('#next a').css('display', 'none');
    },
 
    load: function(current, next){
        $('#loading').css('display', 'none');
        $('#next a').css('display', 'block');
        if( current.page >= maxpage ){ //最後のページ
            $('#next a').hide(); //次ページのリンクを隠す
        }
    }
});
$('#next a').click(function(){ // 次ページへのリンクボタン
    $.autopager('load'); // 次ページを読み込む
    return false;
});

1行目で先程のスクリプトをロードし、5行目から12行目が無限スクロールの設定です。contentには記事の一つ一つに設定されているクラスを指定して下さい。autoloadをtrueにすると『次へ』のリンクを押さなくてもロードしてくれます。23行目で実行です。

表示位置

<div id="next">
  <a href="<?php echo next_posts(0, false); ?>">続きを読み込む</a>
</div>

そしてindex.phpの記事表示ループが終わった直後、(end whileの後ろ）にこのコードを挿入します。こちらで定義されているidがスクリプトのlinkに指定されているidと一致していないと動かないので注意して下さい。

ローディングアニメーションを付ける場合

このブログではFontAwesomeのSpinアイコンを使ったローディングアニメーションも実装しています。アニメーションをつけるには以下のコードを利用します。

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<div id="next">
  <a href="<?php echo next_posts(0, false); ?>">続きを読み込む</a>
  <i class="fa fa-refresh fa-spin fa-2x fa-fw" id="loading"></i>
    <span class="sr-only">Loading...</span>
</div>