無限スクロール

type はscroll、click という2種類の値に対応しています。これで無限スクロールのデフォルト動作を制御します。scroll では、訪問者が現在読み込み済みの投稿の終わりに近づくと、次の投稿が自動的に読み込まれます。対して click では「続きの投稿を読み込む」ボタンが表示され、続きの投稿を読み込むタイミングをユーザー自身が決められます。

scroll がデフォルトですが、フッターウィジェットのあるテーマでは必ず click 設定が使われるため、フッターウィジェットにアクセスできます。

footer_widgets 引数はさまざまな値に対応し、各テーマにフッターウィジェットがあるかないかを示します。フッターウィジェットがある場合、スクロールタイプの設定は click となるため、ウィジェットにアクセスできます。

単純なケースでは、フッターを毎回表示するには true、一切表示しない場合は false とブール値を設定するだけです。
さらに footer_widgets 引数は、サイドバー ID を示す文字列 ('sidebar-1' など) かサイドバー ID 配列に対応しています。無限スクロールのコードでは、サイドバーにウィジェットがあるかないかをチェックし、その結果に合わせて footer_widgets 引数を設定します。

テーマ内でウィジェット領域が投稿リストの下に配置される場合は、できる限りサイドバー ID を指定するようお勧めします。こうしておくと、スクロールタイプがその都度 scroll か click に決まっていくため、ユーザーからみてテーマの使い勝手が非常によくなります。このように、最初からテーマのタイプが click に指定してあると、footer_widget 引数が無効になり、問題も発生しません。

これらのオプションより高度なロジックを扱うときは、infinite_scroll_has_footer_widgets フィルターを使えます。このフィルターではブール値を返す必要があり、ナビゲーションメニューの有無やモバイルデバイス��使っているユーザーを検出できます。

wrapper 引数の動作は、指定できる値が何種類かある点で footer_widgets と似ています。先行する引数の指定したコンテナに続きの投稿を追加するとき、div 要素に組み込むかどうかがこの引数で決まります。
ブール値 (true または false) の指定に合わせ、続きの投稿を infinite-wrap クラスの div で囲むか囲まないかが決まります。

カスタムクラスの div で投稿を囲むときは、wrapper 引数としてカスタムクラスを示す文字列を設定します。
wrapper 引数にはスペースを含まない文字列を1つだけ指定できる点に留意してください。

通常、追加の投稿は1つの div で囲みますが、その結果、マークアップが無効になる場合は別の対応が必要です。たとえばテーマ内に投稿表示に使うリスト要素 (ol、ul) があるときは、div 要素を不適切な場所に表示しないように wrapper を無効化する必要があります。

無限スクロールでは、標準の WordPress ループを使って続きの投稿を追加表示し、content-{post format}.php フォームのテンプレートパーツを活用します。テーマ内に content.php があるだけで、render 引数は無効になります。無限スクロールで使うデフォルトのレンダリング関数は次のとおりです。

while( have_posts() ) {
the_post();
get_template_part( 'content', get_post_format() );
}

さらに細かいカスタマイズが必要な場合、テーマで content テンプレートパーツを使わない場合は、render 引数の関数名を指定する必要があり、関数を使って無限スクロールのマークアップを作成することになります。この関数には WordPress のループの while() 部分を組み込む必要があり、テーマに投稿をレンダリングするときあらゆる関数を活用できます。

デフォルトでは、無限スクロールが作動するたびに読み込む投稿数を type 引数で操作します。scroll タイプでは、無限スクロールが作動するたび7件の投稿を読み込みます。click タイプでは、サイト別に「設定」を開き「読み込み」の下にある「最大ブログページ表示数」の値を使います。
ただし、テーマのレイアウト上、一定の投稿数が適切な場合は、前項で説明したデフォルトが無効になり、posts_per_page 引数が有効となります。3列レイアウトのテーマで投稿数が3件より多かったり少なかったりするとレイアウトが崩れるようなときは、この仕組みが役立ちます。

/**
* テーマに無限スクロール機能を追加
*
* @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 引数も、値がデフォルト値と一致するため省こうと思えば省��ましたが、わかりやすくするため残してあります。

/**
* テーマに無限スクロール機能を追加
*/
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( 'after_setup_theme', 'twenty_eleven_infinite_scroll_init' );

Twenty Eleven にはフッターウィジェット領域がありますが、読み込み済み投稿の終わりに近づくたびに続きの投稿を読み込むと、この領域にアクセスできなくなります。この課題を解決するため、Jetpack では該当するウィジェット領域の ID 配列を footer_widgets に渡します。その結果、サイドバーの1つにウィジェットがある場合も、Jetpack の無限スクロールのプラグインでは、ウィジェットの存在を検知し、自動的に (ユーザーが適宜クリックして追加の投稿を読み込む) click タイプに切り替わるため、ユーザーはフッターコンテンツにスムーズにアクセスできます。目的のテーマ内にフッターウィジェットがある場合、このアプローチを検討してください。ユーザーにとって非常に使いやすいサイトになります。

/**
* テーマに無限スクロール機能を追加
*/
function twenty_ten_infinite_scroll_init() {
add_theme_support( 'infinite-scroll', array(
'container' => 'content',
'render' => 'twenty_ten_infinite_scroll_render',
'footer' => 'wrapper',
) );
}
add_action( 'after_setup_theme', 'twenty_ten_infinite_scroll_init' );
/**
* 投稿を呼び出すときこのコードでレンダリングするよう設定
* できる限りテンプレートパーツを使用
*
* 注意 :ループの定義が必要
*
function twenty_ten_infinite_scroll_render() {
get_template_part( 'loop' );
}

Twenty Ten では少々異なるテンプレート構造を使って投稿をレンダリングしているため、無限スクロールに独自のレンダリング関数を組み込む必要があります。

フッターウィジェットのあるテーマでしょうか ?フッターウィジェット領域に何かウィジェットのあるテーマでは、サイトでフッターウィジェットを必ず表示できるように、無限スクロールが「過去の投稿」ボタンを使うよう自動的に切り替わります。下へのスクロールに合わせて投稿を読み込むには、サイドバーなど、代わりのウィジェット領域にウィジェットを配置する方法があります。フッターウィジェット領域しかないテーマの場合は、ほかにもウィジェット領域のオプションがあるテーマを別途探す必要があります。