autopager.jsが使えなくなった時のための準備

© frogra.jp

autopager.jsが使えなくなった時のための準備

autopager.jsは画面遷移なしで記事を読み込める便利なプラグインです。WordPressとの相性もよいですね。

ただ、もう大分更新がされていないので、jQueryのバージョンアップにともなっていつ使えなくなるかわかりません。

今のうちに自分のjQueryプログラムでも対応できるよう準備をしておきます。

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

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

 

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

 

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

ベースとなるコード

まずはベースとなる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>