如何在WordPress中用jQuery解析并展示conference_speaker_business字段

要让Bootstrap模态框同时展示conference_speaker_business自定义字段，分三步修改代码即可：

1. 更新AJAX回调函数（PHP） #

在load_post_by_ajax_callback函数中，将自定义字段的值加入返回的响应数组：

function load_post_by_ajax_callback() {
    check_ajax_referer('view_post', 'security');
    $args = array(
        'post_type' => 'post',
        'p' => $_POST['id'],
    );
    
    $posts = new WP_Query( $args );
    
    $arr_response = array();
    if ($posts->have_posts()) {
        while($posts->have_posts()) {
            $posts->the_post();
            
            // 获取自定义字段值
            $speaker_business = get_post_meta(get_the_ID(), 'conference_speaker_business', true);
            
            $arr_response = array(
                'title' => get_the_title(),
                'content' => get_the_content(),
                'speaker_business' => $speaker_business // 添加到响应数组
            );
        }
        wp_reset_postdata();
    }
    
    echo json_encode($arr_response);
    wp_die();
}
add_action('wp_ajax_load_post_by_ajax', 'load_post_by_ajax_callback');
add_action('wp_ajax_nopriv_load_post_by_ajax', 'load_post_by_ajax_callback');

2. 修改前端JS代码 #

在AJAX成功回调中，将自定义字段内容插入模态框：

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) {
            response = JSON.parse(response);
            $('#postModal h5#postModalLabel').text(response.title);
            
            // 组合文章内容与自定义字段
            var modalContent = `
                ${response.content}
                ${response.speaker_business ? '<div class="mt-3"><strong>演讲者所属机构：</strong>' + response.speaker_business + '</div>' : ''}
            `;
            $('#postModal .modal-body').html(modalContent);
 
            var postModal = new bootstrap.Modal(document.getElementById('postModal'));
            postModal.show();
        });
    });
});

3. 可选：优化模态框HTML布局 #

如果需要更清晰的结构，可以在模态框的.modal-body中预留专门区域：

<div class="modal-body">
    <div class="post-content"></div>
    <div class="speaker-business mt-3"></div>
</div>

对应的JS代码调整为：

// ...
$('#postModal .post-content').html(response.content);
if (response.speaker_business) {
    $('#postModal .speaker-business').html('<strong>演讲者所属机构：</strong>' + response.speaker_business);
} else {
    $('#postModal .speaker-business').empty();
}
// ...

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