【Wordpress】トップページ記事一覧の「もっと見る」リンクの設置の方法

トップページにページャー(前へ/1/2/3/・・・次へ)を設置せず、
「もっと見る」リンクで次ページの内容を追加読み込みをする方法です。

投稿記事一覧の取得方法は「pre_get_posts」を使います。
「WP_Query」で取得すると、/page/2が４０４エラーになってしまうので、「pre_get_posts」を使うことをおすすめします。

pre_get_postsでの記事一覧取得方法

【【wordpress】pre_get_postsを使ってみませんか？】
https://qiita.com/_ruka_/items/e14280d34eddf49efad1#pre_get_postsのご提案

【pre_get_postsでメインクエリを制御する ｜ Tips Note by TAM】
https://www.tam-tam.co.jp/tipsnote/cms/post9420.html

「もっと見る」リンク部分

<?php if($paged < $wp_query->max_num_pages): ?>
<div id="next">
    <p><a href="<?php echo next_posts($wp_query->max_num_pages, false); ?>">もっと見る</a>
    </p>
    <p><img id="loading" src="<?php echo get_stylesheet_directory_uri() ?>/images/loading.gif" alt="読み込み中">
    </p>
</div>
<?php endif;?>


<script>
    var maxpage = <?php echo $wp_query->max_num_pages; ?>;
    jQuery( '#loading' ).css( 'display', 'none' );　 // ローディング画像は一旦消す。
    jQuery.autopager( {
        content: '.itiran dl', // 読み込むコンテンツ
        link: '#next a', // 次ページへのリンク
        autoLoad: false, // スクロールの自動読込み解除
        start: function ( current, next ) {
            jQuery( '#loading' ).css( 'display', 'block' );
            jQuery( '#next a' ).css( 'display', 'none' );
        },
        load: function ( current, next ) {
            jQuery( '#loading' ).css( 'display', 'none' );
            jQuery( '#next a' ).css( 'display', 'block' );
             if( current.page >= maxpage ){ //最後のページ
            　　 jQuery('#next').hide(); //次ページのリンクを隠す
      　　　　     }
        }
    } );
    jQuery( '#next a' ).click( function () { // 次ページへのリンクボタン
        jQuery.autopager( 'load' ); // 次ページを読み込む
        return false;
    } );
</script>