如何在 WordPress 中实现 Ajax 支持的'加载更多”帖子？

在 WordPress 中通过 Ajax 加载更多帖子

在 WordPress 中实现“加载更多”按钮来动态加载帖子需要 PHP 和JavaScript。虽然您已经概述了特定方法，但可能还有其他因素会影响代码的功能或效率。这是修订和增强的解决方案：

HTML 标记：

<div>
<p><strong>函数 PHP 文件：</strong></p>
<pre class="brush:php;toolbar:false">function more_post_ajax() {
    $offset = $_POST["offset"];
    $ppp = $_POST["ppp"];

    header("Content-Type: text/html");
    $args = [
        'suppress_filters' => true,
        'post_type' => 'post',
        'posts_per_page' => $ppp,
        'cat' => 1,
        'offset' => $offset,
    ];

    $loop = new WP_Query($args);

    while ($loop->have_posts()) {
        $loop->the_post();
        the_content();
    }
    exit;
}

add_action('wp_ajax_nopriv_more_post_ajax', 'more_post_ajax');
add_action('wp_ajax_more_post_ajax', 'more_post_ajax');

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

jQuery功能：

var ppp = 3; // Posts per page
var page = 5; // Current page number, starting from 1

$('#more_posts').click(function() {
    $('#more_posts').attr('disabled', true);
    var offset = (page * ppp) + 1;

    $.post(
        ajax_posts.ajaxurl,
        {
            action: 'more_post_ajax',
            offset: offset,
            ppp: ppp,
        }
    ).success(function(posts) {
        page++;
        $('#ajax-posts').append(posts);
        $('#more_posts').attr('disabled', false);
    });
});

其他注意事项：

• 类别过滤：您可以通过添加数据来合并类别过滤属性到带有类别 ID 的“加载更多”按钮。然后，在 PHP 代码中，从 $_POST 数组中检索类别 ID，并在查询参数中包含“cat”参数。
• 无限加载： 对于无限滚动，您可以使用当用户向下滚动页面时，jQuery 的滚动事件会自动加载帖子。一种方法是当页面底部到视口顶部的距离小于阈值（例如 100 像素）时加载帖子。
• 加载指示器：考虑添加加载微调器或指示器，以便在加载帖子时向用户提供视觉反馈。
• 错误处理：确保正确的错误处理PHP 和 JavaScript 代码都用于处理 Ajax 请求或后期处理期间可能发生的任何潜在错误。