/ Плагины / ACF PRO

ACF PRO

NEW

23.10.2024

57

Хочется рассмотреть один аспект версии PRO, который добавляет сатам очень мощный инструментарий по верстке шаблонов. Речь идет про Flexible Content. Это наборы полей, которые можно добавлять на любой странице. Эти блоки можно менять местами, комбинировать и т.д. Один такой блок может представлять собой блок с набором компонентов (полей):

  • Заголовок
  • Описание
  • Картинка
  • Фон
  • Галерея
  • Ссылка
  • и т.д.

Выводятся Flexible Content в специальной области в шаблоне

<?php // ACF - Flexible Content fields.
$sections = get_field( 'flexible_content' );

if ( $sections ) :
    foreach ( $sections as $section ) :
        $template = str_replace( '_', '-', $section['acf_fc_layout'] );
        get_template_part( 'flexible-content/'.$template, '', $section );
    endforeach;
endif; ?>

Но можно конечно выводить и отдельный блок.

В шаблонах, в папке flexible-content хранятся шаблоны с версткой.

Когда мы подключаем шаблон с помощью функции get_template_part, то вторым аргументом ($section) мы можем передавать в него массив значений.

Пример блока Flexible Content

Как он выглядит в интерфейсе ACF

Заполнение блока на странице в админке:

Верстка этого блока. Файл fitness.php в папке flexible-content

<section id="fitness"><div class="container-fluid"><div class="row">

	<div class="col-7">

		<div class="fitness-gallery" data-aos="fade-right">
			<div class="fitness-gallery-swiper swiper">

				<div class="fitness-gallery-items swiper-wrapper">

                    <?php foreach ($args['gallery'] as $img_id): 
                    $attachment = wp_get_attachment_image_src( $img_id, 'full'); ?>

					<div class="swiper-slide">
                        <img loading="lazy" src="<?php echo $attachment[0]; ?>" width="<?php echo $attachment[1]; ?>" height="<?php echo $attachment[2]; ?>">
					</div>

                    <?php endforeach; ?>

				</div>
			</div>

			<div class="fitness-pagination">
				<div class="fitness-pagination-items"></div>
			</div>

			<div class="fitness-gallery-buttons" data-aos="fade-up">
				<div class="prev"></div>
				<div class="next"></div>
			</div>

		</div>

	</div>

	<div class="col-5 text-wrap" data-aos="fade-left">

		<h2><?php echo $args['title_top']; ?></h2>

		<div class="text">

			<h3><?php echo $args['title']; ?></h4>
			<div class="area">
                <?php echo wpautop($args['description']); ?>
			</div>

            <?php if ($args['link_text']) {
            echo '<div class="buttons">';
                if ($args['link_url']) {
                    echo '<a class="btn" href="'.$args['link_url'].'">'.$args['link_text'].'</a>';
                }
            echo '</div>';
            } ?>

		</div>		

	</div>

</div></div></section>

Как это выглядит на сайте:

Подобный подход к вёрстке открывает широкий горизонт решений.

[site-socialshare]
  • Комментарии
  • Вложения

Добавить комментарий

Пока нет комментариев. Будь первым!

ACF PRO ACF PRO ACF PRO ACF PRO
Взаимодействие форм и scripts
Рекомендации для васВзаимодействие форм и scriptsOpttour.ru
Спасибо! Наш менеджер свяжется с Вами в течении 5 минут.