Simplicityに無限スクロール機能を追加する方法(JetPack併用)

Simplicityは2015年11月現在、テーマとしては無限スクロールをサポートしていない。従ってSimplicityで無限スクロールを実現するにはプラグインなどを利用し機能を作りこむ必要がある。

WordPressの無限スクロール系プラグインとしてはInfinite Scrollというプラグインが有名であり、Simplicity公式サイトでも言及されているが、このプラグインにはiOSでの動作に問題がある。即ち、iOSでは自動スクロールが動作しない。(ピンチインなどに通常ユーザーの思いつかない動作を加えればスクロールするが。。)

そこでJetPack無限スクロールとSimplicityを組み合わせて無限スクロールを実現してみた。

まず当然ながらJetPackの設定から無限スクロールを有効化しておく必要がある。

その上でfunctions.phpなどに以下の記述を追加する。

## Add theme support for infinity scroll
function simplicity_infinite_scroll_init() {
  add_theme_support( 'infinite-scroll', array(
    'container' => 'list',
    'render' => 'simplicity_infinite_scroll_render',
    'footer' => 'wrapper'
  ) );
}

## Set the code to be rendered on for calling posts, hooked to template parts when possible. Note: must define a loop.
function simplicity_infinite_scroll_render() {
  get_template_part( 'list' );
}
add_action( 'after_setup_theme', 'simplicity_infinite_scroll_init' );

ポイントはsimplicity_infinite_scroll_init()の引数にて、containerにlistを指定しているところである。これは各テーマによって異なってくる部分であり、simplicityではlistを使用するのがよいと思われる。

コメント