在WordPress中实现AJAX无刷新翻页功能，可以提升用户体验，避免页面重新加载。以下是实现步骤：

1. 准备工作

确保你的主题支持jQuery，因为大多数AJAX操作依赖它。

2. 修改主题文件

2.1 修改 index.php 或 archive.php

找到显示文章列表的模板文件（通常是 index.php 或 archive.php），在循环外部添加一个容器用于包裹文章列表。

php
复制 
<div id="posts-container">
    <?php if ( have_posts() ) : ?>
        <?php while ( have_posts() ) : the_post(); ?>
            <!-- 文章内容 -->
            <div class="post">
                <h2><?php the_title(); ?></h2>
                <div><?php the_excerpt(); ?></div>
            </div>
        <?php endwhile; ?>
    <?php endif; ?>
</div>

<!-- 分页链接 -->
<div id="pagination">
    <?php next_posts_link('加载更多'); ?>
</div>

2.2 添加AJAX处理函数

在 functions.php 中添加AJAX处理函数。

php
复制 
function load_more_posts() {
    $paged = $_POST['page'] + 1;
    $query = new WP_Query(array(
        'post_type' => 'post',
        'paged' => $paged
    ));

    if ($query->have_posts()) :
        while ($query->have_posts()) : $query->the_post();
            ?>
            <div class="post">
                <h2><?php the_title(); ?></h2>
                <div><?php the_excerpt(); ?></div>
            </div>
            <?php
        endwhile;
    endif;

    wp_die();
}

add_action('wp_ajax_load_more_posts', 'load_more_posts');
add_action('wp_ajax_nopriv_load_more_posts', 'load_more_posts');

3. 添加jQuery脚本

在主题的 js 文件夹中创建一个新的JavaScript文件（如 ajax-load-more.js），并添加以下代码：

javascript
复制 
jQuery(document).ready(function($) {
    var page = 1;
    var loading = false;

    $('#pagination a').click(function(e) {
        e.preventDefault();

        if (loading) return;

        loading = true;
        page++;

        $.ajax({
            url: '<?php echo admin_url('admin-ajax.php'); ?>',
            type: 'POST',
            data: {
                action: 'load_more_posts',
                page: page
            },
            success: function(response) {
                $('#posts-container').append(response);
                loading = false;
            }
        });
    });
});

4. 加载脚本

在 functions.php 中加载刚刚创建的JavaScript文件。

php
复制 
function enqueue_ajax_load_more_script() {
    wp_enqueue_script('ajax-load-more', get_template_directory_uri() . '/js/ajax-load-more.js', array('jquery'), null, true);
}

add_action('wp_enqueue_scripts', 'enqueue_ajax_load_more_script');

5. 测试

保存所有文件并刷新页面，点击“加载更多”按钮，文章应通过AJAX加载而不刷新页面。

6. 优化

  • 加载指示器：添加加载动画提升用户体验。

  • 无更多文章处理：在无更多文章时隐藏“加载更多”按钮或显示提示信息。

通过这些步骤，你可以在WordPress中实现AJAX无刷新翻页功能。