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側でやっても良いんだと思います。
以上、お試しください！