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

Содержание

Вопрос или проблема
Ответ или решение
Шаг 1: Создание уникального ID для каждой кнопки и модального окна
Шаг 2: Закрытие модального окна
Шаг 3: Открытие модального окна с помощью CSS
Шаг 4: Пример полного кода
Заключение

Вопрос или проблема

У меня есть индивидуальный архив типов записей, содержащий статьи, в которых вызывается некоторый контент ACF для каждой записи. Я использовал WP_Query, чтобы вывести эти статьи на странице архива, и в каждой статье есть кнопка, при нажатии на которую откроется модальное окно с изображениями, которые я разместил в повторителе ACF для пользовательского поста.

Как мне вызвать модальное окно с помощью этой кнопки, не открывая другие модальные окна?

Вот мой код для страницы архива:

<?php if ($the_query->have_posts()) { ?>
    <div id="post-list" class="columns property-grid">
        <?php while( $the_query->have_posts() ) : $the_query->the_post(); ?>
        <?php get_template_part( 'partials/content' , 'property' ); ?>
        <?php endwhile; // while has_post(); ?>

        <?php the_posts_pagination(); ?>
    </div>
<?php } else { ?>
        <?php } wp_reset_postdata(); ?>
<?php } endif { ?>

А вот мой код для цикла данных по статье:

            <h2><?php the_title(); ?></h2>
            <?php echo get_field('property_address');?>
            <a href="#" class="button gallery-button">Просмотр изображений</a>

Вот мой код для всплывающего модального окна галереи, если необходимо:

<div class="modal-gallery">
            <span class="close cursor" onclick="closeModal()">&times;</span>
            <div class="modal-content">
                <?php if(have_rows('property_gallery')) : ?>
                    <?php while(have_rows('property_gallery')) : the_row() ?>
                        <img class="prop-image" src="https://wordpress.stackexchange.com/questions/344978/<?php echo get_sub_field("image'); ?>" alt=""><br>

                        <!-- Элементы управления для следующего/предыдущего -->
                        <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
                        <a class="next" onclick="plusSlides(1)">&#10095;</a>

                        <!-- Текст подписи -->
                        <div class="caption">
                            <p><?php echo get_sub_field('image_text'); ?></p>
                        </div>
                    <?php endwhile ?>
                <?php endif; ?>
            </div>
        </div>

В моем JS файле у меня есть функция, называемая openModal, но я не знаю, как вызвать модальное окно конкретной статьи. Если я вызову по классу, это не сработает, поскольку каждая кнопка будет использовать этот класс, и я не могу указать ID, не установив его заранее для каждой статьи. Неполный код ниже:

function openModal(){
    $('.gallery-button').click(function(){
        event.preventDefault();
        console.log('gallery-button нажата');
    });
}

Я решил переписать свой код и больше не использовать JS для открытия модального окна, а чистый CSS. Затем я прикрепил ID поста к тегу ID, чтобы каждое модальное окно было уникальным.

Код для тега ниже. Href соответствует ID на диве модала.

<a href="#open-modal-<?php echo $post->ID; ?>" class="button gallery-button">Просмотр изображений</a>

Ответ или решение

Чтобы链接按钮 ACF в пользовательском типе поста к динамическому модальному окну, вам необходимо создать уникальный идентификатор для каждого модального окна, связанного с конкретной записью. Это можно сделать с помощью ID поста. Вот пошаговая инструкция, как это реализовать.

Шаг 1: Создание уникального ID для каждой кнопки и модального окна

Вместо того чтобы использовать одинаковый класс для всех кнопок, вам следует добавить идентификаторы, основанные на ID поста. Это позволяет каждой кнопке открывать свое собственное модальное окно.

Измените код вашей кнопки следующим образом:

<a href="#open-modal-<?php echo get_the_ID(); ?>" class="button gallery-button">View Images</a>

Теперь нужно будет также изменить HTML-код для модального окна, чтобы добавить уникальный ID к каждому модальному окну, используя тот же ID поста:

<div id="open-modal-<?php echo get_the_ID(); ?>" class="modal-gallery">
    <span class="close cursor" onclick="closeModal()">&times;</span>
    <div class="modal-content">
        <?php if(have_rows('property_gallery')) : ?>
            <?php while(have_rows('property_gallery')) : the_row(); ?>
                <img class="prop-image" src="<?php echo get_sub_field("image"); ?>" alt="">
                <br>
                <a class="prev" onclick="plusSlides(-1)">& #10094;</a>
                <a class="next" onclick="plusSlides(1)">& #10095;</a>
                <div class="caption">
                    <p><?php echo get_sub_field('image_text'); ?></p>
                </div>
            <?php endwhile; ?>
        <?php endif; ?>
    </div>
</div>

Шаг 2: Закрытие модального окна

Чтобы закрывать модальное окно, вам нужно будет обновить вашу функцию closeModal:

function closeModal() {
    const modals = document.querySelectorAll('.modal-gallery');
    modals.forEach(modal => {
        modal.style.display = 'none';
    });
}

Шаг 3: Открытие модального окна с помощью CSS

С помощью CSS вы можете управлять отображением модального окна. Например, добавьте стили для отображения модального окна при нажатии на соответствующую ссылку:

.modal-gallery {
    display: none; /* Запрещаем показ модального окна по умолчанию */
}

.modal-gallery:target {
    display: block; /* Показываем модальное окно, когда соответствующий ID активирован */
}

Такой подход позволяет открывать конкретные модальные окна только по той ссылке, на которую вы нажмете, не вызывая другие.

Шаг 4: Пример полного кода

<?php if ($the_query->have_posts()) : ?>
    <div id="post-list" class="columns property-grid">
        <?php while( $the_query->have_posts() ) : $the_query->the_post(); ?>
            <h2><?php the_title(); ?></h2>
            <?php echo get_field('property_address'); ?>
            <a href="#open-modal-<?php echo get_the_ID(); ?>" class="button gallery-button">View Images</a>

            <div id="open-modal-<?php echo get_the_ID(); ?>" class="modal-gallery">
                <span class="close cursor" onclick="closeModal()">&times;</span>
                <div class="modal-content">
                    <?php if(have_rows('property_gallery')) : ?>
                        <?php while(have_rows('property_gallery')) : the_row(); ?>
                            <img class="prop-image" src="<?php echo get_sub_field("image"); ?>" alt="">
                            <br>
                            <a class="prev" onclick="plusSlides(-1)">& #10094;</a>
                            <a class="next" onclick="plusSlides(1)">& #10095;</a>
                            <div class="caption">
                                <p><?php echo get_sub_field('image_text'); ?></p>
                            </div>
                        <?php endwhile; ?>
                    <?php endif; ?>
                </div>
            </div>
        <?php endwhile; ?>

        <?php the_posts_pagination(); ?>
    </div>
<?php else : ?>
    <p>Записи не найдены.</p>
<?php endif; wp_reset_postdata(); ?>

Заключение

Таким образом, вы можете привязать ACF кнопку в пользовательском типе поста к динамическому модальному окну, используя уникальные ID на основе ID каждого поста. Это позволяет вам легко управлять несколькими модальными окнами без риска их конфликтов. Обратите внимание на правильное использование CSS для управления отображением этих окон, что сделает ваше решение более элегантным и эффективным.