如何在WordPress AJAX加载更多中为文章数组添加文章URL

没问题！要把文章URL加入到AJAX返回的数据里其实非常简单，咱们分PHP和前端JS两部分来调整：

第一步：在PHP的ajax_posts()函数中添加文章URL #

在你处理AJAX请求的PHP函数里，当你遍历查询到的文章时，只需要用WordPress内置的get_permalink()函数获取文章的完整URL，然后把它塞进要返回的文章数组里就行。

举个完整的示例代码：

function ajax_posts() {
    // 获取当前页码（根据你的逻辑调整）
    $paged = isset($_POST['page']) ? intval($_POST['page']) + 1 : 1;
    
    // 构建WP_Query查询参数
    $args = array(
        'post_type'      => 'post',
        'posts_per_page' => 2, // 每次返回2篇，和你的需求匹配
        'paged'          => $paged,
        'post_status'    => 'publish'
    );
    
    $query = new WP_Query($args);
    $posts_data = array();

    if ($query->have_posts()) {
        while ($query->have_posts()) {
            $query->the_post();
            
            // 把文章的各类数据（包括URL）存入数组
            $posts_data[] = array(
                'id'      => get_the_ID(),
                'title'   => get_the_title(),
                'excerpt' => get_the_excerpt(),
                'url'     => get_permalink(get_the_ID()), // 关键：添加这一行获取文章URL
                // 你还可以加其他需要的字段，比如特色图、发布时间等
            );
        }
        wp_reset_postdata(); // 重置查询，避免影响后续全局变量
    }

    // 以JSON格式返回成功数据
    wp_send_json_success($posts_data);
}
// 注册AJAX动作（登录用户和未登录用户都能访问）
add_action('wp_ajax_ajax_posts', 'ajax_posts');
add_action('wp_ajax_nopriv_ajax_posts', 'ajax_posts');

第二步：在前端AJAX的success函数中使用文章URL #

当AJAX请求成功后，你可以从返回的response.data里拿到包含URL的文章数组，然后在拼接HTML的时候直接用post.url来生成链接，比如把文章标题做成可点击的链接：

jQuery(document).ready(function($) {
    let currentPage = 1;
    const loadMoreBtn = $('.load-more-button');
    const postsContainer = $('.posts-list');

    loadMoreBtn.on('click', function() {
        // 禁用按钮防止重复点击
        $(this).prop('disabled', true).text('加载中...');

        $.ajax({
            url: your_ajax_object.ajax_url, // 这里是wp_localize_script传递的AJAX地址
            type: 'POST',
            data: {
                action: 'ajax_posts',
                page: currentPage
            },
            success: function(response) {
                if (response.success) {
                    const posts = response.data;
                    
                    // 遍历文章数组，拼接HTML并追加到页面
                    posts.forEach(post => {
                        const postHtml = `
                            <article class="single-post">
                                <h3 class="post-title">
                                    <a href="${post.url}" rel="bookmark">${post.title}</a>
                                </h3>
                                <div class="post-excerpt">${post.excerpt}</div>
                            </article>
                        `;
                        postsContainer.append(postHtml);
                    });

                    currentPage++;
                    // 如果没有更多文章，可以隐藏按钮
                    if (posts.length < 2) {
                        loadMoreBtn.hide();
                    }
                }
                // 恢复按钮状态
                loadMoreBtn.prop('disabled', false).text('加载更多');
            },
            error: function() {
                loadMoreBtn.prop('disabled', false).text('加载失败，重试');
            }
        });
    });
});

额外提示 #

• 如果你之前用wp_localize_script传递了初始的文章数据，那也要在初始数据里同步加入URL字段，保持前后端数据结构一致。
• get_permalink()函数会自动返回当前文章的完整URL（包含域名），不需要手动拼接，非常省心。
• 记得用wp_send_json_success()来返回数据，它会自动处理JSON头和格式，前端可以直接解析，比手动echo JSON要安全规范。

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