WordPressサイトで、
ブログ記事一覧をページングせずに無限に読み込みたい場合、
プラグイン「Ajax Pagination and Infinite Scroll」を使うことで簡単に実現できます。
ここでは、プラグインをダウンロードするところから、
実際に無限スクロールを実現するまでの一連の手順を紹介していきます。
プラグインのインストール
まずは、プラグインをインストールしていきましょう。
WordPress管理画面の「プラグイン」→「新規追加」から「Ajax Pagination and Infinite Scroll」と検索し有効化します。
公式サイトからプラグインをダウンロードする場合は、
「Ajax Pagination and Infinite Scroll」プラグインをダウンロードして、
サーバー上の「wp-content/plugins」ディレクトリにFTPアップロードしましょう。
外部ページ「Ajax Pagination and Infinite Scroll」プラグイン公式サイト
FTPって何？という方は以下のページを参考にしてみてください。
プラグインをアップロードすると、管理画面のプラグイン一覧に「Ajax Pagination and Infinite Scroll」が表示されますので、「有効化」をクリックしましょう。
ローディングの設定を行う
プラグインを有効化すると、
管理メニューの「設定」に「Ajax Pagination Settings」というメニューが表示されるようになります。
これをクリックして、設定を行なっていきましょう。
まずは基本の設定を行なっていきます。
以下のように４つの項目を設定していきましょう。
「Paging Type」では、[]無限スクロール、ボタンロード、ページネーションの３タイプから選択することができます。
無限スクロールを行う時は、「Paging Type」で「InfiniteScroll」を選択しましょう。
プラグインの応用設定
無限スクロールローディング時の画像変更
無限スクロールローディング時、
デフォルトでは以下のようなローディングイメージが表示されます。
これは、別のローディングイメージに差し替えることができます。
導入先のサイトデザインに適切なローディングイメージに差し替えておくとより印象が良くなるでしょう。
設定は、「AJAX Loader」の「Upload AJAX Loader」をクリックすることでメディアライブラリ一覧が表示されるので、ローディング画像をアップロードまたは選択するだけです。
ローディング時に表示するテキストを設定する
ローディング処理が行われている間、
ローディング画像と一緒に表示するテキストを設定することができます。
また、ボタンロードを選択されている場合は、
ボタンに表示するテキストも設定することができます。
テキストを表示せず、ローディング画像のみ表示したい場合は空欄にして設定を保存しましょう。
動作確認
各種設定を保存して、
無限スクロールされることが確認できれば完了となります。
動作が確認できない場合は、
もう一度、テンプレート内の要素名や設定内容を見直しましょう。
また、お使いのテーマファイルによっては、「Ajax Pagination and Infinite Scroll」プラグインとの互換性がない場合があります。
互換性がなく、うまく動作しない場合、類似プラグイン「Infinite-Scroll」を使うことで無限スクロールを実現できることがあります。
TCDテーマファイルをお使いの方は、TCD推奨プラグインは「Infinite-Scroll」の方なので、気になる方はこちらの方で設定した方が良いでしょう。
「Infinite-Scroll」での無限スクロールの設定は、以下の記事を参考にしてみてください。
