在具有自定义查询的多站点上无限滚动的问题

时间:2016-04-25 作者:Gregory Schultz

我有一个WordPress多站点,它使用一个特殊的查询,将网络上的所有帖子组合在一起,并使用主站点显示网络中的所有帖子。

无论如何,我想让我的网站使用无限滚动。无论我使用什么插件,它都不会使用无限滚动。

以下是查询在我的网站上的工作方式:

<?php get_header(); ?> 
<section id="index">
<div class="container"> 
<div class="main"> 
<?php $paged = (get_query_var(\'paged\')) ? get_query_var(\'paged\') : 1; $args = array( \'multisite\' => 1, \'sites__not_in\' => array(1), \'paged\' => $paged, ); $query = new WP_Query( $args ); while($query->have_posts()) : $query->the_post(); ?> 

<?php get_template_part( \'content\', get_post_format() ); ?> <?php endwhile; ?> 

<?php if (is_front_page() ) { ?> <nav id="first-nav"> <?php next_posts_link( \'load more\', $query->max_num_pages ); ?> </nav> <?php } else { ;?> <nav id="navigate"> <?php previous_posts_link( \'Previous\' );next_posts_link( \'Next\', $query->max_num_pages ); ?> </nav> <?php } ?>
<?php wp_reset_postdata(); ?> 
</div> </div> </section> 
<?php get_footer();?>
有什么办法可以让它发挥作用吗?

2 个回复
最合适的回答,由SO网友:phatskat 整理而成

无限滚动通常需要某种Javascript库通过Ajax. 其基本思想是:

用户到达您的页面时,您可以显示(例如)每页5篇文章,它们滚动超过某个偏移量,您可以使用JavaScript触发Ajax请求。您的请求通过请求的页面,端点接收请求,并仅返回所需文章的HTML

  • 处理Ajax响应并将HTML插入页面Here is a good writeup 如何确定无限滚动、分页或“加载更多”是否最适合您。

    其他一些提示:

    你可能don\'t 想要一次加载所有帖子-这可能不是现在的问题,或者在很长一段时间内都不是问题,但最终会影响到你,有很多插件和教程可以帮助你完成这项工作,你只需要很好地了解它的工作原理

  • SO网友:Gregory Schultz

    所以我决定使用“加载更多”点击选项,但我使用的代码不起作用,点击“加载更多”,什么都不会发生。

    指数php:

    <div id="content">
    <?php $paged = (get_query_var(\'paged\')) ? get_query_var(\'paged\') : 1;
    $args = array(
    \'multisite\' => 1,
    \'sites__not_in\' => array(1),
    \'paged\' => $paged,);
    $loop = new WP_Query($args); ?>
    <?php while( $loop->have_posts() ): $loop->the_post();  ?>
    <p><?php the_title(); ?></p>
    <?php endwhile; ?>  
    
    <a id="more_posts" href="#">Load More</a>
    
    <?php wp_reset_postdata(); ?>
    
    </div>
    
    在索引的底部。php:

    var ajaxUrl = "<?php echo admin_url(\'admin-ajax.php\')?>";
    var page = 1; // What page we are on.
    var ppp = 3; // Post per page
    
    $("#more_posts").on("click",function(){ // When btn is pressed.
        $("#more_posts").attr("disabled",true); // Disable the button, temp.
        $.post(ajaxUrl, {
            action:"more_post_ajax",
            offset: (page * ppp) + 1,
            ppp: ppp
        }).success(function(posts){
            page++;
            $("#content").append(posts); // CHANGE THIS!
            $("#more_posts").attr("disabled",false);
        });
    
    });
    

    还有我的功能。php:

    function more_post_ajax(){
    $offset = $_POST["offset"];
    $ppp = $_POST["ppp"];
    header("Content-Type: text/html");
    
    $args = array(
        \'posts_per_page\' => $ppp,
        \'offset\' => $offset,
    );
    
    $loop = new WP_Query($args);
    while ($loop->have_posts()) { $loop->the_post(); 
       the_content();
    }
    
    exit; 
    }
    
    add_action(\'wp_ajax_nopriv_more_post_ajax\', \'more_post_ajax\'); 
    add_action(\'wp_ajax_more_post_ajax\', \'more_post_ajax\');
    
    非常感谢您的帮助。

    相关推荐

    媒体库链接在SSL更新后损坏的WordPress MultiSite

    我们已将SSL更新(未添加)到站点网络管理媒体库上的媒体工作正常,但子站点的媒体库显示灰色框例如:图像url如下所示:(直接访问此url时,服务器404出错,而不是WordPress 404页面)https://domain.com/blog/multisitedomain/wp-content/uploads/sites/2/2020/09/image-file.png 分解它我们有https://domain.com/blog ->