更新24.04.2016。

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

编辑

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

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

    <div id="ajax-posts" class="row">
        <?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 class="small-12 large-4 columns">
                <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。这将加载WordPress自己的admin-
ajax.php，以便我们在ajax调用中调用它时可以使用它。

在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 class="small-12 large-4 columns">
                <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中使用它。

最后一部分是ajax本身。在 functions.js中， 我放入了$(document).ready();环境

var ppp = 3; // Post per page
var 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()当您离页面底部100px时，这应该运行该函数。对于我网站上的教程，您可以添加检查以查看帖子是否正在加载（以防止两次触发Ajax），并且可以在滚动到达页脚顶部时触发它

$(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.logs放入代码中并在检查器中查看其抛出的内容轻松地对其进行检查

$(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();
    }
});

并相应地进行调整;）

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