WordPress 投稿に「もっと読み込む」Ajax ボタンを実装するにはどうすればよいですか?

WordPress の「Load More Posts Ajax」ボタン

このチュートリアルでは、WordPress に「Load More」ボタンを実装して投稿を段階的に読み込む問題について説明します。アヤックス経由。この問題には、新しい投稿をオンデマンドで取得して表示するための jQuery、Ajax、WordPress 関数の統合が含まれます。

解決策:

index.php テンプレート ファイルに、ID「ajax-posts」のコンテナ要素を作成し、限られた数の投稿をクエリして表示するための PHP コードを含めます(例: 3)。 ID「more_posts」のボタンを追加して、追加の投稿の読み込みをトリガーします。

functions.php ファイルで、Ajax リクエストを処理する関数 (more_post_ajax()) を作成します。この関数は、ページごとのオフセットと投稿数をパラメーターとして受け取り、データベースにクエリを実行して次の投稿セットを取得します。

Ajax 呼び出し (スクリプト ファイルまたはインラインのいずれか) )、Ajax URL を設定し、ページごとのオフセットと投稿数をデータとして送信し、取得した投稿を「ajax-posts」コンテナーに追加してページをインクリメントすることで応答を処理します。 number.

コード例:

index.php

<div>

functions.php

function more_post_ajax() {
    // Get offset and number of posts per page
    $offset = $_POST['offset'];
    $ppp = $_POST['ppp'];

    // Query database to retrieve next set of posts

    // Return retrieved posts
    echo $posts;
    exit;
}

Ajax

// Set Ajax URL
var ajaxUrl = '<?php echo admin_url('admin-ajax.php') ?>';

// When "Load More" button is clicked
$('#more_posts').on('click', function() {
    // Disable button temporarily
    $(this).attr('disabled', true);

    // Send Ajax request with offset and number of posts per page
    $.post(ajaxUrl, {
        action: 'more_post_ajax',
        offset: (page * ppp) + 1,
        ppp: ppp
    })
    .success(function(posts) {
        // Append retrieved posts to container
        $('#ajax-posts').append(posts);
        // Increment page number
        page++;
        // Re-enable "Load More" button
        $('#more_posts').attr('disabled', false);
    });
});

に電話します

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