無限スクロールで次ページを自動表示できるAjax Load More

投稿一覧で次のページを表示する方法はいくつかありますが、画面スクロールに応じて次の数件が自動で表示されるページを見かけることがあります。「無限スクロール」とよばれる仕組みです。

画面スクロールに応じて次の数件が表示される「無限スクロール」
画面スクロールに応じて次の数件が表示される「無限スクロール」

WordPressではAjax Load Moreプラグインなどを使って無限スクロールを組み込むことができます。以下、手順を紹介します。

スポンサーリンク


無限スクロールを組み込むAjax Load Moreプラグインの使い方

「プラグイン」‐「新規追加」メニューからAjax Load Moreプラグインをインストール、有効化します。

Ajax Load Moreプラグインのインストール
Ajax Load Moreプラグインのインストール

設定画面でショートコードを取得して任意のページにコピーペーストすれば、ショートコードの設定に応じて投稿一覧が表示される仕組みです。「Ajax Load More」‐「Shortcode Builder」メニューを開いてショートコードを作成しましょう。

Shortcode Builder画面を開く
Shortcode Builder画面を開く

画面左側で行った設定(1)が画面右側のショートコード(2)に反映されます。

設定画面(1)とショートコード(2)
設定画面(1)とショートコード(2)

まずは初期設定で動作確認するため、特別な設定をせずにショートコードをコピーします。

「Copy」ボタンをクリック
「COPY」ボタンをクリック

「COPY」ボタンをクリックするとショートコードをコピーできるようになります。このコードをコピーしましょう。

ショートコードをコピー
ショートコードを任意の固定ページにペースト

「OK」ボタンをクリックして画面を閉じて、コピーしたコードを任意のページにペーストします。

ショートコードをコピーペースト
ショートコードをコピーペースト

このページを表示確認してみましょう。画面を下にスクロールすると次ページの投稿が表示されるようになります。

スクロールに応じて次の投稿が表示される
スクロールに応じて次の投稿が表示される

投稿一覧レイアウトの変更

初期設定のレイアウトでは見づらい場合があります。たとえば、BizVektorでは次のようにアイキャッチ画像の裏にタイトルが隠れてしまいます。

初期設定のレイアウトでは問題がある場合も
初期設定のレイアウトでは問題がある場合も

その場合、初期設定のレイアウトをカスタマイズする方法があります。ダッシュボードからレイアウトを変更したい場合は、「Ajax Load More」‐「Repeater Templates」メニューを開きます。枠に入力されているコードが、表示される1つの投稿です。

表示される1件の投稿のレイアウト
表示される1件の投稿のレイアウト

この内容を変更すれば、投稿のレイアウトをカスタマイズすることができます。自動に変更してみてください。ただし、いろいろと修正する前に、うまくいったレイアウトをメモ帳などに保存しておきましょう。

テンプレートファイルを編集したい場合

ダッシュボードからレイアウトを修正するのではなくテキストエディタでテンプレートファイルを開いて変更することもできます。

それには、プラグインフォルダ(wp-content/plugins/ajax-load-more)のcore/repeaterフォルダにあるdefault.phpをコピーして、使用中のテーマフォルダ内に「alm_templates」というフォルダを新たに作ってコピーします。

コピー後のイメージは次のようになります。

サンプルテンプレートをテーマフォルダにコピー
サンプルテンプレートをテーマフォルダにコピー

コピーしたdefault.phpを開いて自由にレイアウトを変更しましょう。ここでは、次のように変更しました。

<div class="repeat-grid">
<div class="repeat-image">
<a href="<?php the_permalink(); ?>">
<?php
if ( has_post_thumbnail() ) {
    the_post_thumbnail(array(200, 200));
}
?>
</a>
</div>
<div class="repeat-title">
<a href="<?php the_permalink(); ?>">
<?php the_title(); ?>
</a>
</div>
<div class="repeat-date">
<?php the_time("Y/m/d"); ?>
</div>
</div>

適用するCSSも自由に作成すれば大丈夫ですが、ここでは例として次のようなCSSを使いました。

/* 投稿一覧のスタイル */
.repeat-grid {
    display: table-cell;
    padding: 5px;
    margin-bottom: 50px;
}

結果として、次のように投稿一覧が表示されます。画面を下にスクロールすると次のページが表示される仕組みです。

指定レイアウトで投稿一覧が表示される
指定レイアウトで投稿一覧が表示される

「続きを読む」ボタンについては、クリックして次のページを開く仕組みにしたり、ある程度自動スクロールさせて、それ以降のページを手動で開く仕組みにするなどアイデア次第です。

ショートコード作成画面(「Ajax Load More」‐「Shortcode Builder」メニュー)でいろいろと試行錯誤してみてください。

また、テンプレート(Repeater Templates)の仕組みについて詳しくは以下のページも参考にしてください。

Repeater Templates | Docs | Ajax Load More

無限スクロールの動作

無限スクロールの実際の動きは次のようになります。スクロールしていくと続きが表示されます。

[ajax_load_more post_type="post" posts_per_page="4" max_pages="5" button_label="続きを読む" button_loading_label="ロード中…"]

このような感じで無限スクロールを組み込むことができます。ここでは無限ではなく4ページで止めていますが、それ以降は「続きを読む」をクリックしてもらうなど、細かい設定が可能です。興味がある方は、ぜひお試しください。

WordPressプラグイン