AJAX 为 WordPress 帖子加载更多内容

Question

我有一个。在 Stackoverflow 上寻找答案，我找到了一些，但不幸的是它们不能满足我的需求，这就是我发布自己的原因。如果有人可以帮助我，那就太好了，因为我是 Ajax 的新手。我在 index.php 默认模板中使用默认的 WordPress 帖子类型。

下面是我输出帖子的 HTML 代码：

<?php
    $args = array(
        'post_type' => 'post',
        'posts_per_page' => 3,
    );

    $loop = new WP_Query($args);
    while ($loop->have_posts()) : $loop->the_post();
?>

<div class="col-12 col-md-6 col-xl-4 single_news_item">
    <a href="<?php the_permalink(); ?>" title="Click here for our <?php the_title(); ?> post">
        <?php $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'single-post-thumbnail' ); ?>
        <div class="bg_image" style="background-image: url('<?php echo $image[0]; ?>');"></div>
        <div class="content">
            <p class="date"><?php $date = get_the_date('d / m / y'); echo $date; ?></p>
            <h2><?php the_title(); ?></h2>
        </div>
    </a>
</div>

<?php
    endwhile;
    wp_reset_postdata();
?>

这就是我所拥有的。本质上，我需要一个“加载更多”按钮或链接，然后加载接下来的 3 个帖子，依此类推，直到没有帖子可以加载。任何帮助将不胜感激。

谢谢！

Answer 1

您需要添加一个输入字段来保存偏移量，一旦用户单击按钮，这里是代码。 注意：您应该根据需要对其进行修改。

在你获取数据的循环末尾添加这个

<div class="col-md-12 col-sm-12 col-xs-12">
    <input type="hidden" id="offset" value="10">
    <a class="btn btn-primary text-white load_more" id="load_using_ajax">Load More</a>
    <p id="test2"></p>
</div>

在js中添加这段代码，根据自己的需要修改

$(document).on('click','#load_using_ajax',function(e){
    e.preventDefault();
    var button = $(this);
    var category = $('.active').data('category');
    var offset = parseInt($("#offset").val());

    $.ajax({
        url: wpAjax.ajaxUrl,
        type: 'post',
        data: {
            category: category,
            offset:offset,
            action: 'load_more_posts',
        },
        error : function(result){
            console.log(result);
        },
        success : function(result){
        if(result){
            $("#offset").val(offset+10);
            $('.append-ajax-release').append(result);
           
        }else{
            $("test2").append = 'No more Data Found';
        }
        }
        
    }); 
});

将此添加到您需要根据需要修改的主题功能文件中

add_action('wp_ajax_nopriv_load_more_posts', 'load_more_posts');
add_action('wp_ajax_load_more_posts', 'load_more_posts');

function load_more_posts()
{
    $offset = $_POST['offset'];
    $category = $_POST["category"];
    $args = array(
        'order' => 'DESC',
        'post_status' => 'publish',
        'post_type' => 'post',
        'posts_per_page' =>  10,
        'offset' => $offset,
    );

    $query = new WP_Query();
    $query->query($args);
    if ($query->have_posts()) :
        while ($query->have_posts()) : $query->the_post(); ?>

        <div class="row col-12 pressreleases-wrapper mt-5 mb-3 ml-0 ">
            <?php the_title(); ?>
        </div>
        <?php
        endwhile;
    endif;
    wp_reset_postdata();

}