Wordpress 帖子类型无限滚动/加载更多按钮

Question

我目前正在使用以下代码在 WP 上显示指定数量 (24) 的自定义帖子类型，并使用项目类别动态过滤帖子。

            <!-- Display Filters for Posts --->
            <ul id="filters">
                <li><a href="#" data-filter="*" class="selected">Everything</a></li>
             <?php 
             $terms = get_terms("project_categories"); // get all categories, but you can use any taxonomy
             $count = count($terms); //How many are they?
             if ( $count > 0 ){  //If there are more than 0 terms
             foreach ( $terms as $term ) {  //for each term:
             echo "<li><a href='#' data-filter='.".$term->slug."'>" . $term->name . "</a></li>\n";
             //create a list item with the current term slug for sorting, and name for label
             }
             } 
             ?>
            </ul>

        <!-- Filter Array --->
        <div class="row">
            <div class="col-md-12">

                    <?php $args = array( 'post_type' => 'bw_projects', 'posts_per_page' => 24 ); ?>

                    <?php $the_query = new WP_Query( $args ); ?>

                    <?php if ( $the_query->have_posts() ) : ?>
                        <ul class="img-list" id="isotope-list">
                        <?php while ( $the_query->have_posts() ) : $the_query->the_post(); 
                     $termsArray = get_the_terms( $post->ID, "project_categories" );  //Get the terms for this particular item
                     $termsString = ""; //initialize the string that will contain the terms
                     foreach ( $termsArray as $term ) { // for each term 
                     $termsString .= $term->slug.' '; //create a string that has all the slugs 
                     }
                     ?> 
                     <li class="<?php echo $termsString; ?>item project home-project"> <?php // 'item' is used as an identifier (see Setp 5, line 6) ?>
                             <a href="<?php echo get_permalink( $post->ID ); ?>">
                                 <?php the_post_thumbnail(); ?>
                                 <span class="text-content"><span><img src="<?php the_field('client_logo'); ?>" alt="" class=""></span></span>
                            </a>
                     </li> <!-- end item -->
                        <?php endwhile;  ?>
                        </ul> <!-- end isotope-list -->
                    <?php endif; ?>

            </div>
        </div><!-- Close Filter Array --->

这是使用同位素过滤构建的，根据这些说明进行了一些修改。 https://www.aliciaramirez.com/2014/03/integrating-isotope-with-wordpress/

更新：在 Marissa 评论之后，这就是我的代码在过滤器之后的样子。

<?php $args = array( 'post_type' => 'bw_projects', 'posts_per_page' => 18 ); ?>

<?php $the_query = new WP_Query( $args ); ?>

<?php if ( $the_query->have_posts() ) : ?>
<ul class="img-list" id="isotope-list">

<?php $total_posts = wp_count_posts('bw_projects');
$total_posts = $total_posts->publish;
$number_shown = 0; ?>

<?php while ( $the_query->have_posts() ) : $the_query->the_post(); 
$termsArray = get_the_terms( $post->ID, "project_categories" );  //Get the terms for this particular item
$termsString = ""; //initialize the string that will contain the terms
foreach ( $termsArray as $term ) { // for each term 
$termsString .= $term->slug.' '; //create a string that has all the slugs 
}
?> 
<li class="<?php echo $termsString; ?>item project home-project"> <?php // 'item' is used as an identifier (see Setp 5, line 6) ?>
     <a href="<?php echo get_permalink( $post->ID ); ?>">
         <?php the_post_thumbnail(); ?>
         <span class="text-content"><span><img src="<?php the_field('client_logo'); ?>" alt="" class=""></span></span>
    </a>
</li> <!-- end item -->
<?php endwhile;  ?>
</ul> <!-- end isotope-list -->
<?php endif; ?>
            <?php if ( $number_shown < $total_posts ) { ?>
<div class="loadMore" data-offset="<?php echo $number_shown; ?>" data-total="<?php echo $total_posts; ?>">
        Load More
</div>
<?php } ?>

我的 loadmore 文件处于当前状态：

<?php
global $post;
$the_offset = trim( sanitize_text_field( wp_unslash( $_POST['pOffset'] ) ) );
$the_total = trim( sanitize_text_field( wp_unslash( $_POST['totalPosts'] ) ) );

$args = array( 'post_type' => 'bw_projects', 'posts_per_page' => 12, 'offset' => $the_offset );
$posts_shown = $the_offset; //Increment this every time you display a project
?>

                <?php while ( $the_query->have_posts() ) : $the_query->the_post(); 
                     $termsArray = get_the_terms( $post->ID, "project_categories" );  //Get the terms for this particular item
                     $termsString = ""; //initialize the string that will contain the terms
                     foreach ( $termsArray as $term ) { // for each term 
                     $termsString .= $term->slug.' '; //create a string that has all the slugs 
                     }
                     ?> 
                     <li class="<?php echo $termsString; ?>item project home-project"> <?php // 'item' is used as an identifier (see Setp 5, line 6) ?>
                             <a href="<?php echo get_permalink( $post->ID ); ?>">
                                 <?php the_post_thumbnail(); ?>
                                 <span class="text-content"><span><img src="<?php the_field('client_logo'); ?>" alt="" class=""></span></span>
                            </a>
                     </li> <!-- end item -->
                        <?php endwhile;  ?>
                        </ul> <!-- end isotope-list -->
                <?php endif; ?>
<?php } ?>

<?php //Then check if we've shown all the posts or not, and we're done.
if ( $posts_shown >= $the_total ) { ?>
    <div id="all-posts-shown"></div>
<?php } ?>

在输出的 HTML 中，加载更多按钮会引入“data-total”和“data-offset”

<div class="loadMore" data-offset="0" data-total="25">
Load More
</div>

单击加载更多时，偏移量变为：

<div class="loadMore" data-offset="12" data-total="25">
Load More
</div>

除了我没有看到额外的帖子加载？我想我一定错过了什么。

Answer 1

您可以使用 ajax 在按钮单击或滚动时拉出下一轮帖子。如果您仍然掌握了窍门，按钮点击更容易跟踪。

在您循环显示帖子之前，找出您的自定义帖子类型中总共有多少帖子，以及一个计数器来跟踪您显示了多少。

$total_posts = wp_count_posts('bw_projects');
$total_posts = $total_posts->publish;
$number_shown = 0;

然后在每次显示项目时递增显示的数字。然后，在你的循环之后，检查你是否有更多的项目要显示，然后添加一个加载更多按钮，其中包含存储偏移量（你已经显示了多少帖子）和总数的数据属性。

<?php if ( $number_shown < $total_posts ) { ?>
    <div class="loadMore" data-offset="<?php echo $number_shown; ?>" data-total="<?php echo $total_posts; ?>">
                Load More
    </div>
<?php } ?>

然后您可以使用 AJAX 获取下一篇文章。你想先注册你的 AJAX 函数：

<?php
/**
 * Put the following code in your functions.php file
 * get_loadmore is the name of the ajax function we are registering
 * projects-loadmore.php is the file with the contents which will be loaded 
 * when the ajax call is made. 
*/

            add_action('wp_ajax_get_loadmore', 'get_loadmore');
            add_action( 'wp_ajax_nopriv_get_loadmore', 'get_loadmore' );
            function get_loadmore() {

              include(get_template_directory().'/projects-loadmore.php');
              wp_die();

            }
?>

然后你想在按钮点击时设置你的 ajax 函数

<script>
/**---
    Notes:
    When loadMore button is clicked
    This passes information to and pulls content dynamically from the template: projects-loadmore.php
    The returned php and html code is inserted at the end of the #isotope-list div's content
    variables are pulled from the loadmore button's data attributes.
    Variables Passed:
        - postOffset : how many posts have already been displayed
        - totalPosts :  The total number of published posts in this post type.
---**/

$('.loadMore').click(function() {

    //get the offset
    var postOffset = $(this).attr('data-offset');
    var totalPosts = $(this).attr('data-total');
    var thisObj = $(this);

    //get Page Template and put on page
    var ajax_url = '<?php echo admin_url('admin-ajax.php'); ?>';

    $.ajax({
        type: 'POST',
        url: ajax_url,
        data: {
            action: 'get_loadmore',
            pOffset: postOffset,
            totalPosts: totalPosts,
        },
        dataType: "html",
        success: function(data) {
            $('#isotope-list').append(data);
            $new_offset = parseInt ( thisObj.attr('data-offset') ) + 24;
            thisObj.attr('data-offset', $new_offset) //set the new post offset.
            if ( $('#all-posts-shown')[0] ) {
                thisObj.slideUp(); //hide loadmore if all posts have been displayed.
           }
        },

        error: function(MLHttpRequest, textStatus, errorThrown){
            alert("error");
        }
    });
}); //end of click function 
</script>

剩下的就是进入你的 projects-loadmore.php 文件，获取变量，调整你的查询，然后显示帖子：

<?php
global $post;
$the_offset = trim( sanitize_text_field( wp_unslash( $_POST['pOffset'] ) ) );
$the_total = trim( sanitize_text_field( wp_unslash( $_POST['totalPosts'] ) ) );

$args = array( 'post_type' => 'bw_projects', 'posts_per_page' => 24, 'offset' => $the_offset );
$posts_shown = $the_offset; //Increment this every time you display a project
?>

//Get your posts and insert your while loop and display code here

<?php //Then check if we've shown all the posts or not, and we're done.
if ( $posts_shown >= $the_total ) { ?>
    <div id="all-posts-shown"></div>
<?php } ?>

您可以在动画和调整方面做很多事情，但这应该足以让您入门。