Как загрузить Custom MetaBox в Bootstrap Modal?

Question

logotiper @logotiper

Как загрузить Custom MetaBox в Bootstrap Modal?

Здравствуйте, я мало что знаю о wordpress, поэтому мне нужна небольшая помощь, чтобы что-то изменить в коде.
Это кнопка, которая открывает модальное окно:

<?php if ( $arr_posts->have_posts() ) :  ?>
    <?php while ( $arr_posts->have_posts() ) : $arr_posts->the_post(); ?>
        <div>
            <?php the_title(); ?>
            <button data-id="<?php the_ID(); ?>" class="view-post"><?php _e('View More'); ?></button>
        </div>
    <?php endwhile; ?>
<?php endif; ?>

Вот модальное окно, в котором открывается содержимое каждого отдельного поста:

<!-- Modal -->
<div class="modal" id="postModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="postModalLabel">testing</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body"></div>
        </div>
    </div>
</div>

Когда нажимаем кнопку «Просмотреть больше», нам нужно отправить вызов Ajax. В ответе Ajax мы получим заголовок сообщения и содержание сообщения, которое затем будет добавлено в Modal с помощью jQuery:

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);
            $('#postModal .modal-body').html(response.content);
  
            var postModal = new bootstrap.Modal(document.getElementById('postModal'));
            postModal.show();
        });
    });
});

Из кода jQuery, написанного выше, отправляет вызов Ajax с действием load_post_by_ajax. Это действие объявлена и прикреплено к нему метод обратного вызова. В методе обратного вызова записан фактический код:

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();
             
            $arr_response = array(
                'title' => get_the_title(),
                'content' => get_the_content(),
            );
        }
        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');

Вопрос такой...
Как в коде выше добавить свой собственный МетаБокс (Custom MetaBox)?
К примеру этот:

<?php
global $post;	
$photos_query = get_post_meta( $post->ID, 'gallery_data', true );
$photos_array = unserialize($photos_query);
$url_array = $photos_array['image_url'];
$count = sizeof($url_array);				
for( $i=0; $i<$count; $i++ ){
   ?>		
   <div class="img_single_box">
      <img class="gallery-img" src="<?php echo $url_array[$i]; ?>" alt=""/>
   </div>	
   <?php 
}
?>

каторый выводит фотографии.
Сылка на источник

Я знаю, как добавить это прямо в html-код, но только через данный способ будет работать, и я не знаю, как это сделать, заранее спасибо!