WordPressで作られたWebサイトを無限スクロール出来るようにする

WordPressで作ったWebサイトを、
スクロールすると、次ページが
自動でロードされる無限スクロー
ルが出来るようにする、という
方法です。今更感満載ですけど。

よく見かける、「スクロールするだけで次ページが次々とロードされる」みたいなサイトをWordPressで作ろう、みたいな話。既出な話題なので基本的な導入方法だけ書きます。

無限スクロール(Infinite Scroll)出来るようにする

WordPressを無限スクロール出来る様にします。

以下、手順。サンプルコードはTwenty Elevenで動作テストしています。

スクリプトを用意する

無限スクロールさせるスクリプトを用意します。いろいろあるのでお好みで構いません。今日はWordPressのプラグインにもなっているInfinite Scrollを使います。~~じゃあプラグイン使えよ、って話ですが。~~

Infinite ScrollはjQuertyのプラグインなのでjQuery本体をロードして下さい。

jQueryコアをロードした状態で、以下をfunctions.phpに追加。

function wp_infinite_scroll_js(){
    wp_register_script( 'wp_infinite_scroll',  get_template_directory_uri() . '/javascript/jquery.infinitescroll.min.js', array('jquery'),null,true );
    //個別ページ以外で読み込み
    if( ! is_singular() ) {
        wp_enqueue_script('wp_infinite_scroll');
    }
}
add_action('wp_enqueue_scripts', 'wp_infinite_scroll_js');

まず、固定ページ、記事ページ、画像ページ以外でinfinitescroll.jsをフッターに読み込みます。テーマファイル内の/javascript/というフォルダに入っていると仮定しています。

Infinite Scrollのセッティング

WordPressに合わせてセッティングします。Twenty Elevenでは、次ページの出力をfunctions.phpで行っています。出力されるHTMLは以下のようになります。

<nav id="nav-below">
	<h3 class="assistive-text">投稿ナビゲーション</h3>
		<div class="nav-previous"><a href="http://example.com/?paged=2" ><span class="meta-nav">&larr;</span> 古い投稿</a></div>
		<div class="nav-next"></div>
</nav>

これに合わせてセレクタを指定します。

function wp_infinite_scroll_js_setting() {
    //個別ページ以外で読み込み
    if( ! is_singular() ) { ?>
    <script>
    var infinite_scroll = {
        loading: {
            img: "<?php echo get_template_directory_uri(); ?>/img/loader.gif"
        },
        //WordPressに合わせてセレクタをそれぞれ指定
        "nextSelector":"#nav-below .nav-previous a",
        "navSelector":"#nav-below",
        "itemSelector":"article",
        "contentSelector":"#content"
    };
    jQuery( infinite_scroll.contentSelector ).infinitescroll( infinite_scroll );
    </script>
    <?php
    }
}
add_action( 'wp_footer', 'wp_infinite_scroll_js_setting',100 );

jQueryのコアはWordPressコアに含まれているものを使用していると仮定しています。導入する際はご利用中のテーマにあわせて下さい。

細かいセット内容はinfinitescrollのドキュメントをご参照下さいませ。

動作確認

最後に動作を確認します。

↑ うまいこと次ページをスクロールだけで読み込んでくれました。

実際に導入するなら出来ればhashchangeイベント等を使って「ブラウザの戻る」にも対応させたいところですね。ページを見に行ってから戻ったら最初からスクロールし直し、というのは結構なストレス、というか結構な確立で離脱されます。

簡単ではありましたが、以上となります。