wordpress爱找主题

要在WordPress网站中实现使用AJAX无刷新翻页的文章列表，你需要进行一些前端和后端的编程工作。以下是一般的步骤：

1. 创建一个前端页面

首先，你需要创建一个前端页面来显示文章列表和加载更多按钮。你可以在WordPress中创建一个自定义页面模板，然后在这个模板中添加HTML和JavaScript代码。

<?php
/
Template Name: AJAX文章列表
/

get_header();
?>

<div id="ajaxpostlist">
    <ul id="postlist">
        <! 这里将显示你的文章列表 >
        <?php
        // 使用WP_Query来查询文章
        $query = new WP_Query(array(
            'post_type' => 'post',
            'posts_per_page' => 5, // 每页显示的文章数量
        ));

        while ($query>have_posts()) : $query>the_post();
        ?>
            <li>
                <h2><?php the_title(); ?></h2>
                <div class="postcontent"><?php the_excerpt(); ?></div>
            </li>
        <?php endwhile; ?>
        <?php wp_reset_postdata(); ?>
    </ul>
    <div id="loadmore">
        <a href="#" id="loadmoreposts">加载更多</a>
    </div>
</div>

<script>
jQuery(function ($) {
    var page = 2; // 初始加载的页数

    $('#loadmoreposts').on('click', function (e) {
        e.preventDefault();
        var data = {
            action: 'load_more_posts',
            page: page,
        };

        $.ajax({
            url: ajaxurl,
            data: data,
            type: 'POST',
            success: function (response) {
                if (response) {
                    $('#postlist').append(response);
                    page;
                } else {
                    $('#loadmore').hide();
                }
            }
        });
    });
});
</script>

<?php get_footer(); ?>

在这个模板中，我们创建了一个文章列表，然后添加了一个"加载更多"按钮。当按钮被点击时，会触发一个AJAX请求来获取更多文章。

2. 创建后端处理函数

接下来，你需要在你的主题的functions.php文件中添加一个处理AJAX请求的函数。这个函数将查询更多的文章并将它们返回到前端。

function load_more_posts() {
    $page = $_POST['page'];
    $args = array(
        'post_type' => 'post',
        'posts_per_page' => 5,
        'paged' => $page,
    );

    $query = new WP_Query($args);

    if ($query>have_posts()) :
        while ($query>have_posts()) : $query>the_post();
            // 输出文章HTML，可以根据需要自定义
            ?>
            <li>
                <h2><?php the_title(); ?></h2>
                <div class="postcontent"><?php the_excerpt(); ?></div>
            </li>
            <?php
        endwhile;
        wp_reset_postdata();
    endif;

    die();
}

add_action('wp_ajax_load_more_posts', 'load_more_posts'); // 仅限登录用户
add_action('wp_ajax_nopriv_load_more_posts', 'load_more_posts'); // 所有用户

在这个函数中，我们接收来自前端的页码参数，然后使用WP_Query来获取更多文章。然后，我们输出这些文章的HTML，并使用die()来终止WordPress的默认输出。

3. 设置AJAX动作

最后，你需要在前端JavaScript代码中设置AJAX动作，以便WordPress能够识别并调用正确的后端函数。这是通过action参数来实现的，它在前端代码和后端函数中都需要匹配。

在上面的前端代码中，我们使用了以下行来设置AJAX动作：

var data = {
    action: 'load_more_posts',
    page: page,
};

这个action的值必须与add_action中的第一个参数一致。

完成上述步骤后，你就可以在WordPress网站中实现使用AJAX无刷新翻页的文章列表了。当用户点击"加载更多"按钮时，新的文章将被加载到列表中，而不需要刷新整个页面。请确保按照你的需求自定义HTML和CSS样式。