スクロールするとページ遷移無しで次ページを自動読み込みするjQueryプラグイン「jQuery.autopager」を導入[WordPress]

@Mori2ndです。いろいろなブログで見るようになった「下にスクロールしていくとページ遷移無しで次ページを自動で読み込む」機能。

トップページで次々と表示されていくのがとても快適だったので、カスタマイズ好きな私としてはさっそく導入にふみきりました!

スポンサードリンク

スクロールするだけで自動的に次々表示されるって快適!

次々に読み込む機能ですが、「jQuery.autopager」というjQuery用のプラグインを使えば簡単に実現できるんですね。

jQuery.autopager: Automatic paging plugin for jQuery
スクロールするだけで次ページのコンテンツを自動で読み込み、継ぎ足せるようにするjQueryプラグイン

使う場合はjQuery用のプラグインファイルをダウンロードして、ブログのサーバーにアップロードします。

ちなみにダウンロードできるファイルは2種類あるようですが、私は圧縮版と記載してあるほうにしました。

jQuery.autopager - Download

アップロードできたら、ヘッダ部分にjQueryとautopagerの読み込み設定を記述します。(jQueryはGoogleAPIでの例です。)

{サーバーの設置場所}はautopagerのファイルを置いた場所のURLです。

jQueryでの動作部分もヘッダーに記述します。

オプションがいろいろ設定できるみたいですが、自動で読み込むための簡単な設定だけしました。

設定したオプション

  • autoLoad・・・自動で読み込む場合は「true」
  • content・・・読み込んで表示する記事部分。idやclassの名前を設定します。
  • link・・・動作させる部分。idやclassの名前を設定します。ここにリンクを指定するとcontentで読み込んだ記事部分が表示されます。

オプションcontentは繰り返し表示したい部分に、新しく「#entry-list」というidのdivで囲み、それを設定しました。
(「#content」の部分でもよかったんですが、不要な部分もあったので、別で指定しました。)

オプションlinkについては、次の投稿リンクを読み込むところがトップページでのループ部分(loop.php)にあったので、それをマネして記述。
(next_posts_link()で次のページの投稿リストが読み込めます。)

それをdivで囲んで、classにオプションのlinkで指定したものをセットしているだけです。以下そのコード。

linkで読み込む部分が最初わかりずらかったんですが、なんとか設置できました。

おわりに

以前設置した「トップに戻る」ボタンと自動で次ページを読み込む機能を使うと、記事を探すのがいっそう捗るようになりました。

ぜひ試してみていただきたいですね!

via: ごりゅご.com

AD: 月額1,000円(税抜)から、高速・多機能・高安定レンタルサーバー『エックスサーバー』

スポンサードリンク