【WordPress】autopager.jsのような動きを実装

ページングをajaxで。

autopager.jsは画面遷移なしで記事を読み込める便利なプラグインです。
ただ、もう大分更新がされていないので、jQueryのバージョンアップにともなっていつ使えなくなるかわかりません。
今のうちに自前のjQueryプログラムでも対応できるよう準備をしておきます。

autopager.jsの処理の重要な部分

autopager.jsをかなりざっくり必要な部分を取り出すと、下記になります。

getで次のページのURLからデータをもってくる
もってきたデータからセレクタを使い記事部分を抜き出す
ついでにさらに次のページのURLを抜き出す
抜き出した記事を今の記事にappendする
これをくりかえす

要点はこれだけなので、これらを個別に対応していきます。

ベースとなるコード

まずはベースとなるWordPressのコードを用意します。下記をarchive.php等に設定しておきます。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
  </head>
  <body>
    <ul class="articles">
      <?php while (have_posts()) : the_post(); ?>
      <li class="article">
        <a href="<?php the_permalink();  ?>"><?php the_title(); ?></a>
      </li>
      <?php endwhile; ?>
    </ul>
    <div id="next_page">
      <a href="<?php echo next_posts($wp_query->max_num_pages); ?>">次の記事</a>
    </div>
  </body>
</html>

1. getで次のページのURLからデータをもってくる

jQueryのgetを使って次ページの内容（HTML)をごっそり取得します。次のページのURLは「$(‘#next_page a’).attr(‘href’)」で取得します。

$.get($('#next_page a').attr('href'), function(res) {
  //読み込み後の処理。resにはHTMLがはいる
});

2. もってきたデータからセレクタを使い記事部分を抜き出す

HTMLを取得したら、HTMLを一度jQueryオブジェクトにしてしまい、その中から記事部分「class=”article”」を抜き出します。

$.get($('#next_page a').attr('href'), function(res) {
  //読み込み後の処理。resにはHTMLがはいる
  var $content = $('<div/>').append(res);
  var $items = $content.find('.article');
});

3. ついでにさらに次のページのURLを抜き出す

次のページのHTMLを取得したので、そのHTMLにはさらに次のページのURLが含まれています。なのでそのURLを取得しておきます。

var next_url = '';
$.get($('#next_page a').attr('href'), function(res) {
  //読み込み後の処理。resにはHTMLがはいる
  var $content = $('<div/>').append(res);
  var $items = $content.find('.article');
  next_url =  $content.find('#next_page a').attr('href');
});

4. 抜き出した記事を今の記事にappendする

$itemsに次のページの記事がはいっているので、ページ上の「class=”articles”」にappendします。

var next_url = '';
$.get($('#next_page a').attr('href'), function(res) {
  //読み込み後の処理。resにはHTMLがはいる
  var $content = $('<div/>').append(res);
  var $items = $content.find('.article');
  next_url =  $content.find('#next_page a').attr('href');
  $('.articles').append($items);
});

5. これをくりかえす

これで基本はできたので、あとは次の記事リンクでつぎつぎ読み込めるよう全体を調整します。

$('#next_page a').click(function(){
  loadArticles();
  return false;
});
 
var next_url = '';
 
function loadArticles() {
  if(next_url == '') {
    next_url = $('#next_page a').attr('href');
  }
  $.get(next_url, function(res) {
    var $content = $('<div/>').append(res);
    var $items = $content.find('.article');
    $('.articles').append($items);
    next_url =  $content.find('#next_page a').attr('href');
    if(!next_url) {
      $('#next_page a').hide();
    }
  });
}

後は自分好みにアレンジしてください。

ロード中のgifを追加したい場合は、次の記事リンクをクリックしたらgifを表示、HTMLを読み込んだらgifを非表示などで対応できます。

クリックせずにスクロールで自動読み込みしたい場合はスクロールイベントで読み込み処理を発火すればよいです。

最後にコード全体を下記に載せておきます。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
</head>
<body>
  <ul class="articles">
    <?php while (have_posts()) : the_post(); ?>
    <li class="article">
      <a href="<?php the_permalink();  ?>"><?php the_title(); ?></a>
    </li>
    <?php endwhile; ?>
  </ul>
  <div id="next_page">
    <a href="<?php echo next_posts($wp_query->max_num_pages); ?>">次の記事</a>
  </div>
  </body>
  <script>
    var next_url = '';
    $('#next_page a').click(function(){
      loadArticles();
      return false;
    });
 
    function loadArticles() {
      if(next_url == '') {
        next_url = $('#next_page a').attr('href');
      }
      $.get(next_url, function(res) {
        var $content = $('<div/>').append(res);
        var $items = $content.find('.article');
        $('.articles').append($items);
        next_url =  $content.find('#next_page a').attr('href');
        if(!next_url) {
          $('#next_page a').hide();
        }
      });
    }
  </script>
</html>