Углубляемся в изучение ACF (Advanced Custom Fields). Начало в уроке Как сделать одностраничник на Вордпресс — работа с ACF.
Откроем опять Velocee. Проскроллим вниз и увидим бутстрап-карусель (где кроссовки).
Здесь у меня простейший вариант — я знаю, что будет всего 2 слайда, при этом меняется только текст внутри, фоновая картинка остается прежней. То есть по сути карусель статична. И мы можем вывести два текста как два Произвольных поля через плагин ACF.
Код в шаблоне:
<div class="carousel_bg"> <div class="container"> <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> <!-- Indicators --> <ol class="carousel-indicators"> <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> <li data-target="#carousel-example-generic" data-slide-to="1"></li> </ol> <!-- Wrapper for slides --> <div class="carousel-inner" role="listbox"> <div class="item active screen08"> <div class="container"> <h1><?php echo get_field('text_for_slider_first_frame'); ?></h1> </div> </div><!-- /item --> <div class="item screen08"> <div class="container"> <h1><?php echo get_field('text_for_slider_second_frame'); ?></h1> </div> </div><!-- /item --> </div> </div> </div> </div><!-- /row -->
Класс carousel_bg выводит фон (фиксированный, адаптивный и т.п.). Дальше идет сама карусель. Тут все предельно понятно. Создаем два поля в Кастомных полях (Custom Fileds), заполняем их в админке страницы и выводим в шаблоне кусками кода:
<?php echo get_field('text_for_slider_first_frame'); ?>
и
<?php echo get_field('text_for_slider_second_frame'); ?>
то есть — текст для первого кадра и текст для второго кадра.
Так это все сейчас работает, но мы усложним задачу. Предположим, я не знаю, сколько будет слайдов. Клиент будет эти слайды добавлять. Естественно, он не станет делать это через Custom Fields в админе, у него должно быть все готово для заполнения через админку страницы.
Мыслим логически — нам нужно, чтобы был какой-то механизм, который выводит все кастомные поля, пока они есть, внутри карусели.
Для этих целей есть расширение для ACF, называется ACF Repeater. Я не в курсе, платное ли оно, мне досталось в наследство на работе, даю сюда на скачивание:
Скачайте архив, идите в Плагины > Добавить новый > Загрузить плагин > выбираете свой зип > аплоад > активировать, готово.
Теперь идем в наши Произвольные поля. Добавляем поле и когда выбираем тип (Field Type) — вот он наш родной — Repeater, то есть — Повторитель.
Как выводить поля с помощью ACF Reapeater?
Согласно документации, в репитере выводим поля так:
<?php // check if the repeater field has rows of data if( have_rows('repeater_field_name') ): // loop through the rows of data while ( have_rows('repeater_field_name') ) : the_row(); // display a sub field value the_sub_field('sub_field_name'); endwhile; else : // no rows found endif; ?>
Ну, с богом. Открываем админку наших ACF. Добавляем поле. Для понятности использую названия из приведенного выше кода. Поле называем repeater_field_name. Как только вы выбрали Тип поля — Repeater, у вас появится дополнительный ряд ВНУТРИ нашего поля, вложенный, как матрешка:
Внутри этой матрешки жмем также Add sub_filed, появляется окно для заполнения, это саб_поле мы называем sub_field_name. Апдейтим всё.
Шагаем в нашу страницу Home Page. Видим, что новосозданное поле появилось:
Жмем Add Row (Добавить ряд). В появившемся поле пишем наш текст (у меня bla-bla):
Готово. Обновим страницу в админке, вставим код в шаблон и получим на выходе bla-bla на фронте.
Добавим в админке страницы еще пару полей, чтобы теперь вывести в карусели.
Откроем наш шаблон page.php в редакторе и вставим код:
<div class="carousel_bg"> <div class="container"> <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> <!-- Indicators --> <ol class="carousel-indicators"> <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> <li data-target="#carousel-example-generic" data-slide-to="1"></li> </ol> <!-- Wrapper for slides --> <div class="carousel-inner" role="listbox"> <?php if( have_rows('repeater_field_name') ): while ( have_rows('repeater_field_name') ) : the_row(); ?> <div class="item active screen08"> <div class="container"> <h1><?php the_sub_field('sub_field_name'); ?></h1> </div> </div><!-- /item --> <?php endwhile; endif; ?> </div> </div> </div> </div><!-- /row -->
Если перевести наш код на русский язык, то значит следующее:
if( have_rows('repeater_field_name') ): // ЕСЛИ есть ряды для поля repeater_field_name
while ( have_rows('repeater_field_name') ) : the_row(); // ПОКА эти ряды идут - выводить РЯД
Ставим вывод айтема карусели, закрываем endwhile, закрываем endif.
Обновим нашу страницу, и что же мы видим? Оба текста вылезли одновременно, карусель не крутится. Ну конечно же, мы задали цикл «выводить пока» для куска:
<div class="item active screen08"> ... </div>
А ведь что это значит для бутстрапа? Что на выходе ОБА айтема у нас активны (active). Как же нам сделать, чтобы только первый айтем (кадр) был активным? Очень просто, создаем переменную php:
<?php $active = 'active'; ?>
Вставляем его ДО цикла while, а уже внутри цикла while, после прохождения первого круга (выведения первого айтема) указываем для переменной $active пустое значение. И внутри классов айтема вместо класса вставляем переменную $active. Таким образом, она выведется 1 раз, а потом будет пустое значение. Выглядит так:
<?php if( have_rows('repeater_field_name') ): $active = 'active'; while ( have_rows('repeater_field_name') ) : the_row(); ?> <div class="item <?php echo $active ?> screen08"> <div class="container"> <h1><?php the_sub_field('sub_field_name'); ?></h1> </div> </div><!-- /item --> <?php $active = ''; endwhile; endif; ?>
Все заработало. Бутстрап дальше подхватывает и уже автоматом определяет класс active для остальных активных кадров.
Но осталась маленькая проблемка. Что делать с кружками — на которые тыкаешь, чтобы листать кадры? Сейчас их два, потому что в коде два, это просто приятное совпадение. Но если вы добавите еще 10 рядов (кадров), то кружков останется по-прежнему 2.
Итак. Очевидно, мы должны запустить тот же цикл для кружков, и использовать ту же переменную $active для активного кружка.
Рассмотрим внимательнее кусок бутстраповского кода, для вывода индикаторов (кружочков):
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
Мы видим, что кроме класса active у нас еще есть data-slide-to. Это значит — «крутить к» такому-то слайду на тык. Туда нам тоже нужно вогнать переменную, что делается достаточно просто. Мы также делаем переменную, например $num, ДО цикла while присваиваем ей значение 0 (не забываем — в программировании счет начинается с нуля), а до закрытия цикла while увеличиваем эту переменную на 1. Таким образом на следующем круге вывода li data-slide-to будет равно 1, потом 2 и т.п. — пока не кончатся слайды.
Код:
<?php $active = 'active'; $num = 0; while ( have_rows('repeater_field_name') ) : the_row(); ?> <li data-target="#carousel-example-generic" data-slide-to="<?php echo $num ?>" class="<?php echo $active ?>"></li> <?php $active = ''; $num += 1; endwhile; ?>
Сейчас мы видим, что код целиком для карусели можно оптимизировать, так как цикл if повторяется дважды. Вынесем его за пределы карусели. Это также решит еще одну проблему — что, если клиент захочет карусель убрать? Очевидно, он пойдет в админку страницы и просто удалит все кадры. Но в верстке страницы она останется, только с пустыми кадрами! Поэтому НУЖНО вынести условие if (если существуют ряды) за пределы карусели. При отстутствии рядов (кадров, кастомного репитера) карусель не выведется вообще.
Окончательный код:
<?php if( have_rows('repeater_field_name') ): ?> <div class="carousel_bg"> <div class="container"> <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> <!-- Indicators --> <ol class="carousel-indicators"> <?php $active = 'active'; $num = 0; while ( have_rows('repeater_field_name') ) : the_row(); ?> <li data-target="#carousel-example-generic" data-slide-to="<?php echo $num ?>" class="<?php echo $active ?>"></li> <?php $active = ''; $num += 1; endwhile; ?> </ol> <!-- Wrapper for slides --> <div class="carousel-inner" role="listbox"> <?php $active = 'active'; while ( have_rows('repeater_field_name') ) : the_row(); ?> <div class="item <?php echo $active ?> screen08"> <div class="container"> <h1><?php the_sub_field('sub_field_name'); ?></h1> </div> </div><!-- /item --> <?php $active = ''; endwhile; ?> </div> </div> </div> </div><!-- /row --> <?php endif; ?>
Я думаю, этого достаточно, чтобы понять, как вывести в слайдах картинки, подписи и любой другой контент.
Как выводить в бутстрап-карусели посты вордпресс — рассмотрим в другом уроке.
You must be logged in to post a comment.