このサイトでも使用している無限スクロールスプリクト「infinitescroll」ですがバージョンが上がり、一部仕様が変ったようです。
※動作検証はinfinitescroll version 2.0.2、jQuery version 1.11.1で行っています。
※WordPressプラグインは使用していません。
infinitescrollでは追加コンテンツ読み込み時に好きな読み込み画像とテキストを表示できます。この設定を検索していると高確率でASCII.jpのこのページにたどり着くと思います。
このサイトもASCII.jpの説明の通りに設定して無限スクロールを実現してます。
ところが最近、新規に制作しているサイトでこれを実装しようとしたところ、動作しませんでした。どうやらオプションの設定方法が変更になったようで、以下のようにJS部分を記載したところオプションが無事反映されました。
1 2 3 4 5 6 7 8 9 10 11 |
$('.container').infinitescroll({ navSelector: ".nav-previous", nextSelector: ".nav-previous a", itemSelector: ".container .item", loading: { img: '/loading.gif', msgText: '読み込み中表示テキスト', finishedMsg: '全ての読み込みが完了した際に表示するテキスト' } }); |
さて、動いたのですが新規作成サイトでinfinitescrollに関する別の問題が発生しました。新規サイトはWordPressで構築しているのですがinfinitescrollが3ページ目を読み込まないのです。
WordPressのパーマリンク設定は変更していないので試しにURLに/?paged=2を付加して直接2ページ目を表示したところ、2ページ目からは3ページ目が読み込まれましたが今度は4ページ目が読み込まれません。
どうやら自ページの次ページしか表示できなくなっているようです。
その解決策がこちらのサイト(ARKの技術メモ)に記載されていました。
どうやら次のページ番号がURLのどの部分なのかinfinitescrollがわからなくなっているようです。
これもinfinitescrollのオプション設定でinfinitescrollに教えることができるようで、上記の設定を以下のように変更して解決しました。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
path=new Array(); path.push(location.href+'?paged='); path.push(""); $('.container').infinitescroll({ navSelector: ".nav-previous", nextSelector: ".nav-previous a", itemSelector: ".container .item", loading: { img: '/loading.gif', msgText: '読み込み中表示テキスト', finishedMsg: '全ての読み込みが完了した際に表示するテキスト' }, path:path }); |
[tmkm-amazon asin=’479736758X’][/tmkm-amazon]