WordPress中点击模态框按钮动态更新URL为文章slug的问题

问题根源 #

1. 你当前代码里window.history.pushState中的this.url指向错误：Ajax回调函数里的this是jqXHR请求对象，不是点击的.view-post按钮，无法获取正确的文章URL，最终默认使用了当前Ajax请求的地址（admin-ajax.php）。
2. 后端接口未返回文章的完整永久链接（带slug的URL），或前端未正确传递/获取该链接。

解决步骤 #

步骤1：确保前端能获取到文章的正确URL #

有两种可靠实现方式：

方式A：给按钮添加文章URL的data属性

在PHP渲染.view-post按钮时，添加data-url属性，值为文章的永久链接：

<!-- PHP渲染按钮示例 -->
<button class="view-post" data-id="<?php the_ID(); ?>" data-url="<?php the_permalink(); ?>">查看文章</button>

修改JS代码，提前保存按钮上的文章URL，避免回调里this指向错误：

jQuery(function($) {
    $('body').on('click', '.view-post', function() {
        // 提前保存点击按钮对应的文章URL
        var postUrl = $(this).data('url');
        var data = {
            'action': 'load_post_by_ajax',
            'id': $(this).data('id'),
            'security': blog.security
        };
 
        $.post(blog.ajaxurl, data, function(response) {
            response = JSON.parse(response);
            $('#postModal h5#postModalLabel').text(response.title);
            $('#postModal .modal-body').html(response.content);
 
            var postModal = new bootstrap.Modal(document.getElementById('postModal'));
            postModal.show();

            // 使用提前保存的文章URL更新地址栏
            window.history.pushState(null, null, postUrl);
        });
    });
});

方式B：从后端接口返回文章URL

修改PHP后端的load_post_by_ajax函数，在返回的JSON数据中加入文章永久链接：

function load_post_by_ajax() {
    check_ajax_referer('blog-security', 'security');
    $post_id = intval($_POST['id']);
    $post = get_post($post_id);
    
    if (!$post) {
        wp_send_json_error('文章不存在');
    }

    // 新增文章永久链接字段
    $response = array(
        'title' => get_the_title($post_id),
        'content' => apply_filters('the_content', $post->post_content),
        'url' => get_permalink($post_id)
    );

    wp_send_json($response);
}
add_action('wp_ajax_load_post_by_ajax', 'load_post_by_ajax');
add_action('wp_ajax_nopriv_load_post_by_ajax', 'load_post_by_ajax');

前端直接使用后端返回的response.url更新地址栏：

jQuery(function($) {
    $('body').on('click', '.view-post', function() {
        var data = {
            'action': 'load_post_by_ajax',
            'id': $(this).data('id'),
            'security': blog.security
        };
 
        $.post(blog.ajaxurl, data, function(response) {
            // 注意：如果后端使用wp_send_json，jQuery会自动解析JSON，无需手动调用JSON.parse
            // response = JSON.parse(response); 可注释此行
            $('#postModal h5#postModalLabel').text(response.title);
            $('#postModal .modal-body').html(response.content);
 
            var postModal = new bootstrap.Modal(document.getElementById('postModal'));
            postModal.show();

            // 使用后端返回的文章URL更新地址栏
            window.history.pushState(null, null, response.url);
        });
    });
});

额外优化：处理浏览器前进后退 #

若要支持用户点击浏览器前进/后退时自动加载对应文章的模态框内容，可监听popstate事件：

$(window).on('popstate', function() {
    var currentUrl = window.location.href;
    // 此处需实现根据URL获取文章ID的逻辑（比如通过解析slug调用自定义AJAX接口）
    // 然后调用加载模态框的函数，渲染对应文章内容
});

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