Как можно обернуть несколько изображений в разные ссылки с помощью плагина ACF?

Добрый день! <br/> У меня есть блок с производителями, который состоит из группы статических изображений. <br/> Я хотел бы добавить к каждой картинке индивидуальную ссылку, чтобы можно было перейти к товарам конкретного производителя. <br/> На данный момент мне удалось установить только одну ссылку для всех картинок. <br/> Не могли бы вы подсказать, какие существуют варианты решения этой задачи? <br/> Использую WordPress, блок создан с помощью плагина ACF. <br/>
  • 1 марта 2025 г. 15:24
Ответы на вопрос 2
Добрый день!

Для того чтобы обернуть каждое изображение в индивидуальную ссылку с помощью плагина ACF, вам потребуется создать группу полей для каждого изображения. Вот шаги, которые помогут вам это реализовать:

1. **Создание полей в ACF**:
   - В админке WordPress перейдите в раздел "Custom Fields" (Пользовательские поля).
   - Создайте новую группу полей (или отредактируйте существующую), если это еще не сделано.
   - Добавьте поле типа "Image" для каждого изображения, которое вы хотите использовать.
   - Добавьте поле типа "URL" (или "Text") для каждой ссылки, соответствующей каждому изображению.
   - Убедитесь, что порядковые номера полей позволяют вам группировать изображения и ссылки (например, Image 1, Link 1; Image 2, Link 2 и так далее).

2. **Вывод данных в шаблоне**:
   - Перейдите в файл, который отвечает за вывод вашего блока на сайте (например, `block.php`).
   - Используйте следующий PHP код для извлечения и отображения изображений с ссылками:

```php
<?php if( have_rows('имя_вашей_группы') ): ?>
    <div class="produсers">
        <?php while( have_rows('имя_вашей_группы') ): the_row(); 
            $image = get_sub_field('image'); // Получаем изображение
            $link = get_sub_field('link'); // Получаем ссылку
        ?>
            <div class="producer-item">
                <?php if( $link ): ?>
                    <a href="<?php echo esc_url($link); ?>" target="_blank">
                        <img src="<?php echo esc_url($image['url']); ?>" alt="<?php echo esc_attr($image['alt']); ?>" />
                    </a>
                <?php else: ?>
                    <img src="<?php echo esc_url($image['url']); ?>" alt="<?php echo esc_attr($image['alt']); ?>" />
                <?php endif; ?>
            </div>
        <?php endwhile; ?>
    </div>
<?php endif; ?>
```

3. **Настройка стилей** (опционально):
   - В зависимости от вашего дизайна, вы можете добавить CSS для стилизации блока производителей. Например, использовать Flexbox или Grid для расположения изображений.

Теперь каждая картинка будет обернута в свою ссылку, и вы сможете настроить их индивидуально!

Если у вас возникнут вопросы по какому-либо из этапов, не стесняйтесь спрашивать!
Используй acf повторитель. Там сделай одно поле под картинку, второе под ссылку
Похожие вопросы