如何创建每天分组并显示日期的无限滚动（延迟加载）？

Question

情况

我正在创建一个自定义的Wordpress网站，我要在其中显示按天分组的最新文章，并在您到达屏幕底部时使其无限滚动。

问题

我不知道如何继续您的约会而不破坏布局。我见过很多涉及无限滚动的代码，但是它们都没有真正为我工作，因为它也需要与设计匹配。这是设计：

图像几乎解释了我需要创建的内容，因此我编写了以下代码：

<div class="recent">
<?php 

$args = array(
  'posts_per_page' => -1, 
  'orderby' => 'date' 
);
$myQuery = new WP_Query($args);

$date = '';
$postCount = 0;
$newDay = false;

if ( $myQuery->have_posts() ) : while ( $myQuery->have_posts() ) : $myQuery->the_post();

$postCount++;
if ( $date != get_the_date() ) {
  if ( $postCount != 1 ) {
    $newDay = false;

    if (!$newDay) {
      ?></div><?php
    }
  ?>
    </div>
  <?php
  }
  ?>
    <div class="recent__articles">
  <?php
  $newDay = true;
  $date = get_the_date();
  ?>
      <div class="recent__header">
        <img class="header__icon" src="<?php echo get_home_url() ?>/wp-content/themes/insane/assets/images/time.svg" alt="time-icon">
        <?php echo $date; ?>
      </div>
  <?php
  if ($newDay) {
    ?>
      <div class="articles__wrapper"><?php
  }
}
?>
        <div class="recent__article">
          <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
            <figure class="article__image">
            <?php if ( has_post_thumbnail() ) :
                the_post_thumbnail();
              else : ?>
                <img src="<?php echo get_home_url() ?>/wp-content/themes/insane/assets/images/article-placeholder.png" alt="image-placeholder">
              <?php endif ?>
            </figure>
            <div class="article__meta">
              <span class="article__cat">
                <?php 
                foreach((get_the_category()) as $category){
                  echo $category->name;
                }
                ?>
              </span>
              <h2 class="article__title"><?php echo get_the_title() ?></h2>
              <div class="article__date">
                <?php echo esc_html( time_difference( get_the_time('U'), current_time('timestamp') ) ); ?>
              </div>
            </div>
          </a>
        </div>
  <?php
  endwhile; endif;
  wp_reset_postdata();
  ?>
</div>

我检查日期并增加postCount的顶部，因此我可以将当​​天的文章分为不同的div并相应地设置其样式。

现在我需要检查是否已经到达最低点并继续从我离开的地方开始。

非常感谢我需要去的方向的帮助。

谢谢！

Answer 1

我已将问题与Ajax Load More插件结合使用。我希望这可以帮助其他人像我一样面对同样的问题。如果有人看到我的代码有所改进，我将不胜感激。

Tested于：MacOS-Chrome / Safari / Firefox和iOS-Chrome / Safari

1. 我已经安装了Ajax Load More插件
2. 他们有一个重复模板部分，基本上是php中的while循环，我添加了以下代码（与上面我在此处显示的内容有些脱节。）

<?php $postCount++;

if ( $date != get_the_date() ) {
  if ( $postCount != 1 ) {
    $newDay = false;

    if (!$newDay) {
      ?></div><?php
    }
  ?>
    </div>
  <?php
  }
  ?>
    <div class="recent__articles">
  <?php
  $newDay = true;
  $date = get_the_date();
  ?>
      <div class="recent__header">
        <img class="header__icon" src="<?php echo get_home_url() ?>/wp-content/themes/insane/assets/images/time.svg" alt="time-icon">
        <?php echo $date; ?>
      </div>
  <?php
  if ($newDay) {
    ?>
      <div class="articles__wrapper"><?php
  }
}
?>
        <div class="recent__article">
          <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
            <figure class="article__image">
            <?php if ( has_post_thumbnail() ) :
                the_post_thumbnail();
              else : ?>
                <img src="<?php echo get_home_url() ?>/wp-content/themes/insane/assets/images/article-placeholder.png" alt="image-placeholder">
              <?php endif ?>
            </figure>
            <div class="article__meta">
              <span class="article__cat">
                <?php 
                foreach((get_the_category()) as $category){
                  echo $category->name;
                }
                ?>
              </span>
              <h2 class="article__title"><?php echo get_the_title() ?></h2>
              <div class="article__date">
                <?php echo esc_html( time_difference( get_the_time('U'), current_time('timestamp') ) ); ?>
              </div>
            </div>
          </a>
        </div>

3. 我有一个.php文件，我将其加载到如下所示的els中：

<div class="recent">
  <?php

    $date = '';
    $postCount = 0;
    $newDay = false;
    echo do_shortcode("[ajax_load_more post_type='post' posts_per_page='2' scroll_distance='0']");
  ?>
</div>

4. 现在是最后一部分，我已经在jQuery中编写了以下内容：

  // Ajax load more fix
  function ajaxShowMore() {
    var oldXHR = window.XMLHttpRequest;

    function newXHR() {
        var realXHR = new oldXHR();
        realXHR.addEventListener("readystatechange", function() {
            if (realXHR.readyState === 4) { // When the Ajax call is finished new content is loaded
              var oldRecentHeaders = $('.recent__header'); // Store all previous recent headers in variable

              setTimeout(function() { // Set a timeout, since it goes a bit to fast to store the data
                var newRecentHeaders = $('.recent__header'); // Store all the headers in a variable
                newRecentHeaders.splice(0, oldRecentHeaders.length); // Splice it, so you only get the new added headers

                if (newRecentHeaders.first().text() === oldRecentHeaders.last().text()) { // Check if the first of new header date is the same as the last of the old header date
                  var newArticles = newRecentHeaders.first().parent().find('.articles__wrapper').children(); // Store all the articles

                  newRecentHeaders.first().parent().remove(); // Remove the first new added articles
                  oldRecentHeaders.last().parent().find('.articles__wrapper').append(newArticles); // Add them here
                }
              }, 10);
            }
        }, false);

        return realXHR;
    }

    window.XMLHttpRequest = newXHR;
  }

所以对我来说，这个特定的解决方案可以根据我设置的项目的类和结构来工作。

我希望这会有所帮助