如何在我的网站上应用“自动下一个帖子加载”滚动？

Posted 2023-04-01

【中文标题】如何在我的网站上应用“自动下一个帖子加载”滚动？

【英文标题】：How to apply the "auto next post load" scroll on my website?

【发布时间】：2021-03-22 11:22:49

【问题描述】：

这里是一个新手...我正在尝试应用一个系统，该系统允许读者在完成单个帖子后“无限”向下滚动到下一个帖子，这样他们就不必手动点击它们。

（就像这个网站一样：

https://dancingastronaut.com/2020/12/maceo-plex-confronts-racism-and-diversity-in-latest-single-cinemax/)

我尝试了“自动加载下一篇文章”插件，但它在我的主题上不起作用:(。

我目前正在使用由 templatepocket 开发的 Amphibious 主题。 https://wordpress.org/themes/amphibious/

这是我遇到的最困难的部分，我认为我的网站一旦应用就很好。我希望有人可以在这里帮助我！

谢谢！

【参考方案1】：

您首先需要编辑您的单个帖子模板，通常是single.php，并在用户滚动超过该点时添加一个触发器。

<?php $gpNextPost = get_next_post(); ?>
<div class="gp-infinite-scroll" style="display: none;"><?php echo $gpNextPost->ID; ?></div>

然后调用 AJAX 函数来加载下一篇文章的内容并替换浏览器地址栏中的 URL。

这是一个粗略的例子：

function gp_infinite_scroll($pid)
  if (is_single())  ?>
    <script type="text/javascript" >
      jQuery(document).ready(function($) 
        $(window).scroll(function() 
          var footerPos = $('footer').last().position().top;
          var pos = $(window).scrollTop();

          if (pos+(screen.height*4) > footerPos) 
            if ($(".gp-infinite-scroll").first().hasClass('working')) 
              return false;
             else 
              $(".gp-infinite-scroll").first().addClass('working');
            

            var gpNextPostId = $(".gp-infinite-scroll").first().text();
            var data = 
              'action': 'gp_is',
              'gpNextPostId': gpNextPostId
            ;

            $.post(ajaxurl, data, function(response) 
              $(".gp-infinite-scroll").first().replaceWith(response);
            , 'html');
          

          // Update new URL
          var currUrl = $(".gp-post-header").first().attr("url");
          var currTitle = $(".gp-post-header").first().attr("title");

          if ($(".gp-post-header").length > 1 && history.pushState) 
            for (var i=0; i<$(".gp-post-header").length; i++) 
              var trigger = $(".gp-post-header").eq(i).next().position().top;
              if (pos+(screen.height/2) >= trigger) 
                currUrl = $(".gp-post-header").eq(i).attr("url");
                currTitle = $(".gp-post-header").eq(i).attr("title");
              
            
          
          if (location.href != currUrl) 
            history.pushState(, currTitle, currUrl);
          
        );
      );
    </script>

  <?php 

add_action( 'wp_head', 'gp_infinite_scroll' );

function gp_infinite_scroll_callback() 
  if (isset($_POST['gpNextPostId']) && $_POST['gpNextPostId']) 
    $the_query = new WP_Query(array('p'=>$_POST['gpNextPostId']));
    if ( $the_query->have_posts() ) 
      while ( $the_query->have_posts() ) 
        $the_query->the_post();
        // Change to your own Single Post template file
        get_template_part( 'template-parts/content', 'single' );
      
    
    wp_reset_postdata();
  
  wp_die();

add_action( 'wp_ajax_gp_is', 'gp_infinite_scroll_callback' );
add_action( 'wp_ajax_nopriv_gp_is', 'gp_infinite_scroll_callback' );

此代码未经测试，但它应该可以帮助您。如果上面的内容对你来说太多了，那么你可以试试the related plugins。