WordPressで「もっと見る」ボタンを活用して記事を追加表示する方法

ウェブサイトを運営する際、たくさんの記事を一度に表示すると、ページが長くなりすぎてしまうことがあります。特にブログやニュースの一覧ページでは、初期表示では数件の記事だけを表示し、ユーザーの操作によって追加の記事を表示できる仕組みが効果的です。今回は、WordPressで「もっと見る」ボタンをクリックするたびに記事を5件ずつ表示する方法をご紹介します。

手順

この記事では、以下の手順で実装を行います：

初期表示で5件の記事を表示。
「もっと見る」ボタンをクリックすると、さらに5件の記事を表示。
すべての記事が表示されたらボタンが非表示に。

1. PHPコードの修正

まず、全記事を取得し、5件目以降を非表示にするためのPHPコードを修正します。このコードでは、WP_Queryで全記事を取得し、5件目まではそのまま表示、それ以降の記事にはhiddenクラスを付与して、初期表示では非表示にします。

<div class="news__wrap">
    <dl class="table d-flex j-c-between">
        <?php
        $paged = get_query_var('paged') ? get_query_var('paged') : 1; 

        $posts = new WP_Query(array(
            'posts_per_page' => -1,
            'paged' => $paged,
            'post_type' => array('post'),
        ));
        
        if($posts->have_posts()): 
            $post_count = 0; // 記事カウンタ
            while($posts->have_posts()): 
                $posts->the_post(); 
                $post_count++;
        ?>
        <dt class="news-item <?php if($post_count > 5) echo 'hidden'; ?>"><?php the_time('Y.m.d') ?></dt>
        <dd class="news-item <?php if($post_count > 5) echo 'hidden'; ?>">
            <div class="accordion_wrap"><?php the_title(); ?></div>
            <div class="text"><?php the_content(); ?></div>
        </dd>
        <?php 
            endwhile; 
        endif; 
        wp_reset_postdata();
        ?>
    </dl>
    <div class="tc mt20"><div class="btn" id="news__btn">もっと見る</div></div>
</div>

2. CSSで非表示の設定

次に、5件目以降の記事を初期表示で非表示にするためのCSSを追加します。hiddenクラスにdisplay: none;を指定して、これを記事の要素に付与します。

.hidden {
    display: none;
}

3. JavaScriptで「もっと見る」ボタンの機能を実装

最後に、ユーザーが「もっと見る」ボタンをクリックすると、次の5件の記事を表示するJavaScriptを追加します。この例では、jQueryを使用しています。クリックごとに次の5件が表示され、すべての記事が表示されるとボタンが非表示になります。

jQuery(document).ready(function($) {
    var postCount = 5; // 初期表示件数

    $('#news__btn').on('click', function() {
        postCount += 5; // クリックごとに5件増加
        $('.news-item.hidden').slice(0, 5).removeClass('hidden'); // 次の5件を表示

        // すべての記事が表示されたらボタンを非表示にする
        if ($('.news-item.hidden').length === 0) {
            $('#news__btn').hide();
        }
    });
});

実装のポイント

全記事を取得: WP_Queryを使い、posts_per_pageを-1に設定することで、すべての記事を取得します。
初期表示のコントロール: PHPで記事ごとにカウンターを追加し、5件目以降にはhiddenクラスを付けて非表示にします。
「もっと見る」ボタン: JavaScriptのクリックイベントで、非表示になっている記事を少しずつ表示し、すべて表示されたらボタンを非表示にする動作を実装します。