シングルページの記事詳細を無限スクロールさせる

詳細記事をページスクロールし、一番下まで行くと自動的に次の記事を表示させる方法です。
今回は、ただロードしてくるだけでなく、該当記事の位置に行くとアドレスバーにあるURLも書き換える仕様になります。

下記のサイトを参考に2パターン挑戦してみたのですが、そもそもの作りが悪いからなのか、どちらも意図した動きになりませんでした。

 

そこで、今回は、jquery.autopager というものを使用することにしました。
かなり古くからあるプラグインで、公式?のものは既にサイトがなくなっているのですが、GitHubにForkされたものがあります。

GitHub – sagotsky/jquery-autopager

使い方

これだけで、自動読込機能は動くと思います。
URLの書き換えも、新しい記事を読み込んだ際に書き換わっていると思いますが、ページの上部にスクロールして、前の記事に戻った際は、URLが書き換わることはありません。
なぜなら、このプラグインでは読み込む時にのみアドレスの書き換え処理が動きます。

そこで、コンテンツ位置によって、アドレス書き換え部分は別実装する必要があります。

これで、上下スクロールしても該当記事の所のアドレスになるかと思います。

注意

前記事を取得する get_previous_post() で取得記事が異なる場合、この関数を使う前に WP_Queryなどで詳細ページのクエリ情報を書き換えていないか確認してください。
書き換えていた場合、wp_reset_query() で、リセットしていても順番通りになりませんでした。

そこで、

で、囲ってあげれば、正常な順序となります。

 

  • このエントリーをはてなブックマークに追加
  • Pocket

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください