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

WordPress で Ajax 経由でさらに投稿を読み込む

WordPress に投稿を動的に読み込むための「さらに読み込む」ボタンを実装するには、PHP とJavaScript。特定のアプローチの概要を説明しましたが、コードの機能や効率に影響を与える追加の要因がある可能性があります。改訂され強化されたソリューションは次のとおりです。

HTML マークアップ:

<div>
<p><strong>関数 PHP ファイル:</strong></p>
<pre class="brush:php;toolbar:false">function more_post_ajax() {
    $offset = $_POST["offset"];
    $ppp = $_POST["ppp"];

    header("Content-Type: text/html");
    $args = [
        'suppress_filters' => true,
        'post_type' => 'post',
        'posts_per_page' => $ppp,
        'cat' => 1,
        'offset' => $offset,
    ];

    $loop = new WP_Query($args);

    while ($loop->have_posts()) {
        $loop->the_post();
        the_content();
    }
    exit;
}

add_action('wp_ajax_nopriv_more_post_ajax', 'more_post_ajax');
add_action('wp_ajax_more_post_ajax', 'more_post_ajax');

wp_localize_script(
    'twentyfifteen-script',
    'ajax_posts',
    array(
        'ajaxurl' => admin_url('admin-ajax.php'),
        'noposts' => __('No older posts found', 'twentyfifteen'),
    )
);

jQuery機能:

var ppp = 3; // Posts per page
var page = 5; // Current page number, starting from 1

$('#more_posts').click(function() {
    $('#more_posts').attr('disabled', true);
    var offset = (page * ppp) + 1;

    $.post(
        ajax_posts.ajaxurl,
        {
            action: 'more_post_ajax',
            offset: offset,
            ppp: ppp,
        }
    ).success(function(posts) {
        page++;
        $('#ajax-posts').append(posts);
        $('#more_posts').attr('disabled', false);
    });
});

追加の考慮事項:

• カテゴリ フィルタリング: データを追加することで、カテゴリ フィルタリングを組み込むことができます。属性をカテゴリ ID とともに「さらに読み込む」ボタンに追加します。次に、PHP コードで $_POST 配列からカテゴリ ID を取得し、クエリ引数に 'cat' パラメータを含めます。
• Infinite Load: 無限スクロールの場合は、次を使用できます。ユーザーがページを下にスクロールすると、投稿を自動的に読み込む jQuery のスクロール イベント。 1 つの方法は、ページの下部からビューポートの上部までの距離がしきい値 (100 ピクセルなど) 未満のときに投稿を読み込むことです。
• 読み込みインジケーター: の追加を検討してください。投稿の読み込み中にユーザーに視覚的なフィードバックを提供する読み込みスピナーまたはインジケーター。
• エラー処理: を確認してくださいAjax リクエストまたは後処理中に発生する可能性のある潜在的なエラーを処理するために、PHP コードと JavaScript コードの両方で適切なエラー処理を行います。