主页 / 问题 / 1369198
Accepted
rabbit
Asked:2022-06-07 06:20:10 +0000 UTC2022-06-07 06:20:10 +0000 UTC

限制帖子时加载剩余帖子加载更多wordpress

  • 772

我的网站使用ajax加载帖子的原则是滚动时加载更多。可以加载，直到加载所有帖子。客户要求限制上传帖子的数量。我几乎明白了。但是有一个问题：

每个滚动条加载 8 或 9 个帖子。例如，我将上传限制为 20 个帖子。问题是代码只会加载 8 或 9 个帖子的倍数 - 16 或 18。此外，如果我限制为 30 个帖子，那么如果加载 8 个帖子，则只会加载 24 个帖子，如果加载 9 个帖子，则会加载 27 个帖子。但是如何加载其余部分，我无法理解？！那些。限制是20个，我上传8个，最后16个帖子。其他4个不会加载。

请帮助解决这个问题。或者至少给我一个提示。

谢谢！

这是ajax代码：

document.addEventListener("DOMContentLoaded", () => {
        let ajaxurl = '<?php echo admin_url('admin-ajax.php') ?>';
        let section_posts = 1;
        let postData = new FormData();
        let scroll_state = true;
        let loader = document.querySelector('.articlefeed_loader');
        let height_footer = document.querySelector('.site-footer').getBoundingClientRect().height;
        //let max_posts = <?php print json_encode(get_limit_val())?>;

        window.addEventListener('scroll', function () {
            if (scroll_state == true) {
                if ((window.innerHeight + window.pageYOffset) >= (document.body.offsetHeight - height_footer)) {
                    postData.append('action', 'loadmore');
                    postData.append('paged', section_posts);
                    postData.append('posts_per_page', <?php echo $posts_per_page;?>);
                    postData.append('cats', <?php print json_encode(get_selected_cats())?>);
                    postData.append('max_posts', <?php print json_encode(get_limit_val())?>);

                    const xhr = new XMLHttpRequest();
                    xhr.open('POST', ajaxurl);
                        xhr.addEventListener('readystatechange', function (data) {
                            if (this.readyState === 4 && this.status === 200) {
                                document.querySelector('.articlefeed_template_wrap').innerHTML += data.target.responseText;
                            } else {}
                        });            
                    xhr.send(postData);
                    scroll_state = false;
                    timeout = setTimeout(function() {
                        scroll_state = true;
                    }, 1000);
                }
            }
        });
    });

这些是 function.php 中的钩子：

函数 loadmore_get_posts(){

  $post_limit = $_POST['max_posts'];
  $paged = !empty($_POST['paged']) ? $_POST['paged'] : 1;
    $paged++;

  $args = array(
        'paged' => $paged,
        'posts_per_page' => $_POST['posts_per_page'],
        'post_type'      => 'post',
        'post_status' => 'publish',
        'cat' => $_POST['cats']
  );

  $data = new WP_Query( $args );
 
  $i = 0;
  while( $data->have_posts() && ($post_limit >= $_POST['posts_per_page']*($paged-1) + $i)) : $data->the_post();
      get_template_part( 'templates/content/templates/feeds/articlefeed_item' );
    $i++;
  endwhile;
  die;
}
add_action('wp_ajax_loadmore', 'loadmore_get_posts');
add_action('wp_ajax_nopriv_loadmore', 'loadmore_get_posts');
php

1 个回答

  1. Best Answer

    这就是它应该以某种方式工作的方式：

    function loadmore_get_posts(){
  
  $post_limit = 20; // хардкод для удобства чтения. Можете получать его из $_POST
  $paged = !empty($_POST['paged']) ? $_POST['paged'] : 1;
  $paged++;

  $args = array(
    'paged' => $paged,
    'posts_per_page' => $_POST['posts_per_page'],
    'post_type'      => 'post',
    'post_status' => 'publish',
    'cat' => $_POST['cats']
  );

  $data = new WP_Query( $args );
  $i = 0;
  while( $data->have_posts() && ($post_limit >= $_POST['posts_per_page']*($paged-1) + $i)) :
    $data->the_post();
    get_template_part( 'templates/...' );
    $i++;
  endwhile;
  die;
}
add_action('wp_ajax_loadmore', 'loadmore_get_posts');
add_action('wp_ajax_nopriv_loadmore', 'loadmore_get_posts');

    在这个版本中，我们驱动的数据更少（我们在服务器端切割它，而不是在浏览器端）。在 JS 中，我们去掉检查并绘制服务器发送给我们的所有内容。如果 Ajax 返回空，我们删除滚动处理程序，以便不再请求服务器。

    而且我会通过超时取消对滚动的解冻（将其移动到 Ajax 响应中）——在慢速网络中，Ajax 可以返回数据超过一秒钟，通过超时解冻滚动，我们可以请求下一批帖子无需等待前一个加载。

    • 1

相关问题