WordPress利用wp ajax 获取分类帖子并实现加载更多教程

首先html的button里面要加载data-category=category_id 的参数：

<button class="category-button" data-category="1">Category 1</button>
<button class="category-button" data-category="2">Category 2</button>
<button class="category-button" data-category="3">Category 3</button>

然后创建jquery的ajax文件来发送ajax:

jQuery(document).ready(function($) {
    $('.category-button').click(function() {
        var category = $(this).data('category');
        $.ajax({
            url: '/wp-admin/admin-ajax.php',
            type: 'POST',
            data: {
                action: 'fetch_category_posts',
                category: category
            },
            success: function(response) {
                // Do something with the response, like appending the posts to a container
                $('#posts-container').html(response);
            }
        });
    });
});

然后在functions.php里面创建wp_ajax的回调参数来输出response到js.

add_action( 'wp_ajax_fetch_category_posts', 'fetch_category_posts' );
add_action( 'wp_ajax_nopriv_fetch_category_posts', 'fetch_category_posts' );
function fetch_category_posts() {
    $category = $_POST['category'];
    $args = array(
        'category' => $category,
        'posts_per_page' => -1,
    );
    $query = new WP_Query( $args );
    if ( $query->have_posts() ) {
        while ( $query->have_posts() ) {
            $query->the_post();
            // Do something with the post, like displaying its title and content
            the_title();
            the_content();
        }
        wp_reset_postdata();
    }
    die();
}

要处理loadmore按钮，可以向按钮添加一个单击事件处理程序，并发出另一个AJAX请求以获取更多帖子。在本例中，我们将假设loadmore按钮具有类“loadmore”

jQuery(document).ready(function($) {
    $('.load-more').click(function() {
        var offset = $('.post').length;
        $.ajax({
            url: '/wp-admin/admin-ajax.php',
            type: 'POST',
            data: {
                action: 'fetch_more_posts',
                category: category,
                offset: offset
            },
            success: function(response) {
                // Do something with the response, like appending the posts to a container
                $('#posts-container').append(response);
            }
        });
    });
});

要在服务器端处理loadmore按钮，您需要创建另一个函数来处理这个AJAX请求。此函数应该与您之前创建的函数类似，但有一些不同。您需要向查询中添加偏移量参数，还需要添加一种方法来控制每页的帖子数。

add_action( 'wp_ajax_fetch_more_posts', 'fetch_more_posts' );
add_action( 'wp_ajax_nopriv_fetch_more_posts', 'fetch_more_posts' );
function fetch_more_posts() {
    $category = $_POST['category'];
    $offset = $_POST['offset'];
    $posts_per_page = 10; //number of posts to be loaded per request
    $args = array(
        'category' => $category,
        'posts_per_page' => $posts_per_page,
        'offset' => $offset
    );
    $query = new WP_Query( $args );
    if ( $query->have_posts() ) {
        while ( $query->have_posts() ) {
            $query->the_post();
            // Do something with the post, like displaying its title and content
            the_title();
            the_content();
        }
        wp_reset_postdata();
    }
    die();
}