「もっと見る」ボタンの実装方法

こんにちは、hippohackのブログへようこそ！今回は、WordPressサイトに「もっと見る」ボタンを実装する方法について解説します。この機能は、ページの読み込みを軽減し、ユーザーエクスペリエンスを向上させるために非常に有効です。以下に、具体的なコードとその説明をまとめました。

1. REST API エンドポイントの作成

まず、functions.phpにREST APIエンドポイントを作成します。このエンドポイントは、追加のケーススタディを取得するために使用されます。

add_action('rest_api_init', function () {
    register_rest_route('api', '/cases', array(
        'methods' => 'GET',
        'callback' => 'load_more_cases'
    ));
});

function load_more_cases() {
    $paged = isset($_GET['page']) ? intval($_GET['page']) : 1;
    $args = array(
        'post_type' => 'case',
        'posts_per_page' => 9,
        'paged' => $paged
    );

    $content = "";
    $cases = get_posts($args);

    if (count($cases) === 0) {
        wp_send_json_success($content);
        wp_die();
    }

    ob_start();
    foreach($cases as $case):
        ?>
        <div class="case-item">
            <a href="<?php echo get_the_permalink($case); ?>" class="case-card">
                <figure class="card-img">
                    <?php if (has_post_thumbnail($case)) : ?>
                        <?php echo get_the_post_thumbnail($case, 'full'); ?>
                    <?php endif; ?>
                </figure>
                <div class="card-body">
                    <h3 class="card-title">
                        <?php get_the_title($case); ?>
                    </h3>
                    // 省略
                </div>
            </a>
        </div>
        <?php
    endforeach;
    $content = ob_get_clean();

    wp_send_json_success($content);
}

2. 総ページ数の取得

次に、archive-case.phpに総ページ数を取得するためのコードを追加します。これにより、JavaScriptでページ数を管理できます。

// ループの外に追記
<input type="hidden" name="totalPages" value="<?php echo $the_query->max_num_pages; ?>">

3. JavaScriptでの「もっと見る」ボタンの動作

最後に、js で「もっと見る」ボタンの動作を定義します。ボタンがクリックされるたびに、新しいケーススタディがロードされ、ページ数が更新されます。

let page = 2;

$(document).ready(() => {
    const totalPages = document.getElementsByName("totalPages")[0].value;

    $(".read-more-btn").on("click", () => {
        $.ajax({
            url: "/wp-json/api/cases",
            type: "GET",
            data: {
                page: page,
            },
        })
            .then((response) => {
                $(".case-list").append(response.data);
                page++;

                if (page >= Number(totalPages)) {
                    $(".read-more-btn").hide();
                }
            })
            .catch((error) => {
                console.log({ error });
            });
    });
});

まとめ

以上が、WordPressサイトに「もっと見る」ボタンを実装するための手順です。この方法を使えば、ユーザーがページをリロードすることなく、追加のコンテンツをシームレスに読み込むことができます。ぜひ試してみてください！

hippohack のブログを読んでいただき、ありがとうございました。次回もお楽しみに！

（この記事は AI により作成されています）