後台設定

須啟用 Jetpack 無限捲動 > 隨著讀者向下捲動頁面載入更多文章：

抽離文章區塊

將 PHP 產生文章區塊的 HTML 從 index.php 抽離存放至另一個 .php 檔，以本站來說就像下圖紅框處：

Jetpack 就是透過我們自行設定要讀取哪個 .php 檔 (通常是 content.php)，來無限捲動載入文章區塊，抽離出的文章區塊程式如下：

<?php
if (have_posts()) :
    while (have_posts()) :
        the_post();
 
        echo '
        <article>
            <h2> . get_the_title() . </h2>
        </article>';
 
    endwhile;
endif;
?>

然後 index.php 或 archive.php 再使用 get_template_part('content', get_post_format()); 去讀取 content.php，且也必須設定文章區塊父元素的 ID (這裡設為 card-content)，後續 functions.php 會用到：

<?php
get_header();
?>
 
    <div id="card-content">
            
        <?php
        get_template_part('content', get_post_format());
        ?>

    </div>
 
<?php
get_footer();
?>

程式碼

在 functions.php 新增如下程式，並將 container 的值對應 index.php 所設定的文章區塊父元素 ID 即可：

/**
 * Jetpack 無限捲動載入文章
 */

function infinite_scroll_render() {
    get_template_part('content');     // 指定模版檔案名稱，此例呼叫 content.php
}
add_theme_support('infinite-scroll', array(
    'container'	=> 'card-content',   // 所有文章區塊的父元素 HTML ID (對應 index.php 的設定)
    'render'	=> 'infinite_scroll_render',
    'wrapper'	=> false,            // true 時，在載入第二頁後的文章網址會添加 /page/2 (還有其它功效)
    'footer'	=> false             // 向下捲動時會，網頁最下方會顯示 Blog 的一個區塊，點擊可回到最上
));

加載圖示位置

在 style.css 新增下述 CSS 來調整 Jetpack ​​​​無限捲動載入文章時，讓加載圖示左右置中：

/*
 * Jetpack 無限捲動載入文章，加載圖示
 */
.infinite-loader {
    margin-left: -16px;
    position: absolute;
        bottom: -15px;
        left: center;
}

搭配 bricklayer.js 磚塊 (卡片) 排版

bricklayer.js 是一套輕量的磚塊排版，每個磚塊的高度均可不相同，而且磚塊的順序是由左 → 右、上 → 下，使用方式可參考 Quick Start · ademilter/bricklayer Wiki · GitHub。

要讓 Jetpack 與 bricklayer.js 完美結合，必須運用 Jetpack 的二個要素：

• 載入新文章所提供的 jQuery 事件 (Event)。
• 每次載入新文章都先會添加一個 span.infinite-loader 元素，須以此元素來追蹤所有載入的新文章。

程式碼如下：

(function($) {
    var bricklayer = new Bricklayer(document.querySelector('.bricklayer'));
    
    // Jetpack 每次載入新文章都會觸發該事件
    $(document.body).on('post-load', function () {
        // 取得 span.infinite-loader 元素
        var infiniteLoader = document.querySelectorAll('#sj_card-content .infinite-loader');
        // 取得第 1 篇新文章
        var card = infiniteLoader[infiniteLoader.length - 1].nextElementSibling;
        // 存放每次載入的所有原始新文章，以便後續用來刪除
        var cards = [];
        cards.push(card);

        // 一直往下取得載入的所有新文章
        do {
            bricklayer.append(card.cloneNode(true));    // 複製載入的新文章給 brickayer.js
            card.style.display = 'none';                // 先將載入的原始新文章隱藏
            card = card.nextElementSibling;             // 取得第 2、3... 篇新文章

            if (card)   cards.push(card);
        } while (card);

        // 刪除所有載入的原始新文章
        for (var i = 0, len = cards.length; i < len; i++) {
            cards[i].parentNode.removeChild(cards[i]);
        }
    } );
})(jQuery);

參考

• Infinite Scroll
• Quick Start · ademilter/bricklayer Wiki · GitHub
• JetPack Infinite Scroll + Masonry | WP Theming