Jetpack 2.0 の無限スクロールを導入しました♪

Jetpack を 2.0 にアップデートしましたら、 Infinite Scroll なるものが追加されました。これ、あれですよね。ページの一番下までスクロールしたら、次のページが自動で延々と読み込まれていくものですよね！早速導入します！

管理画面から単純に「オン！」というわけには行きませんでした。コードの修正が必要でしたので、確実に行っていきます。

Jetpack 2.0 の無限スクロール導入手順

wp-content/themes/oki2a24/functions.php の末尾に次を追加します。

/**
 * Add theme support for infinity scroll
 */
function twenty_eleven_infinite_scroll_init() {
        add_theme_support( 'infinite-scroll', array(
                'container'      => 'content',
                'footer_widgets' => array( 'sidebar-3', 'sidebar-4', 'sidebar-5' ),
                'footer'         => 'page',
        ) );
}
add_action( 'init', 'twenty_eleven_infinite_scroll_init' );

テーマによって追加するコードのパターンが幾つかございますが、わたくしのサイトの WordPress テーマは Twenty Eleven がベースとなっておりますので、上記のコードとなりました。後述する参考ページでは、他にも Twenty Twelve と Twenty Ten の場合のコードも掲載されています。

公式テーマを使用するとカスタマイズが楽ですね♪

Jetpack 2.0 の無限スクロールの設定

1. 設定　＞　表示設定。
2. To infinity and beyond の Scroll Infinitely (Shows 7 posts on each load) にチェック。
3. また、Use Google Analytics with Infinite Scroll の Track each Infinite Scroll post load as a page view in Google Analytics にもチェック。

画像の四角で囲った部分ですけれども、上のチェックで無限スクロールのオン・オフの切り替えができます。

また、下のチェックで無限スクロールで表示した投稿を読み込んだときに Google Analytics に記録するかどうかを設定できます。

不満

わたくしのサイトの WordPress テーマは、Twenty Eleven にほんの少しだけ手を入れて使用させていただいています。そして Twenty Eleven はレスポンシブデザイン採用テーマです。

ウェブブラウザの幅を狭めると右のサイドメニューがページの下に移動します。この状態で無限スクロールが有効になっていると、一番最後までスクロールしないとサイドメニューが現れません。

不満です。でも、これをブラウザの横幅を広げてサイドメニューを右側の本来の位置に表示する以外の方法で解消するのは難しそうです。

おわりに

次のページが参考になりました。なんだか高い技術力を感じる方です。ありがとうございます。

• Jetpack 2.0: パブリサイズ共有、メール投稿、Photon CDN、無限スクロール – ja.naoko.cc

それから、こちらが本家ページになります。英語ですので少し難しいですけれども、ここが最も参考にすべきページですね。今回の投稿では、Example の Twenty Eleven を使用しています。

• Infinite Scroll — Jetpack for WordPress

以上です。