今回はWordPressの記事一覧ページや、記事詳細ページ( 記事分割も対応 )でスクロールすると次から次へとページが読み込まれる無限スクロールの実装方法について紹介します。
プラグインを使うと簡単に実装できるのでおすすめです。
シンス株式会社のメンバーが更新しているWebデザインギャラリーWow! Worksは無限スクロールを実装しています。( 今回使うプラグインとは別のものですが実装方法はほぼ同じです )
完成イメージはこのようになります。
それではいきましょう！
jScroll 無限スクロールプラグイン
今回使うプラグインはjScrollです。
名前からスクロールしそうですが、プラグイン名がシンプルなので参考記事が見つかりにくいです。
検索するときは、Googleの検索演算子を使って必要な情報を取捨選択してください。
読み込み時のストレスが少なく、動作も軽いのでおすすめのプラグインです。
やり方は簡単で、CDNまたはローカルのファイルを指定して読み込みます。
jQueryを読み込んでから使います。
1 | <script src="https://cdnjs.cloudflare.com/ajax/libs/jscroll/2.4.1/jquery.jscroll.min.js"></script> |
JavaScriptではこんな感じで起動するだけ。
1 2 3 | $(function() { $('無限スクロールさせたいコンテンツを囲むクラス名を指定').jscroll(); }); |
実際に使う際のカスタマイズ
では実際に使う際のオプションの設定をみてみましょう。
以下のようなHTMLで進行します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <main> <div class="jscroll"> <article class="content"> <header> <h1>ホームべ・アシ・カリーの日常</h1> </header> <section> <p>今日もパンを焼いた。<br>そう、俺の名はホームべ・アシ・カリー、パンを焼くことが生きがいのしがない旅人さ。</p> </section> <footer> <a class="jscroll-next" href="hogehoge">次の記事へ</a> </footer> </article> </div> </main> |
DOMがレンダリングされている状態で下記の記述をすることで、無限スクロールの完成です。
1 2 3 4 5 6 7 8 | var jscrollOption = { loadingHtml: '読み込み中', // 記事読み込み中の表示、画像等をHTML要素で指定することも可能 autoTrigger: true, // 次の表示コンテンツの読み込みを自動( true )か、ボタンクリック( false )にする padding: 20, // autoTriggerがtrueの場合、指定したコンテンツの下から何pxで読み込むか指定 nextSelector: 'a.jscroll-next', // 次に読み込むコンテンツのURLのあるa要素を指定 contentSelector: '.jscroll' // 読み込む範囲を指定、指定がなければページごと丸っと読み込む } $('.jscroll').jscroll(jscrollOption); |
「contentSelector」のオプションを指定することで、ヘッダー・フッターはそのままで指定したコンテンツのみ読み込むことが可能です。これにより、無限スクロールっぽくすることができます。
オプションには「callback」もあるので、読み込んだコンテンツ内のJSを再発火できます。広告等を貼っているサイトや、記事にJSが動くコンテンツがあるサイトでも安心です。
静的ではもちろん、WordPress等の動的なサイトでも次のページのURLを動的に変更することで問題なく動きます。
WordPressで使用する際のサンプル
実際に使う際はWordPressなどのCMSと一緒に使うシーンが多いのではないでしょうか。
先ほどのHTMLをsingle.phpを前提に書き換えてみました。
前の記事にどんどん遡るようにリンクを取得しています。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <main> <div class="jscroll"> <?php if ( have_posts() ) :while ( have_posts() ) : the_post(); $prev_post = get_previous_post(); if( !empty( $prev_post ) ) { $prev_post_url = get_permalink( $prev_post->ID ); } ?> <article class="content"> <header> <h1><?php the_title(); ?></h1> </header> <section> <?php the_content();?> </section> <footer> <?php if( !empty( $prev_post_url ) ) { echo '<a class="jscroll-next" href="'.$prev_post_url.'">前の記事へ</a>'; }?> </footer> </article> <?php endwhile; endif; wp_reset_postdata();?> </div> </main> |
これでWordPressでも無限スクロールが可能になりました。
記事の一覧ページでもすることは同じで、次のページのURLを指定すれば問題ありません。
記事詳細ページで記事分割がある場合は、次のページのURLの部分を記事分割のURLに変更すれば動きます。
まとめ
カスタマイズがとてもしやすいプラグインなので、色々と試してみてください。
jScrollは他の無限スクロールプラグインよりもさくさく動いて、次のページを読み込む際も動作が軽い気がするので使っています。
ご使用の際は、利用規約は必ずご確認ください。
