1. Переходим в раздел ACF – > Группа полей – > Модули | Изменить
2. Переходим в самый низ и добавляем “вкладку”, называем ее “До и После”
– Расположение: выровнено по левому краю
3. Далее добавляем группу: называем ее: “before_after_group”
–
4. Внутрь группы добавляем поля:
Шаблон | template | Тип: Выбрать
Заголовок | title | Тип: Текст
Элементы| items | Тип: Повторитель
5. Добавляем строки в наш “Элементы”
Заголовок “До” | title_before | Тип: Текст
Изображение “До” | image_before| Тип: Изображение
Заголовок “После” | title_after | Тип: Текст
Изображение “После” | image_after | Тип: Изображение
->
6. Далее идем в ACF -> Редактор блоков
Жмем кнопку “Добавить новый макет”
Этикетка: До и После
Имя: before_after
Render 1 строка /wp-content/themes/corp-cinar/: parts/sections/before_after.php
Остальные строки пустые.
Поля
До и После | before_after_group | Тип: Группа
Индивидуально | own | Тип: True / False -> Презетация -> Стилизованный вид
Настройка | own_group | Тип: Клонировать
– Поля -> Выбираем До и После (group) из раздела ACF Модули
–
– Префикс для названий полей -> Отметить бокс
7. Переходим во вкладка “Услованая логика” у Поля “Настройки”
Переключаем переключатель
Выбираем из раздела “До и После” в первой колонки пункт “Индивидаульно”
8. Создаем файл before_after.php в папке темы /wp-content/themes/corp-cinar/parts/sections
Помещаем туда код
<?
if(!is_archive()) {
$id_page_field = get_the_id();
$id_page = get_the_id();
$acf_id_page = get_the_id();
$page_title = get_the_title($id_page);
} else {
global $maincategory;
$id_page_field = $maincategory;
$id_page = $maincategory->term_id;
$acf_id_page = 'category_' . $maincategory->term_id;
$page_title = get_cat_name($id_page);
}
$currentFileNameWithoutExtension = pathinfo(__FILE__, PATHINFO_FILENAME);
//Название файла = название префикса, который равен названию слоя
$prefixClass = $currentFileNameWithoutExtension;
//Группа состоит из названия слоя + постфикс _group
$section = get_sub_field($prefixClass.'_group');
if(!empty($section['own'])) {
$sectionTemplate = $section['own_group']["before_after_group"];
} else {
$sectionTemplate = get_field('before_after_group', 'option');
}
?>
<div class="section-common before_after">
<div class="container">
<?php get_template_part('parts/items/before_after/' . $sectionTemplate['template'], null, $args = ['sectionTemplate' => $sectionTemplate, 'section' => $section]); ?>
</div>
</div>
9. Далее заходим в /wp-content/themes/corp-cinar/parts/items
Создаем папку: before_after
внутри нее создаем файл: simple.php
внутрь файла вставляем следующий код:
<?
global $is_preview;
$sectionTemplate = $args['sectionTemplate'];
$section = $args['section'];
$randclass = rand();
?>
<? if(empty($section['hide_title'])) { ?>
<? get_template_part( 'parts/items/simple_section_title', null, $args = ['section' => $sectionTemplate]); ?>
<?php } ?>
<? if(!$is_preview) { ?>
<script>
document.addEventListener('DOMContentLoaded', function(){
jQuery('.randclass-<?=$randclass?> .before_after_list_in').slick({
centerMode: false,
lazyLoad: 'ondemand',
slidesToShow: 2,
arrows: true,
dots: true,
speed: 900,
infinite: false,
touchThreshold: 100,
autoplay: false,
autoplaySpeed: 5000,
variableWidth: false,
appendDots: $(".randclass-<?=$randclass?> .slide-m-dots"),
prevArrow: $(".randclass-<?=$randclass?> .slide-m-prev"),
nextArrow: $(".randclass-<?=$randclass?> .slide-m-next"),
responsive: [
{
breakpoint: 990,
settings: {
slidesToShow: 1,
slidesToScroll: 1,
}
},
]
});
});
</script>
<? } ?>
<?php
// Получение постов для каждой подкатегории
$items = $sectionTemplate['items'];
$countitems = count($items);
?>
<div class="before_after_list_wrap randclass-<?=$randclass?> <? if($is_preview) { ?>is_preview<?php } ?>">
<div class="before_after_list_in">
<?php foreach ($items as $item) { ?>
<div class="before_after_item">
<div class="before_after_item_in">
<div class="before_after_item_before">
<img src="<?=$item['image_before']['sizes']['medium']?>" alt="фото <?=wp_strip_all_tags($item['title_before'])?>">
<div class="before_after_item_text"><?=$item['title_before']?></div>
</div>
<div class="before_after_item_after">
<img src="<?=$item['image_after']['sizes']['medium']?>" alt="фото <?=wp_strip_all_tags($item['title_after'])?>">
<div class="before_after_item_text"><?=$item['title_after']?></div>
</div>
</div>
</div>
<?php } ?>
</div>
<? if(!$is_preview) { ?>
<div class="btn_centerered_wrapper btn_big_topmargin_wrapper">
<div class="slider-controls">
<div role="button" class="slide-m-prev">
<svg width="22" height="12" viewBox="0 0 22 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path opacity="0.8" d="M21 6.75C21.4142 6.75 21.75 6.41421 21.75 6C21.75 5.58579 21.4142 5.25 21 5.25V6.75ZM0.469669 5.46967C0.176777 5.76256 0.176777 6.23744 0.469669 6.53033L5.24264 11.3033C5.53553 11.5962 6.01041 11.5962 6.3033 11.3033C6.59619 11.0104 6.59619 10.5355 6.3033 10.2426L2.06066 6L6.3033 1.75736C6.59619 1.46447 6.59619 0.989593 6.3033 0.696699C6.01041 0.403806 5.53553 0.403806 5.24264 0.696699L0.469669 5.46967ZM21 5.25H1V6.75H21V5.25Z" fill="#0052A0"/>
</svg>
</div>
<div class="slide-m-dots"></div>
<div role="button" class="slide-m-next">
<svg width="22" height="12" viewBox="0 0 22 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path opacity="0.8" d="M1 5.25C0.585786 5.25 0.25 5.58579 0.25 6C0.25 6.41421 0.585786 6.75 1 6.75L1 5.25ZM21.5303 6.53033C21.8232 6.23744 21.8232 5.76256 21.5303 5.46967L16.7574 0.696698C16.4645 0.403804 15.9896 0.403804 15.6967 0.696698C15.4038 0.989591 15.4038 1.46446 15.6967 1.75736L19.9393 6L15.6967 10.2426C15.4038 10.5355 15.4038 11.0104 15.6967 11.3033C15.9896 11.5962 16.4645 11.5962 16.7574 11.3033L21.5303 6.53033ZM1 6.75L21 6.75L21 5.25L1 5.25L1 6.75Z" fill="#0052A0"/>
</svg>
</div>
</div>
</div>
<?php } ?>
</div>
10. Подключение стилей к модулю
Переходим в /wp-content/themes/corp-cinar/css
Создаем файл before_after.css
вставляем в него:
.before_after_item_in{
display:flex;
padding-left:35px;
padding-right:35px;
}
.before_after_item_before{
border-right:1px solid #fff;
}
.before_after_item_after{
border-left:1px solid #fff;
}
.before_after_item_before, .before_after_item_after{
width:50%;
}
.before_after_item_in img{
width:100%;
object-fit:cover;
height:301px;
}
.before_after_list_wrap{
margin:0 -35px;
}
.before_after_item_text{
text-transform:uppercase;
font-size: 15px;
padding-top:22px;
text-align:center;
font-weight: 500;
}
.is_preview .before_after_list_in{
display:flex;
}
.is_preview .before_after_list_in .before_after_item{
width:50%;
}
.is_preview .before_after_list_in div.before_after_item:nth-of-type(n+3) {
display: none;
}
@media (max-width: 990px) {
.before_after_item_in img{
height:200px;
}
}
@media (max-width: 490px) {
.before_after_item_text {
font-size:12px;
}
.before_after_item_in img{
height:160px;
}
}
10. Подключаем файл before_after.css в /wp-content/themes/corp-cinar/parts/frontend-cssjs.php
11. Подключаем файл before_after.css в /wp-content/themes/corp-cinar/parts/devmarket.php для административной панели
