WordPressカスタマイズ

スクロールするとページ遷移無しで次ページを自動読み込みする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円(税抜)から、高速・多機能・高安定レンタルサーバー『エックスサーバー』

スポンサードリンク

ピックアップ記事

1

AUKEYのUSB充電器「72W ACアダプター PA-Y12」を購入してみました。最大60WのUSB Type-C PD(Power Delivery)対応でワット数の異なるパソコンにもパワフル充電。追加のUSB-Aポート2つでスマホやタブレットの充電にも大活躍。使ってみた感想をご紹介します。

2

iPhoneで格安SIMを使って月額料金を節約したい!でも敷居が高くてわからない。そんな風に考えている人はきっと多いはず。ここではiPhoneで格安SIMを利用するまでの手順・乗り換え方法や注意点など、詳しくご紹介しています。

3

快適なパソコン作業環境を求めて21:9ウルトラワイドモニターを購入してみました。それがLGエレクトロ二クスの「29UM69G-B」29インチです。1枚のディスプレイでスクエアタイプのモニター2枚分の広さを実現。ウィンドウを並べての作業が捗りますね!商品の特徴や使ってみた感想をご紹介します。

4

パソコン内のデータ整理とバックアップ目的でポータブルハードディスクを購入してみました。それがウエスタンデジタルの「WD Elements Portable」です。大容量なのに小さくて収納や持ち運びが楽です。商品の特徴や使ってみた口コミもご紹介します。

5

機種変更時に最適なiPhoneのバックアップ方法をご紹介しています。iCloudバックアップではなく、iTunesの暗号化バックアップから復元することでスムーズにデータ移行できます。各アプリのIDやパスワードも引き継ぐにはこの方法がおすすめですよ。詳しい手順も解説していますので、ぜひ参考にしてみてくださいね。

-WordPressカスタマイズ
-, ,

Copyright© ディライトモード , 2019 All Rights Reserved.