WordPress に AJAX 「他の投稿を読み込む」機能を実装するにはどうすればよいですか?

WordPress で AJAX "Load More Posts" 機能を実装する方法

この記事では、AJAX "Load More Posts" の実装の問題について説明します。 WordPress の機能。ユーザーは、全体をリロードすることなく、Web ページに追加の投稿を動的にロードできます。

問題の説明

ユーザーは、「カスタム WP_Query Ajax でのページネーション」で説明されている方法を含む、さまざまな方法を使用してこの機能を実装しようとしたときに問題が発生しました。 post.

解決策

提供されるソリューションは、適切な機能を確保するためにコードを改善することに重点を置いています。主な側面は次のとおりです:

1.サーバー側コード

• テンプレート ファイルで、最初の投稿クエリがページごとに必要な投稿数を返すことを確認します。
• 関数ファイルで関数を作成しますAJAX リクエストを処理し、より多くの投稿を動的にロードします。この関数には、正しい投稿セットを取得するためのページネーション ロジックが含まれている必要があります。

2.クライアント側のコード (jQuery)

• クライアント側で、イベント リスナーを「Load More」ボタンにバインドします。
• ボタンがクリックされると、送信されます。 jQuery を使用してサーバー側関数に AJAX リクエストを送信します。
• オフセットや投稿数などの必要なパラメーターを渡します。ページ。
• 返された HTML を既存の投稿リストに追加します。

3.その他の考慮事項

• [さらに読み込む] ボタンを無効にして、これ以上読み込む投稿がない場合に対処します。
• 「無限読み込み」効果を作成するには、ウィンドウ スクロールを使用します。ボタンクリックイベントの代わりに。

コード実装

提供されたコード スニペットに従って、 solution:

functions.php:

/**
 * Handle AJAX "Load More" request
 */
function load_more_posts() {
    $offset = $_POST['offset'];
    $ppp = $_POST['ppp'];

    $args = [
        'post_type' => 'post',
        'posts_per_page' => $ppp,
        'offset' => $offset,
        // Other query parameters...
    ];

    $query = new WP_Query($args);
    $html = '';

    if ($query->have_posts()) {
        while ($query->have_posts()) {
            $query->the_post();
            $html .= '<div>' . get_the_content() . '</div>';
        }
        wp_reset_postdata();
    } else {
        $html = 'No more posts to load';
    }

    echo $html;
    exit();
}

add_action('wp_ajax_load_more_posts', 'load_more_posts');
add_action('wp_ajax_nopriv_load_more_posts', 'load_more_posts');

script.js:

$(function() {
    var offset = 0;
    var ppp = 3;

    $('#load-more').on('click', function() {
        $.ajax({
            type: 'POST',
            url: 'path/to/wp-admin/admin-ajax.php',
            data: {
                action: 'load_more_posts',
                offset: offset,
                ppp: ppp
            },
            success: function(response) {
                $('#posts').append(response);
                offset += ppp;
            }
        });

        // Prevent the button from triggering multiple AJAX requests
        $('#load-more').attr('disabled', true);
    });
});

メモ: 置換「path/to/wp-admin/admin-ajax.php」を WordPress admin-ajax.php ファイルへの実際の URL に置き換えます。

結論

次のようにしますこれらの手順を実行すると、WordPress サイトに AJAX の「他の投稿を読み込む」機能を効果的に実装でき、ユーザーはサイトを更新せずに大量のコンテンツをシームレスに閲覧できるようになります。ページ全体。

以上がWordPress に AJAX 「他の投稿を読み込む」機能を実装するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。