G&W Design Life

wordpressで無限スクロール

プラグインで簡単に実装できる

いくつか無限スクロールのプラグインがありますが、その中から『PBD AJAX Load Posts』をご紹介。
オリジナルのwebページでも簡単にカスタマイズが可能です。

PBD AJAX Load Postsプラグイン

(1)http://www.problogdesign.com/wordpress/load-next-wordpress-posts-with-ajax/の『here』からダウンロードをします。

null

(2)wp-content → plugins へダウンロードした一式を入れます

(3)wordpressの設定画面に戻り『プラグイン』内の『インストールしたプラグイン』をクリック

(4)『PBD AJAX Load Posts』を有効化にします。

(5)カスタムで制作している場合はデフォルト設定を調整する必要があります。
プラグインに入れた『PBD AJAX Load Posts』フォルダー内の『js』を開きます。

 if(pageNum <= max) {
 // Insert the "More Posts" link.
 // #content箇所は、記事全体を包んでいるIDやclassをに指定する
 $('#content')
 .append('<div class="pbd-alp-placeholder-'+ pageNum +'"></div>')
 .append('<p id="pbd-alp-load-posts"><a href="#">Load More Posts</a></p>');

上部の方にある、記事を包む要素$(‘#content’)を指定し直します。

 //.postに各記事を包んでいるIDやclassを指定
 $('.pbd-alp-placeholder-'+ pageNum).load(nextLink + ' .post',
 function() {
 // Update page number and nextLink.
 pageNum++;
 nextLink = nextLink.replace(/\/page\/[0-9]?/, '/page/'+ pageNum);

記事単位で.postで包まれているので、指定を変更してあげます。
あとはロード前・ロード中・記事の表示が無い場合の文言変更をしたりできます。

表示数を指定

設定画面でどれくらい表示するかを指定できます。

null

プラグインを入れてからは2箇所のDOMを指定して直せば動きますので、気軽に導入できますね!
ただし、無限スクロールのプラグインはどれもコンスタントにメンテナンスがされていないようなので導入には慎重になった方がいいかもしれません!

Profile

エディトリアルデザイン・グラフィックデザインを経て数年前Webデザイナーに転身した30代デザイナーです。現代アートや地域とデザイン、ヒト・モノ・コト全般に興味があり。
イラストを描くのが好き。プログラミングはまだまだわからない事も多く初心者なんでメモ&学習としてこのブログを開設しました。どうぞよろしくお願い致します!

Recent Entries

Category