WordPressでjQuery.autopagerを使うときに最終記事の場合は「次へ」のリンクを表示しないようにする方法

スクロールするだけで次ページのコンテンツを自動で読み込み、表示してくれるjQueryプラグインがjQuery.autopagerです。

jQuery.autopager

ちょっとおしゃれなWEBサイトのブログ、ECサイトなどでよく見かけますが、スクロールすると自動的に次のページが表示されるので、たくさんページがあって、それをたくさん見てもらいたいというときに便利なプラグインです。

ブログや、商品一覧などで使われているのをよく見かけます。

今回、私の関わっているWordPressで構築したサイトでもこのプラグインを使うことになったのですが、１つだけ問題が発生。

「最後の記事の下にも【次へ】のリンクが設定されてしまう」

この問題の解決法を探してみたのですが、なかなか見つからず、ようやくたどり着くことができましたので、シェアさせていただきます。

$wp_query->max_num_pagesで最大ページ番号を取得
問題を解決するには凝り固まった頭をほぐす柔軟性が必要

$wp_query->max_num_pagesで最大ページ番号を取得

WordPressのフォーラムに解決法が紹介されていましたので、その一部を転載します。

以下、index.phpなど、WordPressで投稿記事用のテンプレートファイルに、直接JavaScriptを記述し、その一部をPHP側で取得した変数を使って制御します。

<?php
	if ( have_posts() ) :
?>
		<div class="entryList"><!-- autopagerで読み込むコンテンツ -->
			<?php while ( have_posts() ) : the_post(); // ループスタート ?>
				各投稿
			<?php endwhile; ?>
			<script type="text/javascript">
			/* <![CDATA[ */
				jQuery(function() {
					$.autopager({
						autoLoad: false,
						content: '.entryList',
						link: '.ajaxLoad a',
						load: function(current, next) {
							if( current.page >= <?php echo $wp_query->max_num_pages; ?> ){ $('.ajaxLoad').hide(); }
						}
					});
					$('.ajaxLoad a').click(function() {
						$.autopager('load');
						return false;
					});
				});
			/* ]]> */
			</script>
		</div><!-- // .entryList -->
		<div class="ajaxLoad">
			<?php next_posts_link('次へ'); ?>
		</div>
		<?php else : ?>
			投稿がありません
	<?php endif; ?>
<?php wp_reset_query(); ?>

ポイントは、jQueryでautopagerを呼び出す処理の部分。

 load: function(current, next) {
                            if( current.page >= <?php echo $wp_query->max_num_pages; ?> ){ $('.ajaxLoad').hide(); }
                        }

ここの部分で、WordPressの関数$wp_query->max_num_pagesを使って、最大ページ番号を取得し、そのページまで表示したら、「次へ」のリンクの部分のセレクタをhide（隠す）するという方法です。