ACF PRO

Хочется рассмотреть один аспект версии 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 хранятся шаблоны с версткой.

Пример блока 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>

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

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