如何在 WordPress 中使用 Ajax 实现'加载更多帖子”按钮？

WordPress 中加载更多帖子 Ajax 按钮

通过 Ajax 加载更多帖子是内容量较大的网站的常见需求。这允许用户浏览多个页面的内容而无需刷新整个页面。在本文中，我们将探讨在 WordPress 中使用 Ajax 实现“加载更多帖子”按钮所涉及的步骤。

创建模板代码

首先创建一个您希望在其中显示“加载更多帖子”按钮的模板文件。在此示例中，我们将使用index.php。将以下代码添加到您的模板中：

<div>
<p><strong>加载更多帖子的函数</strong></p>
<p>接下来，在functions.php文件中创建一个函数来处理Ajax调用用于加载更多帖子。此函数将根据当前页面和每页帖子数查询下一组帖子。</p>
<pre class="brush:php;toolbar:false">function more_post_ajax(){
    // Get parameters from the Ajax request
    $offset = $_POST["offset"];
    $ppp = $_POST["ppp"];

    // Prepare query arguments
    $args = [
        'suppress_filters' => true,
        'post_type' => 'post',
        'posts_per_page' => $ppp,
        'offset' => $offset,
    ];

    // Perform the query
    $loop = new WP_Query($args);

    // Output the posts
    while ($loop->have_posts()) : $loop->the_post(); 
        the_content();
    endwhile;
    exit; 
}

// Hook the function to the WordPress Ajax action
add_action('wp_ajax_more_post_ajax', 'more_post_ajax');
add_action('wp_ajax_nopriv_more_post_ajax', 'more_post_ajax');

jQuery Ajax 脚本

在页脚中，包含以下 jQuery 脚本来处理 Ajax 按钮功能：

<script type="text/javascript">
    jQuery(document).ready( function($) {
        // Ajax post endpoint
        var ajaxUrl = "<?php echo admin_url('admin-ajax.php')?>";

        // Page counter
        var page = 5; 
        // Posts per page
        var ppp = 3; 

        // Event handler for the "Load More Posts" button
        $("[id^=more_posts]").on("click", function() {
            $("[id^=more_posts]").attr("disabled", true);

            $.post(ajaxUrl, {
                action: "more_post_ajax",
                offset: (page * ppp) + 1,
                ppp: ppp
            })
            .success(function(posts) {
                page++;
                $("#ajax-posts").append(posts);
                $("[id^=more_posts]").attr("disabled", false);
            });
        });
    });
</script>

自定义函数

提供的代码是一个基本示例。您可以对其进行自定义以满足您的特定要求，例如：

• 查询参数：向查询参数添加其他参数以根据特定条件（例如类别、
• 分页： 添加分页链接以在页面之间导航帖子。
• 无限滚动：使用滚动事件在用户向下滚动页面时自动加载更多帖子。

按照以下步骤，您可以使用 Ajax 在 WordPress 中实现功能性“加载更多帖子”按钮，增强访问者浏览大型内容集的用户体验。