【wordpress・JS】トップページで記事を次から次へと読み込む方法

wordpressでトップページにカスタム投稿の一覧を用意して「もっと見る」をクリックしたら記事の続きがどんどん表示されるって機能をつけたかったときの備忘録

必要なもの

jQueryのプラグインautopager.jsを使う

githubからダウンロードできる

「jquery.autopager-1.0.0.js」をダウンロードして読み込み

ソースコード

基本的に以下を参考にしてる
ただ、うまく動かなかったので一部修正してる

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

WordPressでjquery.autopagerを使用した一覧ページを作る

※トップページに固定ページに設定している時はfunctions.phpにも必要な記述があるので注意

<section id="article-list">
<?php
	$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
	$args = array(
	    'orderby' => 'date',
	    'order'   => 'DESC',
	    'paged' => $paged,
		'post_type' => 'work',
	);
	$article_lists = new WP_Query($args);
?>
<?php if ($article_lists->have_posts() ) : ?>
<?php while ($article_lists->have_posts() ) : $article_lists->the_post(); ?>

	<?php the_title(); ?>

<?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() ?>/image/loading.gif" alt="読み込み中"  width="29" height="29">
		</center>
	</div>
<?php }?>

<script>
jQuery(function($){
	var maxpage = <?php echo $article_lists->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');
	        	console.log(next.url);
	        if(next.url == null){//一番最後の時
	    		$('#next a').hide();// more リンクを隠す
	        }else{
				var url = next.url.split('?');
				url = url[0].split('/');
				var nextpage = url[url.length-2];//後ろから2番目(数字)を取得
	        }
	    }
	});

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

参考サイトがurl[url.length-1]ってなってたんだけど空の要素取得してたのでurl[url.length-2]に変更してる
url[url.length-2]で最後から2番目の要素を取得するようにしてる

JavaScript で配列の最後の要素を取得するもう一つの方法

上手くいかなかった部分のまとめ

固定ページでページングを利用するためにfunctions.phpに記述

固定ページページング機能を利用するためにはそれ用の記述を書く必要があるみたい

add_action( 'parse_query', 'my_parse_query' );
function my_parse_query( $query ) {
  if ( ! isset( $query->query_vars['paged'] ) && isset( $query->query_vars['page'] ) )
    $query->query_vars['paged'] = $query->query_vars['page'];
}

WordPressで固定ページにページング機能をもたせる方法

【wordpress】トップページでページ送りをする時にはまったこと

split()で値がないとエラーになる

参考サイトのをコピペしたらエラー出して、最後のページの時に「もっと見る」ボタンが隠れなかった
調べたら文字列を分割するsplit()は値がないとエラーを吐くみたい
なので

if(value == null){
	//値がないとき
}else{
	//値があるとき
}

ってな風に条件分岐させないといけなかった