【コピペでOK】wordpressで画面遷移なしで次のページを読み込む 超絶便利なautopager.js の使い方

wordpressで記事一覧ページを作る際、既存テーマとかだと、ページャー使っているものが多いですよね。

好き嫌いあると思いますが、私は嫌い!

画面遷移なく、次の記事が出てくる方が気持ちが良い。

例えば、記事の一覧の下に、こんなテキストボタンがあって、



そいつをクリックすると、ローディングが動いて、



次の記事一覧をページ遷移なく読み込んで表示してくれるようなやつ。

私がテーマを自作するときに使っているのが、autopager.jsです。
ajaxで動かせる、ちょー便利なjQuery用プラグイン。使い方を簡単に紹介します。

まずはjqueryファイルをダウンロードして、サーバーに設置

まずはこちらのgithubからソースをダウンロードしましょう。

「jquery.autopager-1.0.0.js」というファイルがダウンロードできるので、wordpressを動かしているサーバー内に設置し、headerなどで読み込めるようにしておきます。

記事一覧のhtml サンプルソース

サイトごとに色々あるとは思いますが、例えばこんな感じで記事のリスト表示させるソースを用意します。

<section id="article-list">
$paged = ( get_query_var('paged') ) ? get_query_var('paged') : 1;
$args = array(
'orderby' => 'date',
'order'   => 'DESC',
'paged' => $paged,
);
$article_lists = new WP_Query($args);
?>
<?php if ($article_lists->have_posts() ) : ?>
<?php while ($article_lists->have_posts() ) : $article_lists->the_post(); ?>
<!-----コンテンツ---->
<?php endwhile; ?>
<?php endif; ?>
</section>
<?php if($paged < $article_lists->max_num_pages) {?>
<div class="moreread" id="next">
<a href="<?php echo next_posts($article_lists->max_num_pages, false); ?>">もっと見る</a>
<center>
<img id="loading" src="<?php echo get_template_directory_uri() ?>/loading.gif" alt="読み込み中"  width="29" height="29">
</center>
</div>
<?php }?>

解説

無限に読み込みたい部分をくくっている要素に、idを振ります。

<section id="article-list">

続いて、

$paged = ( get_query_var('paged') ) ? get_query_var('paged') : 1;

これで、現在のページ数を変数に入れます。
このページ数が記事全てのページ数とどっちが大きいかを見て、読み込むかどうかということと、次のページ数は何かを把握するために使います。

<?php if($paged < $article_lists->max_num_pages) {?>
<div class="moreread" id="next">
<a href="<?php echo next_posts($article_lists->max_num_pages, false); ?>">もっと見る</a>
<center>
<img id="loading" src="<?php echo get_template_directory_uri() ?>/loading.gif" alt="読み込み中"  width="29" height="29">
</center>
</div>
<?php }?>

もっと見るとか、ローディング表示の部分がここ。
最初のif文で、現在のページが、サイトの記事全てのページ数と比べて、少なかったら、もっと見るを表示し、同じになったらもっと見るを表示させない、ということをするための条件をつけています。

「もっと見る」リンクは次のページを表示するためにwordpressのメソッド next_posts を使います。
これは、この辺の記事を参考に。

続いて、loading画像部分。
後ほど、jsの解説で詳しく触れますが、読み込み中に表示するやつです。

ローディングのgif画像については、↓このサイトから好きなものをダウンロードするのがオススメです。
https://preloaders.net/en/circular

記事を非同期で読み込むのjqueryとajax

さて、続いて、jQueryです。

<script>
var maxpage = <?php echo $wp_query->max_num_pages; ?>;  // 最大ページ数取得
$('#loading').css('display', 'none'); // ローディング画像は一旦消す。
$.autopager({
content: '#article-list',// 読み込むコンテンツ
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');
}
});
$('#next a').click(function(){ // 次ページへのリンクボタン
$.autopager('load'); // 次ページを読み込む
return false;
});
</script>

jQuery 解説

正直、あまり考えないで良いっちゃ良いですが。。

ソースの下の方にある、

$('#next a').click(function(){ // 次ページへのリンクボタン
$.autopager('load'); // 次ページを読み込む
return false;
});

これが、クリックイベントですね。「もっと見る」をクリックしたら、$.autopager を作動させよ、という命令。

$.autopagerの中身で注目すべき箇所は、

autoLoad: false,// スクロールの自動読込み解除

ですかね。これを、trueにすると、クリックではなく自動で読み込むことができます。

個人的には、スクロールしたらどんどん読み込んでくるのが気にくわないw。
好みでしょうけど。なんか、あの、読者の意思を無視するような感じが嫌なんですね。自分の意思で、次を表示させるかどうかを決めたい! ってのが私の見解。なので、falseにします。

start: function(current, next){
$('#loading').css('display', 'block');
$('#next a').css('display', 'none');
},

これで、ajaxスタート時の挙動を。loading画像を表示させ、「もっと見るボタン」を隠す。

load: function(current, next){
$('#loading').css('display', 'none');
$('#next a').css('display', 'block');
}

記事をロードできたら、loading画像を消して、もっと見るボタンを復活させる。

といった感じです。html側で、ページ数をチェックして、もっと見るボタンを再度表示させなくするようにしていますが、これはjQuery側でやっても良いんだと思います。

以上、お試しください!

あわせて読みたい