如何为 WordPress 帖子实现'加载更多”Ajax 按钮？

在 WordPress 中加载更多帖子 Ajax 按钮

本教程解决了在 WordPress 中实现“加载更多”按钮以增量加载帖子的问题通过阿贾克斯。该问题涉及集成 jQuery、Ajax 和 WordPress 功能来按需检索和显示新帖子。

解决方案：

在 index.php 模板文件，创建一个 ID 为“ajax-posts”的容器元素，并包含 PHP 代码来查询和显示有限数量的帖子（例如， 三）。添加一个 ID 为“more_posts”的按钮来触发加载其他帖子。

在 functions.php 文件中，创建一个函数 (more_post_ajax()) 来处理 Ajax 请求。此函数将接收每页帖子的偏移量和数量作为参数，并查询数据库以检索下一组帖子。

在 Ajax 调用（在脚本文件或内联中） ），设置 Ajax URL，将偏移量和每页帖子数量作为数据发送，并通过将检索到的帖子附加到“ajax-posts”容器并递增页面来处理响应数字。

示例代码：

index.php

<div>

functions.php

function more_post_ajax() {
    // Get offset and number of posts per page
    $offset = $_POST['offset'];
    $ppp = $_POST['ppp'];

    // Query database to retrieve next set of posts

    // Return retrieved posts
    echo $posts;
    exit;
}

Ajax 调用

// Set Ajax URL
var ajaxUrl = '<?php echo admin_url('admin-ajax.php') ?>';

// When "Load More" button is clicked
$('#more_posts').on('click', function() {
    // Disable button temporarily
    $(this).attr('disabled', true);

    // Send Ajax request with offset and number of posts per page
    $.post(ajaxUrl, {
        action: 'more_post_ajax',
        offset: (page * ppp) + 1,
        ppp: ppp
    })
    .success(function(posts) {
        // Append retrieved posts to container
        $('#ajax-posts').append(posts);
        // Increment page number
        page++;
        // Re-enable "Load More" button
        $('#more_posts').attr('disabled', false);
    });
});

以上是如何为 WordPress 帖子实现'加载更多”Ajax 按钮？的详细内容。更多信息请关注PHP中文网其他相关文章！