無限スクロール機能を使うと、読者がページの一番下までスクロールダウンし次のページへのリンクをクリックして画面が更新されるのを待つ代わりに、ページの一番下に近づいた際にモバイルアプリのように続きの投稿を自動で読み込めるようになります。
多くの Jetpack に含まれているモジュールとは違い、無限スクロールは対応するテーマ上でのみ動作します。テーマはどれも少しずつ異なった構造をしているため、無限スクロールが正しく機能するには各テーマに関する情報が必要です。テーマを対応させ、CSS を使って外観をカスタマイズする方法についてはこの後詳しく説明します。
テーマ対応を追加する
テーマで無限スクロールを使えるようにするのは、アイキャッチ画像やエディタースタイルに対応させるのとよく似ています。というのは、 add_theme_support() を利用するからです。 add_theme_support() を呼びだす際にいくつか重要な情報を渡すことで、無限スクロールをスムーズにお使いのテーマに溶け込ませることができます。
テーマが WordPress のデフォルトテーマのようにきちんと作られていれば、無限スクロールを加えるのは簡単です。例えば Twenty Twelve テーマの場合なら以下のようになります。
add_theme_support( 'infinite-scroll', array( 'container' => 'content', 'footer' => 'page', ) );
これで無限スクロール機能が完全に使えるようになります。
container
テーマに無限スクロールを加えるのに最も重要なのが container という変数で、これは無限スクロールが次の投稿を追加するべき HTML の ID を指定します。初期値は content ですが、対応を追加するテーマに使われている有効な CSS の ID で、投稿を付け加える場所として適切なものであれば何でもかまいません。通常はこれがテーマで投稿が表示される親コンテナになります。
footer
無限スクロールの問題の一つは、読者がページの最後に近づくたびに次の投稿が読み込まれてしまうのでフッターを見ることができない、という点です。Jetpack の無限スクロールには、読者がページをスクロールダウンすると画面に現れる固定フッターがついています。 このフッターをテーマのデザインに溶け込ませるのが、footer という変数です。別の ID を渡すことで、無限スクロールのフッターの幅を変えてデザインに完璧にマッチさせることができます。こちらのデモを参考にしてください。
false という値を入力すれば、フッターは表示されません。
他にも微調整できる変数があります。以下の例は、各設定オプションに関する初期値をすべてを示したものです。
add_theme_support( 'infinite-scroll', array( 'type' => 'scroll', 'footer_widgets' => false, 'container' => 'content', 'wrapper' => true, 'render' => false, 'posts_per_page' => false, ) );
各オプションの詳しい解説
type
type には、 scroll または click という2つの値が使えます。これが、無限スクロールの動作の初期設定を決めます。
scroll に設定すれば、読者が読んでいる一連の投稿の一番下に近づくと自動的に次の投稿が読み込まれますが、 click に設定すると、 もっと読む ボタンが表示され、次の投稿を読み込むタイミングを読者が決められます。
初期値は scroll ですが、フッターのウイジェットを使っているテーマの場合、初期値を click に変更すればウィジェットが使えます。
footer_widgets
footer_widgets という引数は色々な値を受け取ることができ、そのテーマがフッターウィジェットを使っているかどうかを判別します。フッターウィジェットが使われている場合、スクロールの動作が click に設定され、ウイジェットを使えるようになります。
つまり、フッターを常に表示させたいときはブール値を trueに、まったく表示させたくないときは false に設定します。
さらに、サイドバー ID を表す文字列 (例えば 'sidebar-1') や一連のサイドバー ID も footer_widgets という引数に渡すことができます。無限スクロールのコードはサイドバーがウィジェットを含んでいるかどうかをチェックし、それに従って footer_widgets の引数を設定します。
テーマのウィジェットエリアが投稿より下部にある場合、可能であればサイドバー ID を渡すことを強くお勧めします。こうすることによってテーマのユーザーはスクロールの動作を scroll と click のどちらにするか動的に決めることができるので、最良の体験が得られるからです。とは言っても、もしテーマが初めからスクロールの動作として click を指定しているなら、footer_widgets という引数は削除しても問題ありません。
これでもオプションが十分でなければ、 より詳細なロジックとして infinite_scroll_has_footer_widgets というフィルターがあります。このフィルターはブール値を返す必要があり、ナビゲーターメニューの有無やモバイルデバイスを使っているユーザーを検出するのに使えます。
wrapper
wrapper という引数は何種類かの値を受け取れるという点で footer_widgets と似ています。この引数によって、続く投稿がそれぞれ先行する引数によって指定されたコンテナに追加されたときに、 <div> というエレメントの中に収まるかどうかが決まります。
ブール値（true または false）が指定されている場合、追加される投稿の周囲に、 infinite-wrap というクラスとともに <div> があるか、または、ない、ということになります。
投稿を、カスタムクラスを使った <div> で囲むには、カスタムクラスを示すストリングに wrapper という引数を設定します。
それによって無効なマークアップができない限り、基本的に、追加される投稿を <div> で囲むのは良い習慣です。たとえば、そのテーマがリストエレメント（<ol>, <ul>) を使って投稿を表示している場合、ラッパーを無効にしないと、<div> というエレメントがとんでもないところに出てきてしまいます。
render
無限スクロールは追加する投稿を標準的な WordPress ループを使ってレンダリングし、テンプレートのパーツを content-{post format}.php という形で利用します。テーマに少なくとも content.php が含まれていれば、 render 引数は削除してかまいません。以下は、無限スクロールが使用するレンダリングの関数です。
while( have_posts() ) {
the_post();
get_template_part( 'content', get_post_format() );
}
さらにカスタマイズが必要だったり、そのテーマが content というテンプレートパーツを使っていない場合、render 引数に渡す関数名を指定し、その関数を使って無限スクロールのマークアップを生成します。この関数には WordPress ループの while() という部分が含まれていなければならず、投稿をレンダリングする際には、そのテーマが利用できる関数はどれでも使えます。
posts_per_page
初期設定では、 type 引数が、無限スクロールが一度に読み込む投稿の数を決めています。 scroll の場合は、無限スクロールが作動するたびに読み込まれる投稿の数は7、 click の場合は、「設定→表示設定」で確認できる、そのサイトの「1ページに表示する最大投稿数」の値が使われます。
ただし、テーマのレイアウトの都合で特定の数の投稿を読み込みたい場合、 posts_per_page 引数が、前の段落で説明した初期設定より優先されます。これは、たとえば3カラムのレイアウトで、表示される投稿数が3以上または以下の場合にレイアウトがガタガタになってしまうときなどに役に立ちます。
使用例
これほど多種多様なテーマがある中で、無限スクロールができるだけ多くのテーマに対応できるよう、その動作のしかたについて十分なコントロールをご提供しようとしました。とはいえ WordPress.com での経験から考えると、通常各テーマに必要な設定オプションはごくわずかです。これを説明するために WordPress のデフォルトテーマにおける無限スクロールの設定をご覧いただければと思います。
Twenty Twelve
/**
* Add theme support for infinite scroll.
*
* @uses add_theme_support
* @return void
*/
function twenty_twelve_infinite_scroll_init() {
add_theme_support( 'infinite-scroll', array(
'container' => 'content',
) );
}
add_action( 'after_setup_theme', 'twenty_twelve_infinite_scroll_init' );
「Twenty Twelve」をご存じない方のために説明すると、このテーマは content-{post format}.php というテンプレートパーツを使っており、投稿の下にはウィジェットエリアがありません。このため、 footer_widgets と render 引数を削除しました。実際には container の値が初期値と一致するのでこの引数も削除できるのですが、わかりやすくするために残しておきました。
Twenty Eleven
/**
* 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' );
「Twenty Eleven」にはフッターウィジェットエリアがありますが、スクロールダウンしてもページの一番下まで来るたびに次の投稿が読み込まれてしまうのでこのエリアにアクセスできません。これを解決するため、ウィジェットエリアの ID から成る配列を footer_widgets に渡します。さて、もしサイドバーの一つにウィジェットが含まれていると、無限スクロールプラグインがそれを検出して click モード (好きなときに次の投稿を読み込む) に自動的に切り替えますので、フッターの内容はしっかり読むことができます。テーマにフッターウィジェットがある場合は、この方法を使えばユーザー・エクスペリエンスを大きく向上させることができます。
Twenty Ten
/**
* Add theme support for infinity scroll
*/
function twenty_ten_infinite_scroll_init() {
add_theme_support( 'infinite-scroll', array(
'container' => 'content',
'render' => 'twenty_ten_infinite_scroll_render',
'footer' => 'wrapper',
) );
}
add_action( 'init', 'twenty_ten_infinite_scroll_init' );
/**
* Set the code to be rendered on for calling posts,
* hooked to template parts when possible.
*
* Note: must define a loop.
*
function twenty_ten_infinite_scroll_render() {
get_template_part( 'loop' );
}
「Twenty Ten」は投稿をレンダリングするのに少々異なるテンプレート構造を使っているので、無限スクロールにも独自のレンダリング機能を持たせる必要がありました。
スタイルの追加
最後に考慮が必要なのは、無限スクロールをどのようにサイトのデザインに完璧に溶け込ませるかという点です。無限スクロールはテーマが body_class に対応していることに依存しており、それによってテーマの開発者は特定の body クラスを使って自在にユーザー・エクスペリエンスを向上させられます。無限スクロールが作動しているときには必ず body にinfinite-scroll というクラスがあります。無限スクロールのタイプが「scroll」ならば、neverending というクラスもあります。ブログの最後の投稿が読み込まれると、infinity-end というクラスが加えられます。これらを使って、通常のフッターやナビゲーションリンクを隠し、無限スクロールが終了したら再び表示させることができます。たとえば以下のとおりです。
/* 無限スクロールが有効化されている場合、ナビゲーションリンクとサイトフッターを非表示にする */
.infinite-scroll #navigation,
.infinite-scroll.neverending #footer {
display: none;
}
/* すべての投稿が読み込まれたら再びフッターを表示する */
.infinity-end.neverending #footer {
display: block;
}
次の2つの要素は、お使いのテーマに合わせてスタイルを整えることをおすすめします。
<span class="infinite-loader">[...]</span><div id="infinite-handle">[...]</div>span.infinite-loader はローディングインジケーターで新しい投稿を読み込んでいる間に表示されます。子コンテナとして挿入され、必要がなくなったら DOM から削除するのではなく隠しておくことができます。CSS で両方の状態に対応しているか確認して下さい。
div#infinite-handle は、 type=click のときに表示される「続きを読む」ボタンです。テーマが常に type=scroll を使い、フッターウィジェットを決して使わないならば、これは無視してかまいません。
JavaScript イベント
続きの投稿が読み込まれた後、若干の JavaScript によるインタラクションが必要な状況が出てくることは避けられません。その一例が jQuery Masonry を使っていて投稿が加わった際にそのライブラリをトリガーする必要があるテーマの場合です。こうしたニーズのことを考え、無限スクロールは投稿が加えられたときにイベントをトリガーします。このイベントを利用するには、 post-load イベントが document.body 上で立ちあがったときにキャッチすればよいだけです。
( function( $ ) {
$( document.body ).on( 'post-load', function () {
// このページに新しい投稿が追加された場合
} );
} )( jQuery );
その他
無限スクロールが便利に使えるようになるにはテーマによる対応が必要であるということを考えて、最新のデフォルトテーマ、「Twenty Ten」「Twenty Eleven」「Twenty Twelve」の3つには、Jetpack による対応を含めました。もしもあなたがこれらのいずれかをお使いなら、今すぐに無限スクロールのモジュールを有効化してこの機能を利用できます。WordPress.org のテーマディレクトリで提供されている Automattic テーマの最新版をお使いの場合も、すでに無限スクロールの対応を含む更新が完了しているはずです。
