更新24.04.2016。

我已经在我的页面https://madebydenis.com/ajax-load-posts-on-
wordpress/
上创建了关于在“二十十六岁”主题上实现该主题的教程，请随时查看:)

编辑

我已经在二十一十五测试了它，并且它正在工作，所以它应该对您有用。

在 index.php中 （假设您想在主页上显示帖子，但是即使将其放在页面模板中也可以使用）：

    <div id="ajax-posts" >        <?php $postsPerPage = 3; $args = array(         'post_type' => 'post',         'posts_per_page' => $postsPerPage,         'cat' => 8 ); $loop = new WP_Query($args); while ($loop->have_posts()) : $loop->the_post();        ?>         <div >     <h1><?php the_title(); ?></h1>     <p><?php the_content(); ?></p>         </div>         <?php     endwhile;        wp_reset_postdata();         ?>    </div>    <div id="more_posts">Load More</div>

这将输出类别8中的3篇文章（我在该类别中有文章，因此我使用了它，可以使用任何想要的内容）。您甚至可以查询您所在的类别

$cat_id = get_query_var('cat');

这将为您提供要在查询中使用的类别ID。您可以将其放在加载器中（加载更多div），然后使用jQuery拉

<div id="more_posts" data-category="<?php echo $cat_id; ?>">>Load More</div>

并拉类别

var cat = $('#more_posts').data('category');

但是现在，您可以忽略此问题。

我添加的 functions.php中的 下一个

wp_localize_script( 'twentyfifteen-script', 'ajax_posts', array(    'ajaxurl' => admin_url( 'admin-ajax.php' ),    'noposts' => __('No older posts found', 'twentyfifteen'),));

对现有的权利

wp_localize_script

在functions.php文件的末尾，我添加了将加载您的帖子的函数：

function more_post_ajax(){    $ppp = (isset($_POST["ppp"])) ? $_POST["ppp"] : 3;    $page = (isset($_POST['pageNumber'])) ? $_POST['pageNumber'] : 0;    header("Content-Type: text/html");    $args = array(        'suppress_filters' => true,        'post_type' => 'post',        'posts_per_page' => $ppp,        'cat' => 8,        'paged'    => $page,    );    $loop = new WP_Query($args);    $out = '';    if ($loop -> have_posts()) :  while ($loop -> have_posts()) : $loop -> the_post();        $out .= '<div >     <h1>'.get_the_title().'</h1>     <p>'.get_the_content().'</p>         </div>';    endwhile;    endif;    wp_reset_postdata();    die($out);}add_action('wp_ajax_nopriv_more_post_ajax', 'more_post_ajax');add_action('wp_ajax_more_post_ajax', 'more_post_ajax');

在这里，我在数组中添加了分页键，以便循环可以在加载帖子时跟踪您所在的页面。

如果您已在加载程序中添加了类别，则会添加：

$cat = (isset($_POST['cat'])) ? $_POST['cat'] : '';

而不是8，您输入了

$cat

$_POST

最后一部分是ajax本身。在 functions.js中， 我放入了

$(document).ready();

var ppp = 3; // Post per pagevar cat = 8;var pageNumber = 1;function load_posts(){    pageNumber++;    var str = '&cat=' + cat + '&pageNumber=' + pageNumber + '&ppp=' + ppp + '&action=more_post_ajax';    $.ajax({        type: "POST",        dataType: "html",        url: ajax_posts.ajaxurl,        data: str,        success: function(data){ var $data = $(data); if($data.length){     $("#ajax-posts").append($data);     $("#more_posts").attr("disabled",false); } else{     $("#more_posts").attr("disabled",true); }        },        error : function(jqXHR, textStatus, errorThrown) { $loader.html(jqXHR + " :: " + textStatus + " :: " + errorThrown);        }    });    return false;}$("#more_posts").on("click",function(){ // When btn is pressed.    $("#more_posts").attr("disabled",true); // Disable the button, temp.    load_posts();});

保存它，测试它，然后就可以了:)

图像作为证明（不要介意低劣的样式，它很快就完成了）。帖子内容也很乱

更新

对于“无限负载”，而不是按钮上的click事件（只需使用使其不可见

visibility: hidden;

$(window).on('scroll', function () {    if ($(window).scrollTop() + $(window).height()  >= $(document).height() - 100) {        load_posts();    }});

load_posts()

$(window).on('scroll', function(){    if($('body').scrollTop()+$(window).height() > $('footer').offset().top){        if(!($loader.hasClass('post_loading_loader') || $loader.hasClass('post_no_more_posts'))){     load_posts();        }    }});

现在，在这些情况下，唯一的缺点是，你永远无法滚动，它的值

$(document).height() -100

$('footer').offset().top

您可以通过将

console.log

$(window).on('scroll', function () {    console.log($(window).scrollTop() + $(window).height());    console.log($(document).height() - 100);    if ($(window).scrollTop() + $(window).height()  >= $(document).height() - 100) {        load_posts();    }});

并相应地进行调整;）

希望这会有所帮助:)如果您有任何疑问，请问。