【wordpress】インフィニティスクロールをAjax Load Moreプラグインで実装
Date 2017.03.31 Category blog
WordPressプラグイン「Ajax Load More」で無限スクロールを設定
無限スクロール、インフィニティスクロールを実装する方法はいくつかありますが、wordpressで実装する場合はプラグインの「Infinite Scroll」を使用している方がおおいようですが、このプラグインの最終更新が4年前なのでなかなか導入に踏み出せず、他のプラグインがないか探したところ、良さそうなプラグインが「Ajax Load More」です。
「Ajax Load More」のオススメポイント
- 設定画面は英語だが、わかりやすいインターフェイス
- ショートコードを読み込みさせたい箇所に設置するだけ
- カテゴリ、ターム、固定ページなど様々な条件で設定が可能
- 無料版は読み込むテンプレートはひとつだけですが、有料版にすれば更に細かい設定が可能
まずはプラグインの設定より詳細設定をしてショートコードを生成する
生成されたショートコードを実装してみる
プラグインの設定画面の右側に設定した項目を反映したショートコードが生成されます、これをロードをさせたい箇所に設置するだけで動作します。
このサイトのアーカイブページに設置しているショートコードは下記です。
|
1 |
[ajax_load_more post_type="post" transition="fade" posts_per_page="6" offset="6" sticky_posts="true" category="' . $cat_slug . '"] |
ただ、今回はアーカイブのテンプレートに自動でカテゴリ毎の記事を出したい！
しかもタクソノミのページにも自動で該当タクソノミのみ出したい！
それに、テンプレートにショートコードを直接設置したい！
そんな時はこれ！
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<?php //カテゴリーアーカイブの場合 if (is_category()) : ?> <?php //表示中のカテゴリをslugで取得し、ショートコードに代入 $category = get_the_category(); $cat_slug = $category[0]->category_nicename; echo do_shortcode('[ajax_load_more post_type="post" transition="fade" posts_per_page="6" offset="6" sticky_posts="true" category="' . $cat_slug . '"]'); ?> <?php //タクソノミーアーカイブの場合 elseif(is_tax()): ?> <?php //表示中のタクソノミのタームをslugで取得し、ショートコードに代入 $terms = wp_get_object_terms($post->ID,'blog_cat'); foreach($terms as $term){ echo do_shortcode('[ajax_load_more post_type="post" transition="fade" posts_per_page="6" offset="6" sticky_posts="true" taxonomy="blog_cat" taxonomy_terms="' .$term->slug. '" taxonomy_operator="IN"]');} ?> <?php endif; ?> |
プラグインダウンロードはこちら
Ajax Load More – Infinite Scroll
