jquery.autopager-1.0.0.jsをWordPressで使う。

こんにちは、昨日から紙の日記をつけ始めた藤中です。

FacebookやTwitterなどでよく見る、ページの下までスクロールすると次の記事が出てくる機能。
これは非同期通信という技術で、ノンプログラマーにとっては、けっこう敷居が高いもの。
弊社には専門のエンジニアがいて、彼等に頼めば最適化されたものを組んでくれますが、コーディング時にさっと組み込みたいときもあります。

jquery.autopager-1.0.0.jsは、現在開発が止まってしまっていますが、実装が簡単で、jQueryの1.x 系なら最新版（開発時jQuery 1.11.3）でも動作します。

WordPressのデフォルトテンプレートTwenty Fifteenでは、トップページが10エントリーごとにページ分割されるので、ここにjquery.autopagerを組み込みます。

大まかな手順

10エントリーごとなどにページ分割する
jquery.autopagerを設置
テンプレート修正

組み込み

ソースコードはここからダウンロードできます。
ダウンロードしたファイルをtwentyfifteen/jsフォルダに入れておきます。

まず、header.phpの<?php wp_head(); ?>以下に下のような記述をします。

<?php wp_head(); ?>
<?php if(is_home()): ?>
<script type='text/javascript' src='<?php bloginfo('template_directory'); ?>/js/jquery.autopager-1.0.0.js'></script>
<script type="text/javascript">
(function($){
  $(function(){
    $.autopager({
      autoLoad: true, // 自動読み込みするかどうか
      content : '#main', // 自動読み込みしたいコンテンツ部分のセレクタ 
      link : '#autoload a', // 次ページへのリンクのセレクタ
      load: function(current, next){
        $('#autoload a').css('display', 'none');
      } //ローディング後の処理
    });
  });
})(jQuery);
</script>
<?php endif; ?>
</head>

トップページだけで使うので<?php if(is_home()): ?>でラップします。
<?php wp_head(); ?>で読み込まれる、WordPress標準のjQueryを使います。

<script type='text/javascript' src='http://WordPressのディレクトリ/wp-includes/js/jquery/jquery.js?ver=1.11.2'></script>

(function($){ ～ })(jQuery);

でラップすれば、通常と同様$をjQueryのエイリアスとして使用できます。

次にindex.phpを開き、</main>の前に以下の記述をします。

<?php if(1<$wp_query->max_num_pages){ ?>
<div id="autoload" style="text-align: center"><?php next_posts_link('Loading'); ?></div>
<?php } ?>
</main><!-- .site-main -->

ローディング画像を用意する場合は、<div id=”autoload”>内に書いてください。

ページネーションのナビが不要になるので、index.phpの以下の部分をコメントアウトします。

/*the_posts_pagination( array(
'prev_text' => __( 'Previous page', 'twentyfifteen' ),
'next_text' => __( 'Next page', 'twentyfifteen' ),
'before_page_number' => '<span class="meta-nav screen-reader-text">' . __( 'Page', 'twentyfifteen' ) . ' </span>',
) );*/

これで、ページの一番下までスクロールすれば、自動的に続きが読み込まれるはずです。