基于WordPress Rest API实现文章分页加载更多按钮的技术问询

刚好我之前做过类似的需求，咱们一步步来实现，确保每次加载12篇，初始显示12篇，点击按钮加载后续内容：

一、后端确认与准备 #

首先确认你的WordPress站点REST API是正常启用的：

• 访问你的站点域名 + /wp-json/wp/v2/posts，如果能返回文章的JSON数据，说明API可用（WordPress 4.7+默认开启）。
• 如果你用的是自定义文章类型，需要在注册时添加show_in_rest => true参数，这样才能通过API访问；如果是默认的文章类型（post），这一步可以跳过。

REST API的文章列表端点支持两个关键分页参数：

• per_page：每次返回的文章数量，你设置为12即可（最大值是100，完全满足你的需求）
• page：请求的页码，初始是1，每次点击按钮页码加1

另外建议加上_embed参数，这样可以获取到特色图片、作者信息等嵌入数据，方便前端渲染更丰富的内容。

二、前端核心实现 #

1. HTML结构 #

先搭建基础的页面结构，包含文章容器和加载按钮：

<!-- 文章列表容器 -->
<div id="posts-container" class="posts-grid"></div>

<!-- 加载更多按钮 -->
<button id="load-more-btn" class="load-more-btn">加载更多</button>

<!-- 无更多内容提示（默认隐藏） -->
<div id="no-more-posts" class="no-more-posts" style="display:none;">已加载全部文章</div>

2. JavaScript逻辑 #

用原生Fetch API实现请求和渲染逻辑，代码注释很详细，你可以直接复用：

// 初始化参数
let currentPage = 1;
const perPage = 12;
const postsContainer = document.getElementById('posts-container');
const loadMoreBtn = document.getElementById('load-more-btn');
const noMorePosts = document.getElementById('no-more-posts');

// 加载文章的核心函数
async function fetchAndRenderPosts(page) {
    // 按钮置灰，防止重复点击
    loadMoreBtn.disabled = true;
    loadMoreBtn.textContent = '加载中...';

    try {
        // 发起API请求
        const response = await fetch(`/wp-json/wp/v2/posts?per_page=${perPage}&page=${page}&_embed`);
        
        // 检查请求是否成功
        if (!response.ok) throw new Error('请求失败，请稍后重试');

        // 获取文章数据和总页数（从响应头里取）
        const posts = await response.json();
        const totalPages = parseInt(response.headers.get('X-WP-TotalPages'), 10);

        // 渲染文章到页面
        renderPosts(posts);

        // 更新页码，判断是否还有更多内容
        currentPage++;
        if (currentPage > totalPages) {
            loadMoreBtn.style.display = 'none';
            noMorePosts.style.display = 'block';
        }

    } catch (error) {
        alert(error.message);
    } finally {
        // 恢复按钮状态
        loadMoreBtn.disabled = false;
        loadMoreBtn.textContent = '加载更多';
    }
}

// 渲染单篇文章的函数
function renderPosts(posts) {
    posts.forEach(post => {
        // 处理特色图片（如果有的话）
        const featuredImage = post._embedded?.['wp:featuredmedia']?.[0]?.source_url || '';
        
        // 创建文章卡片HTML
        const postCard = document.createElement('div');
        postCard.className = 'post-card';
        postCard.innerHTML = `
            ${featuredImage ? `<img src="${featuredImage}" alt="${post.title.rendered}" class="post-thumbnail">` : ''}
            <h3 class="post-title"><a href="${post.link}">${post.title.rendered}</a></h3>
            <div class="post-excerpt">${post.excerpt.rendered}</div>
            <div class="post-date">${new Date(post.date).toLocaleDateString()}</div>
        `;
        
        // 添加到容器中
        postsContainer.appendChild(postCard);
    });
}

// 页面初始加载第一页文章
document.addEventListener('DOMContentLoaded', () => {
    fetchAndRenderPosts(currentPage);
});

// 点击加载更多按钮触发请求
loadMoreBtn.addEventListener('click', () => {
    fetchAndRenderPosts(currentPage);
});

三、可选样式优化 #

给文章卡片和按钮加一些基础样式，提升用户体验：

.posts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
    padding: 20px;
}

.post-card {
    border: 1px solid #eee;
    border-radius: 8px;
    overflow: hidden;
    padding: 15px;
}

.post-thumbnail {
    width: 100%;
    height: 200px;
    object-fit: cover;
    margin-bottom: 10px;
}

.post-title {
    margin: 0 0 10px;
    font-size: 1.2rem;
}

.post-excerpt {
    color: #666;
    margin-bottom: 10px;
}

.load-more-btn {
    display: block;
    margin: 20px auto;
    padding: 10px 20px;
    background: #0073aa;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.load-more-btn:disabled {
    background: #ccc;
    cursor: not-allowed;
}

.no-more-posts {
    text-align: center;
    padding: 20px;
    color: #666;
}

四、关键注意事项 #

1. 跨域问题：如果你的前端和WordPress不在同一个域名下，需要在WordPress端配置CORS，可以通过添加代码到functions.php实现：

add_action('init', 'enable_cors');
function enable_cors() {
    header("Access-Control-Allow-Origin: *"); // 生产环境建议指定具体域名
    header("Access-Control-Allow-Methods: GET");
}

2. 性能优化：如果文章数量较多，建议开启WordPress的REST API缓存，可以用插件或者自定义代码实现，减少服务器压力。
3. SEO考虑：初始加载的12篇文章会被搜索引擎抓取，后续加载的内容是JS动态渲染的，如果你需要SEO覆盖所有文章，可以考虑服务器端渲染（SSR）或者使用预渲染工具，不过一般博客场景下，初始内容+动态加载的方式足够。

内容的提问来源于stack exchange，提问作者mijok