Как вывести значения ACF Вордпресс в модальном окне?

Question

[Артем]

Столкнулся с такой проблемой, что при показе записи в модельном окне не выводятся значения Группы полей (ACF).
Цикл выводится и модальное окно появляется при нажатии на кнопку но оно пустое, никак не соображу в чем проблема.

код functions.php

function artisansweb_scripts() {
    wp_enqueue_style('bootstrapcss', 'https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css', array(), false, 'all');
      
    wp_register_script('bootstrapjs', 'https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js', array('jquery'), false, true);
    wp_enqueue_script('bootstrapjs');
  
    wp_register_script('custom-script', get_stylesheet_directory_uri(). '/js/custom.js', array('jquery'), false, true);
    // Localize the script with new data
    $script_data_array = array(
        'ajaxurl' => admin_url( 'admin-ajax.php' ),
        'security' => wp_create_nonce( 'view_post' ),
    );
    wp_localize_script( 'custom-script', 'blog', $script_data_array );
    wp_enqueue_script('custom-script');
}
add_action('wp_enqueue_scripts', 'artisansweb_scripts');

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');

Вывод цикла постов

<?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; ?>

Код модального окна

<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>

Скрипт

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();
        });
    });
});

Answer 1

[Артем]

Сообразил как нужно было сделать:
в functions.php добавить: 'field_name' => get_field('acf-field'),
а в коде модального окна для вывода поля в нужном месте установить id из скрипта:

<div class="modal-body">
<p class="" id="postModalField"></p>
</div>

в скрипте добавить строчки с id на подобии:

$('#postModal .modal-body #postModalField').html(response.field_name);

Answer 2

[Андрей Димаков]

Ну тебе нужно чем-то вывести ACF-поля. А их нет. Например, у тебя есть какое-то поле с именем 'test', а как его показать, если ты его не прописал? Конструкция в помощь:
<?php the_field('test'); ?>
Тебе нужно это вставить в модальное окно перед кнопкой

Comments

[Артем]

Спасибо, но немного не то

[Артем]

Но теперь другая проблема, все показывается все отлично но вот галерею acf-pro ну никак не получается завести, либо также для первого поста показывается либо вобще пусто

[Андрей Димаков]

Артем, Галерея немного по-другому выводится. Вот как указано в документации:

<?php 
$images = get_field('gallery'); //берем наше поле
$size = 'full'; // (thumbnail, medium, large, full or custom size) (задаем размер изображения)
if( $images ): ?> 
    <ul>
        <?php foreach( $images as $image_id ): ?>
            <li>
                <?php echo wp_get_attachment_image( $image_id, $size ); ?> //и выводим его (необязательно здесь может быть li, можно использовать, например, div)
            </li>
        <?php endforeach; ?>
    </ul>
<?php endif; ?>

[Артем]

Андрей Димаков, Пробовал. Не работает.

Нужно как-то заставить работать через скрипт, а как я не могу придумать

[Андрей Димаков]

Артем, окей. Тогда приведу пример из своего сайта.

<div class="row div_shoe">
        <?php
	$images = get_field('three_dress');
	foreach ($images as $image):?>
		<div class="col-4 col-phone fash">
			<a href="<?php the_permalink(); ?>">
				<img class="three_dress" height="500" width="360" src="<?php echo $image['sizes']['large']; ?>" alt="<?php echo $image['alt']; ?>">
			</a>
		</div>
	<?php endforeach;?>
</div>

У меня лично вот так вывод галереи через ACF работает

[Артем]

Андрей Димаков, блин я так рад что у тебя работает))

Но в любом случае спасибо за помощь, буду думать что-то еще. как завести ее в модальном окне