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

Question

情况

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

问题

我不知道如何在不破坏布局的情况下继续你的日期。我见过许多涉及无限滚动的代码，但其中 none 确实对我有用，因为它还需要与设计相匹配。这是设计：

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

<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 加载更多插件解决了我的问题。我希望这会帮助其他面临与我相同问题的人。如果有人看到我的代码有所改进，我将不胜感激。

测试在：MacOS - Chrome/Safari/Firefox & iOS - Chrome/Safari

我已经安装了 Ajax 加载更多插件
他们有一个 Repeat Templates 部分，基本上是 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>

我有一个 .php 文件，我加载到其他地方，看起来像这样：

<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>

最后一部分我在 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;
  }

所以对我来说，这个特定的解决方案基于我设置的类和我的项目结构。

希望对您有所帮助

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

How can I create an infinite scroll (lazy loading) grouped per day and showing date?

javascript

php

wordpress

lazy-loading

infinite-scroll