質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

89.52%

WordPressでもっとみるボタンを一番シンプルに再現する方法について、無限スクロールがうまくできませんでした

受付中

回答 0

投稿

  • 評価
  • クリップ 0
  • VIEW 168

roronoazoro

score 64

WordPressでもっとみるボタンを一番シンプルに再現する方法についてお聞きさせてください。

やりたいこととしては10件一覧記事が表示されていて、もっとみるを押すとさらに10件表示されるといったものです。

調べてみると、無限スクロールといったものが比較的シンプルに再現できるかと思ったのですが、phpの記述に慣れていないためなのか、うまく再現することができませんでした。

参考サイト
【WordPress】「もっと見る」ボタンで読み込む無限スクロールを設置するよ!

元のループの記述部分は下記です。

<div class="wrap">
<?php
            if ( have_posts() ) :
                while ( have_posts() ) : the_post();
            ?>
            <article id="post-<?php the_ID(); ?>" <?php post_class('entry'); ?>>

            <a class="-link" href="<?php the_permalink(); ?>">
                <?php if (has_post_thumbnail()) : ?>
                    <?php the_post_thumbnail('full'); ?>
                <?php else : ?>
                    <?php echo get_the_image(); ?>
                <?php endif ; ?>
            </a>

            <div class="text-wrap">
                <div class="entry-info">
                    <div class="categories">
                        <?php $cat = get_the_category(); $cat = $cat[0]; { echo $cat->cat_name; } ?>
                    </div>
                    <time class="time" datetime="<?php the_time('m-d'); ?>"><?php the_time('m月d日'); ?></time>
                </div><!-- /.entry-info -->

                <a href="<?php the_permalink(); ?>"><h2 class="title -pd"><span><?php the_title(); ?></span></h2></a>

            </div><!-- /.text-wrap -->

            </article><!-- /.entry -->

            <?php
                endwhile;
            endif;
            ?>
</div>

参考サイトを真似て記述してみたものです。
jsはヘッダーの方で読み込んであります。

<?php get_header(); ?>
<script>
var infScroll = new InfiniteScroll( '.postWrap', { //大枠のセレクタ
    append: '.post', //読み込むボックスたちのセレクタ
    path: '.pagination .next', //次ページへ飛ぶための「次へ」ボタンのセレクタ
    hideNav: '.pagination', //ページネーションのセレクタ
    button: '.moreButton', //「もっと見る」ボタンのセレクタ
    scrollThreshold: false, //自動で次のページを読み込まないようにする
    status: '.scroller-status', // ステータスのセレクタ
    history: 'false', //読み込み後のURLを変更しない
});
infScroll.on( 'append', function( response, path, items ) {
    //読み込み後に何かしたい場合はここに書く
});
</script>

    <div class="contents-wrap">
        <div class="main-contents main-list" id="article-list">

            <?php
            if ( have_posts() ) :
                while ( have_posts() ) : the_post();
            ?>
            <article id="post-<?php the_ID(); ?>" <?php post_class('entry'); ?>>

            <a class="-link" href="<?php the_permalink(); ?>">
                <?php if (has_post_thumbnail()) : ?>
                    <?php the_post_thumbnail('full'); ?>
                <?php else : ?>
                    <?php echo get_the_image(); ?>
                <?php endif ; ?>
            </a>

            <div class="text-wrap">
                <div class="entry-info">
                    <div class="categories">
                        <?php $cat = get_the_category(); $cat = $cat[0]; { echo $cat->cat_name; } ?>
                    </div>
                    <time class="time" datetime="<?php the_time('m-d'); ?>"><?php the_time('m月d日'); ?></time>
                </div><!-- /.entry-info -->

                <a href="<?php the_permalink(); ?>"><h2 class="title -pd"><span><?php the_title(); ?></span></h2></a>

            </div><!-- /.text-wrap -->

            </article><!-- /.entry -->

            <?php
                endwhile;
            endif;
            ?>

<div class="pagination">
    <?php global $wp_rewrite;
    $paginate_base = get_pagenum_link(1);
    if(strpos($paginate_base, '?') || ! $wp_rewrite->using_permalinks()){
        $paginate_format = '';
        $paginate_base = add_query_arg('paged','%#%');
    }
    else{
        $paginate_format = (substr($paginate_base,-1,1) == '/' ? '' : '/') .
        user_trailingslashit('page/%#%/','paged');;
        $paginate_base .= '%_%';
    }
    echo paginate_links(array(
        'base' => $paginate_base,
        'format' => $paginate_format,
        'total' => $wp_query->max_num_pages,
        'mid_size' => 4,
        'current' => ($paged ? $paged : 1),
        'prev_text' => '<< 前へ',
        'next_text' => '次へ >>',
    )); ?>
</div>

<?php
// 現在のページ数
global $paged;
if( empty( $paged ) ) $paged = 1;

// 全ページ数
global $wp_query;
$pages = $wp_query -> max_num_pages;
if( !$pages ) {
    $pages = 1;
}
// ページが1ページのみ&最後のページでは表示しない
if( $pages != 1 && $paged < $pages ) {
    echo ' 
    <div class="moreButton"><button id="more-button" type="button">もっと見る</button></div>
    <div class="scroller-status">
        <div class="infinite-scroll-request">読み込み中</div>
        <p class="infinite-scroll-last">これ以上は記事がありません</p>
        <p class="infinite-scroll-error">読み込むページはありません</p>
    </div>
    ';
}            
 ?>    



        </div><!-- /.main-contents -->

    </div><!-- /.contents-wrap -->

<?php get_footer(); ?>

上記アップしてソースをみても下記しか出力されていない状況です。
<div class="pagination"></div>

上記のやり方以外でも何か参考になるアドバイスいただけるととても助かります。
よろしくお願いします。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

まだ回答がついていません

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 89.52%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる
  • トップ
  • PHPに関する質問
  • WordPressでもっとみるボタンを一番シンプルに再現する方法について、無限スクロールがうまくできませんでした