【自動でスクロールされる！】Infinite-Scrollの使い方ーWordPressプラグイン【初心者向け】

WordPressのプラグインの使い方を初心者向けに紹介する記事です。

今回は、記事一覧を自動でスクロールするプラグイン、Infinite-Scrollの使い方を紹介します。

 

なお本記事は、TechAcademyのWordPressオンラインブートキャンプの内容をもとに紹介しています。

 

 

Infinite-Scrollとは

このプラグインは、トップページや記事一覧をajaxを利用して無限スクロールが可能になります。

通常、ページの一番下に到達すると次のページに移動するなどリンクをクリックしないとページが遷移しません。

しかし、このプラグインを使えば、自動的に次のページを読み込んでさらに下に表示してくれるので、わざわざページ遷移する必要がなくなります。

普通であれば読み込みに時間がかかるところも、サクサク記事が表示されるので読者としても見やすいでしょう。

下記のサイトでスクロールしてみると自動的に無限スクロールしてくれるので、ご覧ください。

muuuuu.org

 

Infinite-Scrollの使い方

このプラグインは、管理画面から「プラグインを検索」してインストールもできますし、プラグイン公式サイトからダウンロードすることも可能です。

インストールがわからない場合はWordPressのプラグインをインストールする方法をご覧ください。

 

有効化すると、管理画面のサイドメニューにある設定から「Infinite-Scroll」という項目が表示されているはずです。

実際に、設定画面を解説していきます。

上から「Content Selector」は全ての記事を囲う要素を指定。

「Navigation Selector」はナビゲーションを囲う要素を指定。

「Next Selector」は次の記事一覧のリンクを指定。

「Item Selector」はループして表示される要素を指定。

「Loading Message」は読み込み中に表示されるメッセージ。

「Finished Message」は最終ページまで表示された際のメッセージ。

「Loading Image」では読み込み中の画像を指定できます。

読み込みの際によく見る歯車のアイコンなどもここでアップロードできます。

また、無限スクロールも一番下にスクロールされた時点で自動で行うのか、ボタンを押すと読み込むのか指定ができます。

 

設定が完了したら保存します。

WordPressにデフォルトで入っているテーマ「Twenty Ten, Twenty Eleven, Twenty Twelve」に関しては、プラグインを有効化するだけで動作しますが、別のテーマを利用している場合は、CSSのidやclassを設定する必要があります。

 

今回の記事は以上です。

 

 

[お知らせ]TechAcademyでは、WordPressを使ってカスタマイズしたオリジナルサイトを構築できるWordPressオンラインブートキャンプを開催しています。期間中の8週間は現役エンジニアのメンターが毎日学習をサポートするので、独学よりも効率的に学ぶことができます。