続きの投稿に移動するリンクをクリックしなくても、ページの一番下あたりまで読んでいくと自動的に次の投稿が表示されます。
多くの Jetpack の機能とは違い、無限スクロールを使えるテーマには制限があります。テーマはどれも少しずつ造りが異なるため、無限スクロール機能を正しく機能させるには各テーマの情報が必要です。
注意 :最近ではほとんどのテーマに無限スクロール機能が備わっています。お使いのテーマが無限スクロールに対応しているかどうかを確認するには、「Jetpack」 → 「設定」 → サイトのダッシュボードで「書き込み」に移動して「テーマの機能拡張」セクションの下を確認します。
お使いのテーマが無限スクロールに対応していなかった場合は、未対応のテーマにこの機能を組み込む手順と CSS で見かけをカスタマイズする手順をこの先の詳細説明で確認してください。
機能を組み込む
無限スクロールを有効にする手順は、投稿サムネイルやエディタースタイルに機能を組み込む手順とよく似ています。これは、Jetpack では add_theme_support()
を使っているためです。add_theme_support()
を呼び出すとき、いくつかの重要情報を提供すると、お使いのテーマにスムーズに無限スクロールを組み込めます。
WordPress のデフォルトテーマのように精巧なテーマにも、さっと無限スクロールを追加できます。Twenty Twelve を使って具体的方法を説明しましょう。
add_theme_support( 'infinite-scroll', array( 'container' => 'content', 'footer' => 'page', ) );
これで無限スクロールを完備できます。
container
テーマに無限スクロールを組み込むとき、最も重要なのが、container
変数です。無限スクロールで続きの投稿を追加する HTML 要素の ID をこの変数で指定します。デフォルト値は container
ですが、投稿の追加先にふさわしく有効な 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
とブール値を設定するだけです。
さらに footer_widgets
引数は、サイドバー ID を示す文字列 ('sidebar-1'
など) かサイドバー ID 配列に対応しています。無限スクロールのコードでは、サイドバーにウィジェットがあるかないかをチェックし、その結果に合わせて footer_widgets
引数を設定します。
テーマ内でウィジェット領域が投稿リストの下に配置される場合は、できる限りサイドバー ID を指定するようお勧めします。こうしておくと、スクロールタイプがその都度 scroll
か click
に決まっていくため、ユーザーからみてテーマの使い勝手が非常によくなります。このように、最初からテーマのタイプが click
に指定してあると、footer_widget
引数が無効になり、問題も発生しません。
これらのオプションより高度なロジックを扱うときは、infinite_scroll_has_footer_widgets
フィルターを使えます。このフィルターではブール値を返す必要があり、ナビゲーションメニューの有無やモバイルデバイスを使っているユーザーを検出できます。
wrapper
wrapper
引数の動作は、指定できる値が何種類かある点で footer_widgets
と似ています。先行する引数の指定したコンテナに続きの投稿を追加するとき、div
要素に組み込むかどうかがこの引数で決まります。
ブール値 (true
または false
) の指定に合わせ、続きの投稿を infinite-wrap
クラスの div
で囲むか囲まないかが決まります。
カスタムクラスの div
で投稿を囲むときは、wrapper
引数としてカスタムクラスを示す文字列を設定します。wrapper
引数にはスペースを含まない文字列を1つだけ指定できる点に留意してください。
通常、追加の投稿は1つの div
で囲みますが、その結果、マークアップが無効になる場合は別の対応が必要です。たとえばテーマ内に投稿表示に使うリスト要素 (ol
、ul
) があるときは、div
要素を不適切な場所に表示しないように wrapper を無効化する必要があります。
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
タイプでは、サイト別に「設定」を開き「読み込み」の下にある「最大ブログページ表示数」の値を使います。
ただし、テーマのレイアウト上、一定の投稿数が適切な場合は、前項で説明したデフォルトが無効になり、posts_per_page
引数が有効となります。3列レイアウトのテーマで投稿数が3件より多かったり少なかったりするとレイアウトが崩れるようなときは、この仕組みが役立ちます。
例
非常に多種多数のテーマがあるため、Jetpack は無限スクロールでできるだけ多くのテーマに対応する必要があり、相応の動作制御機能の提供に努めました。一方で WordPress.com の経験から、各テーマに必要な設定オプションはごく限られていることは明らかでした。WordPress のデフォルトテーマに対応する無限スクロールの設定を例にして説明します。
Twenty Twelve
/** * テーマに無限スクロール機能を追加 * * @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
/** * テーマに無限スクロール機能を追加 */ 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
タイプに切り替わるため、ユーザーはフッターコンテンツにスムーズにアクセスできます。目的のテーマ内にフッターウィジェットがある場合、このアプローチを検討してください。ユーザーにとって非常に使いやすいサイトになります。
Twenty Ten
/** * テーマに無限スクロール機能を追加 */ 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 では少々異なるテンプレート構造を使って投稿をレンダリングしているため、無限スクロールに独自のレンダリング関数を組み込む必要があります。
スタイルに組み込む
あとはお使いのサイトのデザインに無限スクロールをどう組み込むかだけです。無限スクロールは 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.infinite-loader
は読み込み状態を示すインジケータで、新しく投稿を読み込んでいるあいだ表示されます。コンテナの子として挿入され、不要になると非表示に切り替わる機能があるため、DOM から削除はされません。お使いの CSS が両方のケースに対応していることを確認してください。div#infinite-handle
は type=click
で表示される「続きの投稿を読み込む」ボタンです。type=scroll
のみ使い、フッターウィジェットは一切表示しないテーマでは、この関数を無視しても構いません。
JavaScript イベント
テーマ内で投稿を追加したあと、何らかの JavaScript のやり取りが必要になる状況は、必ず発生します。そのような例の 1 つが、jQuery Masonry を使い、そのライブラリに続きの投稿を配置するようトリガーする必要のあるテーマです。こうしたニーズを考慮し、Jetpack では投稿を追加したあとにイベントをトリガーしています。このイベントを活用するには、post-load
イベントが document.body
で立ちあがったとき、キャッチするだけです。
( function( $ ) { $( document.body ).on( 'post-load', function () { // 新しい投稿がページに加わった } ); } )( jQuery );
独自の引数を無限スクロールのクエリーに追加
一部のテーマやプラグインでは、投稿クエリーに追加の引数が加わり、多くの場合は投稿の順番や読み込み方法が変わります。infinite_scroll_query_args
フィルターを使うと、追加の引数を無限スクロールにも追加できます。次の例では、カスタマイズした order
と orderby
という2つの並べ替え変数を追加します。
/** * 無限スクロールの結果をすべて投稿名でアルファベット順に並べ替える * * @param array $args * @filter infinite_scroll_query_args * @return array */ function jetpack_infinite_scroll_query_args( $args ) { $args['order'] = 'ASC'; $args['orderby'] = 'name'; return $args; } add_filter( 'infinite_scroll_query_args', 'jetpack_infinite_scroll_query_args' );
トラブルシューティング
無限スクロールを「下にスクロールすると続きの投稿を読み込む」に設定しましたが、代わりに「過去の投稿」ボタンが表示されます。
フッターウィジェットのあるテーマでしょうか ?フッターウィジェット領域に何かウィジェットのあるテーマでは、サイトでフッターウィジェットを必ず表示できるように、無限スクロールが「過去の投稿」ボタンを使うよう自動的に切り替わります。下へのスクロールに合わせて投稿を読み込むには、サイドバーなど、代わりのウィジェット領域にウィジェットを配置する方法があります。フッターウィジェット領域しかないテーマの場合は、ほかにもウィジェット領域のオプションがあるテーマを別途探す必要があります。
その他の注意点
サポート対象外のテーマではこの機能が使用できないことを考慮し、Twenty Ten、Twenty Eleven といった WordPress でデフォルトのテーマのサポートを Jetpack とまとめてパッケージを組みました。お使いのテーマがこれらに該当する場合は、無限スクロールを有効に切り替えるだけで、この機能を使えます。お使いのテーマが、WordPress.org からダウンロードした Automattic のテーマの場合は、無限スクロール対応を組み込む更新が済んでいます (アップグレード可能なテーマを有効にしている場合、テーマを更新できるユーザーには、機能カードでメッセージを表示します)。
プライバシーに関する情報
この機能はデフォルトでは無効になっています。これまでに無効化する必要があった場合は、「Jetpack」、「設定」、「書き込み」の順に移動し、「テーマ拡張」セクションにあるトグル式の「テーマのデフォルト動作に沿って続きの投稿を読み込む」設定を切り替えてください。
サイトのデータ使用に関する詳細情報
使用されるデータ | |
---|---|
サイト所有者 / ユーザー WordPress.com の「統計」(ここでページ表示のトラッキングを有効にした場合のみ機能) で、追加の読み込みをページ表示として記録するために必要な情報は次のとおりです。IP アドレス、WordPress.com ユーザー ID (ログインしている場合)、WordPress.com ユーザー名 (ログインしている場合)、ユーザーエージェント、訪問中の URL、リファラー URL、イベントのタイムスタンプ、ブラウザーの言語、国コード。 |
サイト訪問者 WordPress.com の「統計」(ここでページ表示のトラッキングを有効にした場合のみ機能) で、追加の読み込みをページ表示として記録するために必要な情報は次のとおりです。IP アドレス、WordPress.com ユーザー ID (ログインしている場合)、WordPress.com ユーザー名 (ログインしている場合)、ユーザーエージェント、訪問中の URL、リファラー URL、イベントのタイムスタンプ、ブラウザーの言語、国コード。 |
トラッキングされるアクティビティ | |
サイト所有者 / ユーザー 追加の読み込みが発生するたび、ページ表示をトラッキングします (ページの終わりまでスクロールすると、続きの投稿が自動的に読み込まれます)。サイトの所有者がこの機能と組み合わせる形で Google Analytics を有効にしている場合、追加の読み込みが発生するたび、適切な Google Analytics アカウントもページ表示イベントの通知を受けます。 |
サイト訪問者 追加の読み込みが発生するたび、ページ表示をトラッキングします (ページの終わりまでスクロールすると、続きの投稿が自動的に読み込まれます)。サイトの所有者がこの機能と組み合わせる形で Google Analytics を有効にしている場合、追加の読み込みが発生するたび、適切な Google Analytics アカウントもページ表示イベントの通知を受けます。 |
同期対象データ (詳細) | |
サイト所有者 / ユーザー Jetpack が機能の有効 / 無効、この機能と Google Analytics の統合の有無を特定するオプションを同期します。 |
サイト訪問者 なし。 |