WordPressサイトで、
ブログ記事一覧をページングせずに無限に読み込みたい場合、
プラグイン「Infinite-Scroll」を使うことで簡単に実現できます。
ここでは、プラグインをダウンロードするところから、
実際に無限スクロールを実現するまでの一連の手順を紹介していきます。
目次
プラグインのインストール
まずは以下の公式サイトから、
「Infinite-Scroll」プラグインをダウンロードします。
外部サイト「Infinite-Scroll」プラグイン公式サイト
ダウンロードしたプラグインは、
サーバー上の「wp-content/plugins」ディレクトリにFTPアップロードしましょう。
FTPって何？という方は以下のページを参考にしてみてください。
プラグインをアップロードすると、
管理画面のプラグイン一覧に「Infinite Scroll」が表示されますので、「有効化」をクリックしましょう。
プラグインのセットアップ
プラグインの有効化のあとは、
実際にサイト上のどこを無限スクロールの対象にするかを設定していく必要があります。
まずは「設定」→「Infinite Scroll」というメニューを表示しましょう。
無限スクロールさせたいテンプレートを表示して、
以下のように設定を行なっていきましょう。
プラグインの応用設定
ローディング時に表示するテキストを設定する
ローディング処理が行われている間、
ローディング画像と一緒に表示するテキストを設定することができます。
以下のキャプチャの場合は、「Loading...」と表示されます。
テキストを表示せず、ローディング画像のみ表示したい場合は空欄にして設定を保存しましょう。
最終ローディングが終わった時に表示するテキストを設定する
最後の記事までローディングが終了した時、
スクロールの終了であることをユーザーに伝えるテキストを設定することができます。
例えば以下のキャプチャの場合、最終記事がローディングされたあと、「No additional posts.」と表示されます。
このメッセージが表示される時は、「ローディング時に表示するテキストを設定する」で設定したローディングテキストは表示されません。
テキストを表示したくない時は、空欄にして設定を保存しておきましょう。
無限スクロールローディング時の画像変更
無限スクロールローディング時、デフォルトでは以下のようなローディングイメージが表示されます。
これは、別のローディングイメージに差し替えることができますので、導入先のサイトデザインに適切なローディングイメージに差し替えておくとより印象が良くなるでしょう。
ローディング画像を差し替える時は、まず「メディア」→「ライブラリ」で画像一覧を表示します。
まだローディング画像をアップロードしていない場合は、画像をアップロードしておきましょう。
一覧の中からローディング画像を選択し、画像のURLをコピーします。
設定画面にURLを貼り付け、保存します。
画像が適用されていれば設定完了です。
オリジナルのローディング画像を生成する方法は、以下のページを参考にしてみてください。
動作確認
各種設定を保存して、無限スクロールされることが確認できれば完了となります。
動作が確認できない場合は、もう一度、テンプレート内の要素名や設定内容を見直しましょう。
また、お使いのテーマファイルによっては、「Infinite-Scroll」プラグインとの互換性がない場合があります。
互換性がなく、うまく動作しない場合は、
類似プラグイン「Ajax Pagination and Infinite Scroll」を使うことで無限スクロールを実現できることがあります。
「Ajax Pagination and Infinite Scroll」での無限スクロールの設定は、以下の記事を参考にしてみてください。
WordPressプラグイン「Ajax Pagination and Infinite Scroll」で無限スクロールを実現する
