ゆめぴょんの知恵ゆめぴょんの知恵
サイト制作、WordPressカスタマイズ、無料アプリ紹介など。海外旅行135ヶ国。知識を知恵にするブログ!

jQueryのautopagerで次ページを画面遷移なしで自動読込みする方法

スマホの次ページの自動読み込みの早さに驚く女性

jQueryプラグインautopagerを使うと、ツイッターなどでも導入されているAJAX機能を簡単に実装できます。ページ最後で次が画面遷移なしで自動読込みされるアレです。私もスマホデザインに応用したので設置方法を紹介します。

ゆめぴょん(@yume_pyon)です。こんちはっ!

最近はクリックしても画面遷移(新しくページが表示されること)せずにすぐ表示されるページが増えてきたと感じています。特にスマホ用サイトやブログでは、少しでも読込み時間を短縮できるよう工夫されています。

私も今年公開したばかりの、このブログのスマホのテーマデザインでは、いくつかこの手法を取り入れています。例えばメニューもjQueryを用いて画面遷移なしで表現しています。下の記事を参考にしてみてください。

【スマホサイト作成】jQueryで簡単!ふわっとメニューのアイコン設置方法【スマホサイト作成】jQueryで簡単!ふわっとメニューのアイコン設置方法

jQueryを使ってカテゴリーなどのナビゲーションメニューをふわっと出現させる方…

スマホテーマのデザインでの利用例

実際に私がこのブログで、jQuery.autopagerを利用した部分です。読み込み中にローディングアイコンを表示するよう応用設定しています。

スマートフォン・デザインで新着と人気記事一覧

記事一覧ページで、新着記事は6〜10件くらいしか表示しないことにしました。それ以上見たい場合はクリックすると次の記事を瞬時に読み込みます。

なお今回は人気記事一覧を多く表示するようしました。その理由・解説は下記事を参考にしてみてください。

【WordPress】スマホサイトの記事一覧を人気順にした理由と方法!SEO対策にもなる【WordPress】スマホサイトの記事一覧を人気順にした理由と方法!SEO対策にもなる

新しいスマホ用デザインのテーマでは、ホームやカテゴリー・タグ・アーカイブなどの記…

jQuery.autopagerでできること

できることはシンプルです。その分、コードも短いし動作も速くなっています。他にも類似プラグインはありますが、私がこれを選んだ1番の理由は動作の軽快さです。

  1. 指定したページを自動読み込みできる
  2. 画面遷移しない
  3. 「自動読み込み」「クリック後読込み」を選択可能
  4. 設定を応用して、ローディングアイコンを表示可能

jQuery.autopagerのダウンロードと設置方法

昨年、私がダウンロードした時にはまだ公開されていたのですが、2014/1/20現在は公開終了となっています。まだこちらの方でダウンロード可能ですが、いつリンク切れになってもおかしくないです。自己責任でご利用下さい。

設置はとても簡単です。ダウンロードしたファイルを解凍して、JavaScriptファイル(拡張子.js)を自分のサーバへアップロードしてください。そしてそのファイルを読み込むと利用可能です。

そのJavaScriptファイルを読み込む位置は、ページ最下部の</body>タグ直前で問題ありません。ただし、jQuery本体を読み込んだ後に設置してください。全てのコードは下でまとめて紹介します。

jQueryの設置方法

私はGoogleのCDNから読み込んでいます。ローカルにダウンロードしてもいいでしょう。

IE8,9など古いブラウザにも対応したい方は、バージョン1.10などを利用してください。スマホ用ならバージョン2の方が軽量でおすすめです。

設置場所は特に支障がなければ</body>閉じタグの直前の方が、少しでも高速化できます。WordPressでは既に設置されている場合も多いため、ソースを確認して重複のないように注意してください。

<script src=”//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js”></script>

jQuery.autopagerとローディングアイコンの設置コード

いろんなローディング・アイコンは下のサイトで簡単に作成できます。私が利用しているアイコンでよければ、下の画像アイコンをダウンロードしてご利用下さい(直リンク禁止)。

ローディング・アイコン animations generator

ローディング・アイコン

実際に私が設置した方法とコードは下のとおりです。ローディングアイコン、autopagerの保存フォルダは適当に変更してください。id、classの名称も自由に変更可能ですが、JavaScriptコードの方も同じにすることを忘れずに。

まず「次の記事を表示!」リンクを表示したい箇所に、下コードをコピペしてください。次ページへのリンクは各自の環境に応じて入力が必要です。

次に</body>閉じタグ直前などに、下コードをコピペしてください。jQueryの重複読込みはしないよう注意してください。

「autoLoad」を「true」にすると自動読み込みできます。私はクリックすると読み込む設定にしたいので、「false」にしています。

WordPressの場合のコード

WordPressを利用してブログを作成している場合は、次のコードを用いれば便利だと思います。読み込む記事一覧などはループの中で使えます。

「次の記事を表示!」リンクを表示したい部分に、下コードをコピペしてください。

フッターや</body>閉じタグ直前などに、下コードをコピペしてください。jQueryの重複読込みには注意してください。

まとめ:今日のゆめぴょんの知恵

今回紹介した「次の記事を読み込む!」は、このブログのホームやカテゴリ一覧などをスマホから見れば試せます。そのサクサク感をぜひ体感してみてください。

スマホ用デザインでは、jQueryを利用して下の記事のような「するするっと」動くスムーズスクロールも採用しています。参考にしてみてください。

コピペでOK!スムーススクロールでページ内リンクやトップへ移動!#なしでコピペでOK!スムーススクロールでページ内リンクやトップへ移動!#なしで24 shares

記事が長い場合、目次やページ先頭「#」へのページ内リンクはとても便利です。しかも…

なお今回の記事内容は次のブログも参考にさせていただきました。ありがとうございました。興味ある方は読んでみてください。

jQuery.autopagerで次のページを読み込む間にローディングアイコンを表示させよう | Design Color
WordPressなどのブログで記事を自動読み込み!「jQuery.autopager」の設定方法 | アプリアン!

次回の記事は「ウェブ制作に役立つチップ」の予定です(^^)。更新を見逃さないためにも、 feedlyの登録をおすすめします(^^)/

ゆめぴょん(@yume_pyon)でした。ばいちゃお! こてっZzz

«前記事:CSSのmicro clearfix最新版!親要素からはみ出さない方法も【WordPress】新テーマデザインで96点達成!SEO対策・軽量化など7つの特徴をさらします:次記事»
ページ
↑先頭
ホーム