Wordpress通过按钮点击加载更多帖子

Question

我是Wordpress的新手。因此，这可能不是最好的方法，甚至不是可能的。话虽如此，我对更好的解决方案持开放态度。

我有一个主页，将显示最新的12个帖子。我想做一个按钮，当点击时，将加载下一个4。

我目前拥有的是这样的：

<?php query_posts('showposts=4&offset=12'); ?>
<?php while (have_posts()): the_post(); ?>
    //some html tags
<?php endwhile; ?>

这将加载我的帖子13-16的细节。

我正在寻找一种方法，我可以将它放在一个函数中，然后通过jquery click()事件调用它，在这个事件中，我可以使用某种类型的计数器来计算偏移量。就像这样

var offSetCounter = 12;

$(".btnLoadMore").click(function(){
    //php function call
    loadmore(offSetCounter);
    offSetCounter += 4;
});

因此，下次我单击该按钮时，offSetCounter将是16，依此类推。

提前谢谢。

Answer 1

要在Wordpress上运行，请尝试以下命令：

PHP：

add_action( 'wp_ajax_nopriv_show_next_posts',  'show_next_posts' );
function show_next_posts() {
    $offset = $_POST['offset']; 
    $the_query = new  new WP_Query( array( 'posts_per_page' => 4, 'offset' => $offset ) );



    while ( $the_query->have_posts() ) {
        $the_query->the_post();
        echo '<div class="post_container">' . get_the_title() . '</div>';
    }
    wp_reset_postdata();
    wp_die();
    return;
}

add_action('wp_head','add_ajaxurl');
function add_ajaxurl() {
     $ajaxurl =  admin_url('admin-ajax.php');
     echo '<script type="text/javascript">
        var ajaxurl ='.$ajaxurl.';
     </script>';

}

JS：

jQuery('.btnLoadMore').click(function(){
    var offset = jQuery('.post_container').length();
    var data = {
        'action': 'show_next_posts',
        'offset': offset
    };

    jQuery.post(ajaxurl, data, function( response ) {
        console.log( response );
    });
});