web-dev-qa-db-ja.com

WP_Query ajaxローダーが投稿の終わりを検出

私は次のようにajaxローダーを作りました。

すべての投稿の最後に到達したことをどうやって検出できますか？ 「More」ボタンを消したり、もうクリックできないようにすることができます。

ページテンプレート内：

WP_Query stuff...

if ($press_posts->max_num_pages > 1) :
    echo '<a class="link-button" id="load-more">More</a>';
endif;

functions.php

function more_post_ajax() {
    $offset = $_POST["offset"];
    $ppp = $_POST["ppp"];
    header("Content-Type: text/html");

    $args = array(
        'cat' => 1,
        'posts_per_page' => $ppp,
        'offset' => $offset
    );

    $loop = new WP_Query($args);
    while ($loop->have_posts()) { $loop->the_post();
        get_template_part('template-parts/content', 'ajax');
    }
    exit;
}
add_action('wp_ajax_nopriv_more_post_ajax', 'more_post_ajax');
add_action('wp_ajax_more_post_ajax', 'more_post_ajax');

とJavaScript：

<script>
    var ajaxUrl = "<?php echo admin_url('admin-ajax.php')?>";
    var page = 1;
    var ppp = 6; // posts per page

    jQuery("#load-more").on("click", function() {
        jQuery("#load-more").addClass("disabled");
        jQuery.post(ajaxUrl, {
            action: "more_post_ajax",
            offset: (page * ppp) + 1,
            ppp: ppp
        }).success(function(posts) {
            page++;
            jQuery("#press-listing").append(posts); // append to container
            jQuery("#load-more").removeClass("disabled");
        });

    });
</script>
wp-queryajaxpagination
1
Stickers

ページテンプレート：

<div class="entry-content">
    <?php 
        $args = array(
            'post_type' => 'post',
            'post_status' => 'publish',
            'posts_per_page' => '2',
            'paged' => 1,
        );
        $my_posts = new WP_Query($args);
        if ($my_posts->have_posts()) : 
    ?>
        <div class="my-posts">
            <?php while ($my_posts->have_posts()) : $my_posts->the_post(); ?>
                <h2><?php the_title(); ?></h2>
                <?php the_excerpt(); ?>
            <?php endwhile; ?>
        </div>
    <?php endif; ?>
    <div class="loadmore">Load More...</div>
</div>

Ajax jQuery（もっと読み込むボタン）：

<script type="text/javascript">
var ajaxurl = "<?php echo admin_url('admin-ajax.php'); ?>";
var page = 2;
jQuery(function($) {
    $('body').on('click', '.loadmore', function() {
        var data = {
            'action': 'load_posts_by_ajax',
            'page': page,
            'security': '<?php echo wp_create_nonce("load_more_posts"); ?>'
        };

        max = <?php echo $my_posts->max_num_pages; ?>

        $.post(ajaxurl, data, function(response) {
            $('.my-posts').append(response);
            if (page < max) {
                // end of posts
            }
            page++;
        });
    });
});
</script>

関数：

function load_posts_by_ajax_callback() {
    check_ajax_referer('load_more_posts', 'security');
    $paged = $_POST['page'];
    $args = array(
        'post_type' => 'post',
        'post_status' => 'publish',
        'posts_per_page' => '2',
        'paged' => $paged,
   );
    $my_posts = new WP_Query($args);
    if ($my_posts->have_posts()) :
        ?>
        <?php while ($my_posts->have_posts()) : $my_posts->the_post(); ?>
            <h2><?php the_title(); ?></h2>
            <?php the_excerpt(); ?>
        <?php endwhile; ?>
        <?php
    endif;
    wp_die();
}
add_action('wp_ajax_load_posts_by_ajax', 'load_posts_by_ajax_callback');
add_action('wp_ajax_nopriv_load_posts_by_ajax', 'load_posts_by_ajax_callback');

追加 - Ajax jQuery（スクロール時のロード）：

$(window).scroll(function() {
    if ($(window).scrollTop() == $(document).height() - $(window).height()) {
        var data = {
            'action': 'load_posts_by_ajax',
            'page': page,
            'security': '<?php echo wp_create_nonce("load_more_posts"); ?>'
        };

        $.post(ajaxurl, data, function(response) {
            $('.my-posts').append(response);
            page++;
        });
    }
});

出典

0
Stickers

私はそれがREST AP​​Iを調べる価値があるかもしれないというコメント投稿者@TomJNowellに同意します。しかし、あなたの具体的な質問に関して：

これは考えです：

  • more_post_ajax()関数に投稿が残っていないか確認し、返信している投稿に加えてそれを返信に含めます。たとえば、more_postsブールフラグ、またはおそらくカウントを指定できます。しかしあなたはそれをやりたいのです。
  • 最後に、.success(function(posts) { ... })の実装を拡張して、この新しい情報を処理するロジックを応答に追加します。投稿が残っていない場合は、#load-more要素を無効化または非表示にして、投稿が残っていないことを示すメッセージをユーザーに追加することができます。

get_template_part('template-parts/content', 'ajax')を介して呼び出すテンプレート部分に正確に何が含まれているのか、またはその部分がどのように行われているのか、その領域に関してより具体的にするのが難しいのかわかりません。

どちらの方法でも、WP_Queryに格納されている$loopのインスタンスには、投稿の配列であるpostsプロパティがあります。私はあなたがあなたの応答の一部としてpostsを送り返したいと思うかもしれません。

WP_Queryプロパティfound_postsは、オフセットno_found_rows（この場合はN/A）で無効にしない限り、オフセットを考慮せずに基準に一致するすべての投稿の数です。あなたはページごとのあなたの投稿を知っていてオフセットしているので、あなたがロードするために利用可能な投稿がもっとあるかどうかにかかわらずあなたの応答に送り返すべき情報があります。別の方法はmax_num_pagesプロパティです。

これらを組み合わせて配列/オブジェクトにし、wp_send_json()またはwp_send_json_success()を使って送信してからjsで応答を処理することができます。応答を解析するにはjQueryのparseJSON()が必要です。

テンプレートパーシャルが出力していることに本当に結婚していて、それを表示するためにjs側でjQuery("#press-listing").append(posts)を簡単に実行する方法が好きな場合は、出力バッファリングを使用してget_template_part('template-parts/content', 'ajax');の出力をキャプチャします。あなたの反応、例えば.

ob_start();
get_template_part('template-parts/content', 'ajax');
// call ob_get_contents() and load the return value into an array or string to send back
ob_end_clean();
0
firxworx

あなたのコードの変更$offet to $paged変数WP_Queryはあなたのループオブジェクト内のページの総数を与えるページを追跡することができます。

$loop->max_num_pages

<script>
    var ajaxUrl = "<?php echo admin_url('admin-ajax.php')?>";
    var page = 1;
    var ppp = 6; // posts per page

    jQuery("#load-more").on("click", function() {
        jQuery("#load-more").addClass("disabled");
        jQuery.post(ajaxUrl, {
            action: "more_post_ajax",
            page: page,
            ppp: ppp
        }).success(function(posts) {
            // execute this block only if there is post
            if(posts) { 
            page++;
            jQuery("#press-listing").append(posts); // append to container
            jQuery("#load-more").removeClass("disabled");
            }
        });

    });
</script>

そして、あなたはPHPのAJAX関数になるでしょう

function more_post_ajax() {
    $page = $_POST["page"];
    $ppp = $_POST["ppp"];
    header("Content-Type: text/html");

    $args = array(
        'cat' => 1,
        'posts_per_page' => $ppp,
        'paged' => $page
    );

    $loop = new WP_Query($args);

    if($loop->max_num_pages <= $page):

    while ($loop->have_posts()) { $loop->the_post();
        get_template_part('template-parts/content', 'ajax');
    }
    exit;

   else:
     echo 0;
     die();

   endif;
}
add_action('wp_ajax_nopriv_more_post_ajax', 'more_post_ajax');
add_action('wp_ajax_more_post_ajax', 'more_post_ajax');
0
Raja Mohammed