無限スクロールが出来るWordPressプラグイン「Infinite Scroll」の設定方法

WordPress

2018/04/28 2021/01/07

定位置までスクロールすると自動で次のページを読み込む処理をしてくれるプラグインInfinite Scrollの実装方法を紹介していきます。

プラグインのインストール

WordPressの管理画面からInfinite-Scrollを新規追加します。

インストールが完了したら有効化してください。

プラグインの設定

有効化すると管理画面の設定にInfinite Scrollの項目が追加されますので選択してください。

設定する箇所は、以下4項目で実装可能です。
該当するタグに付いているID・クラス名を割り当てていきます。

Content Selector（記事全体を囲んでいるタグ）
Navigation Selector（ページネーションを囲んでいるタグ）
Next Selector（ページネーション内の次の一覧に移動するタグ）
Item Selector（１つの記事を囲んでいるタグ）

サンプルコード

では実際にWordPressで記述した内容を紹介していきます。
ここでのID・クラス名は以下の通りに設定しています。

Content Selector → #content
Navigation Selector → #nav-below
Next Selector → #nav-below a:first
Item Selector →.post

ページネーションの作成

functions.phpに記述します。
※スクロールして次のページを自動で表示するプラグインですが、ページネーションは作成する必要があるようです。

function pagenation($pages = '', $range = 2){
    $showitems = ($range * 1)+1;
    global $paged;
    global $maxPager;
    if(empty($paged)) $paged = 1;
    if($pages == ''){
        global $wp_query;
        $pages = $wp_query->max_num_pages;
        if(!$pages){
            $pages = 1;
        }
    }
    if(1 != $pages){
        $img_pass = get_template_directory_uri();
        echo "<div id=\"nav-below\">";
        echo "<ul>";
        for ($i=1; $i <= $pages; $i++){
            if (1 != $pages &&( !($i >= $paged+$range+1 || $i <= $paged-$range-1) || $pages <= $showitems )){
                echo ($paged == $i)? "<li class=\"current\">".$i."</li>":
                    "<li><a href='".get_pagenum_link($i)."'>".$i."</a></li>";
            }
        }
        echo "</ul>";
        echo "</div>";
    }
}

記事一覧とページネーションの出力

出力するファイルに記述する。

<ul id="content">
	<?php
　　	//記事のループ
　　	$paged = get_query_var('paged');
 	$args = new WP_Query(
		array(
			'post_type' => 'post',
　　　　　　	'posts_per_page' => '9',
　　　　　　	'paged' => $paged
　　　　	)
　　);
　　if ( $args->have_posts() ) :
　　while ( $args->have_posts() ) : $args->the_post();
　　?>
　　<li class="post">
		<a href="<?php the_permalink(); ?>">
        	<h3><?php the_title(); ?></h3>
            <div><?php the_excerpt(); ?></div>
        </a>
    </li>
    <?php endwhile; endif; wp_reset_postdata();?>
</ul>

<?php
//作成したページネーションの出力
if(function_exists('pagenation')){ pagenation($args->max_num_pages); }
?>

以上で実装完了となります。
設定した項目以外でもさらに編集したい方は、その他・設定項目を参考に編集してみてください。