使分页作为旋转传送带工作(自定义查询)

时间:2019-02-08 作者:lulufv

我在静态首页上使用自定义查询来显示我的帖子,但我希望我的分页有点像旋转木马(而不是加载整个新url)。所以,基本上我只想再次加载#slides部分。这可能吗?

这是我的代码:

<body>
[... page content ...]
<div id="slides" class="slide bg-mediumgray">
<div id="gridcontainer" class="carousel">
    <?php
    $paged = (get_query_var(\'page\')) ? get_query_var(\'page\') : 1;
    $counter = 1; //start counter
    $grids = 2; //Grids per row

    global $query_string; //Need this to make pagination work

    $mosaicoMenu = new WP_Query(array(
                \'post_type\' => \'artist\',
                \'orderby\' => \'title\',
                \'order\' => ASC,
                \'posts_per_page\' => 8,
                \'paged\'=>$paged
            ));  

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

    //Show the left hand side column
    if($counter == 1) :
    ?>
        <div class="griditemleft">
            <div class="artista no-padding no-margin" style="background-image: url(<?php the_post_thumbnail_url(); ?>), url(\'<?php echo get_theme_file_uri(\'/img/gradient.png\') ?>\');">
                <p><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?><span>+</span></a></p>
            </div>
        </div>

    <?php
    //Show the right hand side column
    elseif($counter == $grids) :
    ?>
        <div class="griditemright">
            <div class="artista no-padding no-margin" style="background-image: url(<?php the_post_thumbnail_url(); ?>), url(\'https://i.postimg.cc/9QS9Mn00/gradient2.png\');">
                <p><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?><span>+</span></a></p>
            </div>
        </div>

        <div class="clear"></div>

    <?php
    $counter = 0;
    endif;

    $counter++;
    endwhile;

    ?>
</div>
    <div class="pagination-arrows">
        <?php
        previous_posts_link(\'<p><i class="nav-arrow fas fa-chevron-left"></i> anterior</p>\');
        next_posts_link(\'<p>próximo <i class="nav-arrow fas fa-chevron-right"></i></p>\', $mosaicoMenu->max_num_pages);
        ?>
    </div>



    <?php
    endif;
    wp_reset_postdata();
    ?>
</div>
[... more content ...]
</body

1 个回复
SO网友:Alexander Holsgrove

您可以使用AJAX加载帖子。请查看此处的文档:https://developer.wordpress.org/plugins/javascript/ajax/

当第一页加载时,您的8篇帖子来自WP_Query 在旋转木马中。在旋转木马中单击next时,您需要发出AJAX请求以加载下一篇文章。例如,在进入第8张幻灯片后,发出AJAX请求,该请求调用一个新的WP\\U查询,但使用paged parameter 模拟进入第2、3、4页等。

您的功能将把新幻灯片发送回您的页面,然后您可以将其附加到旋转木马中。

作为警告,AJAX加载首先会有一点延迟,因此如果用户快速单击幻灯片,您可能希望在他们单击“下一张幻灯片”之前开始预加载下一个内容。其次,如果你有很多帖子,你可能会在页面上出现很多幻灯片,这可能会减慢网页本身的速度。

Conversley,如果您只有少量帖子(可能50或60篇),另一种方法是加载所有幻灯片,并对任何图像使用延迟加载。

相关推荐

Show pagination in WP_Query

我正在编写一个foodblog,并试图在特定页面中显示收藏夹帖子列表,但我对分页有一些问题。我在前面的问题中尝试了不同的解决方案,但都没有解决问题。非常感谢 <?php $my_favs = get_user_meta(get_current_user_id(), \'user_favs\', true); $args = array( \'post_type\' => array(\'recipe\', \'post