[wordpress] ページの遷移なしで記事一覧を追加するautopager設置方法（自動・手動読み込み）

アプリなどでよくあるページの一番下まで移動すると勝手に記事が読み込まれて一覧が追加で表示される機能をwordpressにも追加することができる

autopagerというjqueryを使用した外部スクリプトを使用する

設置方法は以下の通り

autopagerのダウンロード

まず下記URLからjquery.autopager-1.0.0.jsをダウンロードしてwordpressのサイトにアップロードする

https://github.com/sagotsky/jquery-autopager

CSSなどは使っても使わなくてもよい

 

前提条件

記事を繰り返し読み込ませたい時の記事一覧が包含されているclassもしくはidを決めておく

例↓

<div class="blogWrapper">
    <!--この中でwhile (have_posts()) : the_post();などでループをしている場合-->
</div>

上の例ではclass=”blogWrapper”が重要となる

 

読み込みボタンの設置

手動で読み込ませる場合は、「もっと見る」などのボタンなどを設置する

設置する場所は先程の↑のdevの直下である必要がある

例↓

<div class="blogWrapper">
    <!--この中でwhile (have_posts()) : the_post();などでループをしている場合-->
</div>

<div id="nextLoader">
  <a href="<?php echo next_posts(0, false); ?>">もっと見る</a>
  <i class="fas fa-sync-alt fa-spin fa-2x fa-fw" id="loading"></i>
</div>

上の例ではローディングアイコンは無料アイコンとして使用できる「fontawesome」のfa-sync-altを「fa-spin」で回転させている。ここではfontawesomeの設置は割愛する

もしfontawesomeを使いたい場合は本家fontawesomeサイトにて無料アカウントを作成してJavascriptの読み込みも必要なので留意すること

https://fontawesome.com/

 

wordpressの記事phpに下記コードを埋め込む

ボタンの設置ができたので、ボタンを押すとローディングアイコンが表示され、blogWrapperの中身がページ移動なしに追加できるjacascriptを書く

別途jqueryファイルの読み込みは不要なので下記コードで動作する

<script src="<?php echo get_template_directory_uri() ?>/js/jquery.autopager-1.0.0.js"></script>
<script>
    //  無限スクロール最大ページ数取得
    var maxpage = <?php echo $wp_query->max_num_pages; ?>; 
    $('#loading').css('display', 'none');
    if(maxpage==1){//１ページしかない場合はボタンを隠す
        $('#nextLoader a').hide();// more リンクを隠す
    }
    $.autopager({
        content: '.blogWrapper',// 読み込むコンテンツ (要素のこと、.やidであれば#が必要なので注意)
        link: '#nextLoader a', // 次ページへのリンク
        autoLoad: false,// ボタンを押して読み込ませたい場合はfalse
        permalink: false, //これを入れると戻るボタンを押した時にPage1に戻る、TrueにするとPage1には戻らずリンクを開いた時のPage数に戻る
        start: function(current, next){
          $('#loading').css('display', 'block');
          $('#nextLoader a').css('display', 'none');
        },
        load: function(current, next){
            $('#loading').css('display', 'none');
            $('#nextLoader a').css('display', 'block');
            var url = next.url.split('?');
            url = url[0].split('/');
            var nextpage = url[url.length-2];//後ろから2番目(数字)を取得

            if(next.url == null||nextpage>maxpage){//一番最後の時
                $('#nextLoader a').hide();// more リンクを隠す
            }
        }
    });
    $('#nextLoader a').click(function(){ // 次ページへのリンクボタン
        $.autopager('load'); // 次ページを読み込む
        return false; 
    });

</script>

↑の例ではautopagerスクリプトはwordpressのテンプレートのjsフォルダに保管しているのでget_template_directory_uri()でフォルダを指定している

重要なのは「content: ‘.blogWrapper’,」のところであり、前提条件で読み込みさせたい要素の名前を記述する、今回はblogWrapperだったがこちらはHTMLコードによって異なるので変更すること。

 

自動で読み込ませたい場合は？

もし自動で読み込ませたい場合は９行目の「autoLoad: false,」のところをtrueにすると自動でどんどん読み込んでいってくれる。

 

最後のページまで読み込んだ場合はボタンを隠したい

一番最後のページまで読み込んだ場合は「もっと見る」ボタンを隠したい

↑の例では

if(next.url == null||nextpage>maxpage){//一番最後の時
  $('#nextLoader a').hide();// more リンクを隠す
}

としているが、これはnext.urlがnullにならなかったので、二重予防でnextpage>maxpageの場合でもnextLoader要素をhideするようにしている。