Blog

HOME > Web > Wordpress > 【WordPress】jQuery autopagerを使って次ページへ自動読み込み

【WordPress】jQuery autopagerを使って次ページへ自動読み込み

2016/06/10

Wordpress JQuery

備忘録です。

jQuery autopagerでページャーを使わずに次ページを表示する方法です。

参考サイト
jQueryのautopagerで次ページを画面遷移なしで自動読込みする方法

1.jQuery.autopagerのダウンロード

jQuery.autopagerをダウンロード
公式サイトはすでに閉鎖されているため、上記よりダウンロードしてください。

2.ローディングアイコンをダウンロード

下記でアイコンをダウンロードしてください。
ローディング・アイコン animations generator

3.下記コードをarchive.phpなどに記述

<div class="new-post">
  ・・・ここに記事一覧などを表示
</div>
 
<div id="next">
  <a href="<?php echo next_posts(0, false); ?>">次の記事を表示！</a>
  <img id="loading" src="/img/icon_loading.gif" alt="読み込み中"  width="29" height="29">
</div>

4.テンプレートファイルのフッターに記述

※jQueryをすでにヘッダー等で読み込んでいる場合には省略してください

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="<?php echo get_template_directory_uri() ?>/jquery.autopager-1.0.0.js"></script>
<script>
  //  最大ページ数取得
  var maxpage = <?php echo $wp_query->max_num_pages; ?>;
 
$('#loading').css('display', 'none');
$.autopager({
    content: '.new-post',// 読み込むコンテンツ
    link: '#next a', // 次ページへのリンク
    autoLoad: false,// スクロールの自動読込み解除
 
    start: function(current, next){
      $('#loading').css('display', 'block');
      $('#next a').css('display', 'none');
    },
 
    load: function(current, next){
        $('#loading').css('display', 'none');
        $('#next a').css('display', 'block');
        if( current.page >= maxpage ){ //最後のページ
            $('#next a').hide(); //次ページのリンクを隠す
        }
    }
});
 
$('#next a').click(function(){ // 次ページへのリンクボタン
    $.autopager('load'); // 次ページを読み込む
    return false;
});
</script>

※autoLoadをtrueにすると自動読み込みになります。
「もっと見る」を使う場合にはfalseを指定してください。

カテゴリー

月間アーカイブ

«前の記事

一覧に戻る

次の記事»

最近の投稿

人気の記事

MORE

ミュージシャンズ・プラザ

神社仏閣ホームーページ制作

ホームページ制作問合せ