スクロールするだけで次ページのコンテンツを自動で読み込み、表示してくれるjQueryプラグインがjQuery.autopagerです。
ちょっとおしゃれなWEBサイトのブログ、ECサイトなどでよく見かけますが、スクロールすると自動的に次のページが表示されるので、たくさんページがあって、それをたくさん見てもらいたいというときに便利なプラグインです。
ブログや、商品一覧などで使われているのをよく見かけます。
今回、私の関わっているWordPressで構築したサイトでもこのプラグインを使うことになったのですが、1つだけ問題が発生。
「最後の記事の下にも【次へ】のリンクが設定されてしまう」
この問題の解決法を探してみたのですが、なかなか見つからず、ようやくたどり着くことができましたので、シェアさせていただきます。
$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(隠す)するという方法です。
問題を解決するには凝り固まった頭をほぐす柔軟性が必要
最初は、JavaScript側だけでどうにかしようとしていましたが、最後のページかどうかってどうやってわかるのだろう?
ということになり、これは、WordPress側での処理も必要だなという感じはしていました。
ただ、ソースをきれいにしたいこともあり、JavaScriptは別ファイルに記述してそこで処理をしようと考えてつまづきました。
そうですね、JavaScript内でPHP(WordPress)の機能を呼び出すこのやり方がありました。
行き詰まると、ますます深みにはまってしまって、1つのやりかたにこだわったりしてしまいがちですが、こうやって柔軟性を持って違うアプローチをとることで問題が解決することしばしばです。
今回は、WordPressのフォーラムという初心者であれば、まず最初に訪れるサイトですが、こちらもいろいろ探したあとで、そう言えば、フォーラムが・・・ということでたどり着くことができました。
「柔軟性」大事ですね。
コメント