「infinite scroll」タグアーカイブ

Jetpack InfiniteScroll有効化

function initThemeSupport() {
    add_theme_support(
        "infinite-scroll",
        array(
            "container" => "mainList" // 適用したい要素のID
            ,"type" => "scroll" // or "click"
            ,"render" => "setInfiniteScroll" //get_template_partを実行する関数
            ,"posts_per_page" => 10 // 一度に表示する件数
            ,"wrapper" => true
            ,"footer"=> false
        )
    );
}

if(!is_single()){
    // 実行させたい場所にフック
    add_action("after_setup_theme","initThemeSupport");
}

function setInfiniteScroll() {
    // 表示したいブロックが入ったtemplateを指定(この場合はcontent-list.phpがinifinite scrollで使用される)
    get_template_part('content','list');
}

Infinite Scroll 更新時にJavaScriptで処理を行いたい場合

jQuery(document).ready(function($){
    
    $(function() {
    $( document.body ).on( 'post-load', function () {
        // ここに処理を書く
    } );
});

参考サイト
Infinite Scroll — Jetpack for WordPress