WordPress: JetpackのInfinite Scrollに対応しました

Jetpack,plug-in,WordPress

WordPressに様々な便利機能を付加するプラグイン「Jetpack」。

その便利機能のひとつ「Infinite Scroll」に対応しました。

ブログのホーム画面などで下にスクロールすると、スルスルッとコンテンツが増えていくはずですよ。

Infinite Scrollへの対応作業

Infinite Scroll機能を有効にするには、テーマ側でサポートが必要です。

当ブログでもいくつか修正を行いましたので、要点のみ紹介します。

詳細に付きましては公式ドキュメント「Infinite Scroll — Jetpack for WordPress」を参照してください。

Infinite Scroll対応を有効化

function.phpからadd_theme_support()を呼び出し、Infinite Scroll対応を有効化します。

当ブログでは以下の定義を追加しました。

add_theme_support( 'infinite-scroll', array(
    'container'  => 'entry',
    'footer'     => false,
    'posts_per_page' => 12
) );

'container’がキモで、画面をスクロールした際、このパラメータで指定したHTMLエレメントが追加コンテンツとして表示されるようになります。

'footer’は画面下部に追加されるInfinite Scroll用フッター表示のIDを指定するようです。当ブログでは不要と判断したので、非表示を指定するfalseを設定しました。

'posts_per_page’は追加表示するコンテンツ数です。初期値は7ですが、当ブログでは複数列表示を行っているため、偶数である12に変更しました。

content-{post format}.php形式への対応

Infinite Scrollを使用するには、WordPress標準のレンダリング方式である"content-{post format}.php"方式への対応が必要です。

当ブログでもindex.phpの主要部を下記のように修正しました。

<div id="entry">
    <?php
        while (have_posts()) : the_post();
            get_template_part( 'content', get_post_format() );
        endwhile;
    ?>
</div><!--end #entry-->

上記に伴い、これまでindex.php内に存在していたコンテンツ表示ブロックを"content-index.php"に移動しました。

テーマ構成が複雑で content-{post format}.php 方式への対応が難しいようなら、add_theme_supportにrenderオプションを与えることで、whileループ内のrender要素を指定できるようです。詳細はInfinite Scrollのドキュメントを参照ください。

☆ Infinite Scroll — Jetpack for WordPress

まとめ

他にもいろいろ便利なんでJetpackは入れとけ。

そんな感じで！

☆ Jetpack for WordPress