Что такое повторитель в WordPress? Способы создания повторяющихся полей

Повторитель, в контексте создания сайтов — это экземпляр, который позволяет вам повторять добавление контента в один и тот же набор полей снова и снова, сколько вам нужно. Они широко используются для мета-полей и полей форм интерфейса.

Это пример повторителя для метаполей:

Оглавление

Что такое повторитель WordPress?

Если вы хотите создать поля повторителя WordPress без плагина, вы можете использовать этот код в качестве ссылки (и изменить «страницу» на пользовательский тип записи, к которому вы хотите, чтобы этот повторитель принадлежал). Однако использовать плагин намного проще — он сэкономит вам массу времени, особенно если вам нужно более одного повторителя с несколькими типами полей. Кроме того, с помощью плагина намного проще отображать ваши ретрансляторы на внешнем интерфейсе, и я расскажу подробнее об этом процессе ниже.

А пока, чтобы лучше понять структуру повторителей, взгляните на этот код, который можно использовать для отображения повторителей во внешнем интерфейсе. Это петля, и вот как это выглядит в ACF.

1. Основной:

<?php
//Check if rows exist
if( have_rows('repeater_field_name') ):

    // Loop through rows
    while( have_rows('repeater_field_name') ) : the_row();
		
// Load sub field value.
        $sub_value = get_sub_field('sub_field');
        // Do something

    // End loop
    endwhile;

// If rows don’t exist
else :
    // Do something
endif;
?>

2. Вы можете использовать функция foreachэто пример с некоторым HTML для отображения слайдеров с подписями:

<?php 
$rows = get_field('repeater_field_name');
if( $rows ) {
    echo '<ul class="slides">';
    foreach( $rows as $row ) {
        $image = $row['image'];
        echo '<li>';
            echo wp_get_attachment_image( $image, 'full' );
            echo wpautop( $row['caption'] );
        echo '</li>';
    }
    echo '</ul>';
}

А это фрагмент Реактивный двигатель использует для отображения метаполей в виджете Dynamic Repeater:

$repeater = get_post_meta(get_the_ID(), "repeater_p");
                       foreach($repeater[0] as $key => $value){
                           $text_f = $value["text_f"];
                           $date_f = $value["date_f"];
                           $img_f = $value["img_f"];
                           echo("<div style="border: 1px solid red" class="repeater-item-je">");
                               echo("<div>$text_f</div>");
                               echo("<div>$date_f</div>");
                               echo("<div><img src="https://crocoblock.com/blog/wordpress-repeater-fields-explained/$img_f" alt="rep-img" /></div>");
                           echo("</div>");
                       }

Как использовать повторители в WordPress?

Повторители необходимы во многих случаях, поэтому давайте рассмотрим несколько примеров.

Повторитель для метаполей

Иногда вы не можете предсказать, сколько полей одного типа вам понадобится. Например, вы создаете сайт рецептови вы не хотите ставить список ингредиентов и их количество (в граммах/унциях) в виде сплошного текста, но вы хотите создать отдельное метаполе для каждого ингредиента. Это даст массу преимуществ: от правильного оформления каждой строки до кликабельности каждого ингредиента и получения списка других рецептов с таким же ингредиентом (список преимуществ можно продолжать, все зависит от вашего творчества и целей).

Еще один очень частый вариант использования: повторители для добавления фотографий. Очень часто вы не знаете, сколько фотографий будет прикреплено, поэтому просто необходимо использовать динамический повторитель, и, кстати, WooCommerce использует его для дополнительных фотографий товара.

Повторитель в формах

Существует много типов форм — от простых контактных форм до более сложных форм бронирования или отправки через интерфейс. Итак, есть масса случаев, когда повторители могут быть полезны.

Просто пришло в голову: в контакте ретрансляторы форм можно широко использовать для прикрепления фотографий или документов. В формах бронирования они необходимы для добавления более одного гостя или участника. Если мы имеем дело с формой отправки переднего плана, может быть куча повторителей, в зависимости от типа сайта. Если это маркетплейс или каталог, человек может представить несколько товаров с описанием, фото, ценами и т.д.

Это пример формы бронирования с повторителем из динамического шаблона туристического агентства Crocoblock:

Создание динамического повторителя с помощью JetEngine

Давайте рассмотрим процесс создания полей Repeater для сайта рецептов с помощью JetEngine. Я воссоздам рецепт с Allrecipes.com, и в Chrome DevTools я вижу, что они также используют повторители для добавления ингредиентов с тремя полями в каждой строке: название ингредиента, единица измерения и количество.

Создание пользовательских типов сообщений и полей

Я создаю пользовательский тип записи под названием «Рецепт» и добавляю все необходимые настраиваемые поля, среди которых есть два повторителя. Процесс очень прост; также вы можете добавить расширенные условные правила, чтобы поля отображались только при соблюдении определенных условий:

Отображение контента на фронтенде

Чтобы создать шаблон для пользовательского типа поста «Рецепт», мне нужен плагин JetThemeCore от Crocoblock (в качестве альтернативы вы можете создавать шаблоны с помощью Elementor Pro). я иду в Crocoblock > Шаблоны тем > Создать новый и добавьте новый шаблон. Позже, в Crocoblock > Конструктор тем, вы сможете добавить собственные верхние и нижние колонтитулы для этого шаблона, если это необходимо, и добавить условия.

Для отображения полей ретранслятора в интерфейсе есть виджет JetEngine Dynamic Repeater для Elementor (или Blocks, если вы предпочитаете Gutenberg).

Помните, что вы должны использовать макросы JetEngine для отображения полей повторителя в виджете Dynamic Repeater. Есть подробное руководство по макросам в справочном центре JetEngine.

Например, чтобы отобразить фотографии в ретрансляторе, я использовал этот макрос внутри HTML-разметки:

<img src="https://crocoblock.com/blog/wordpress-repeater-fields-explained/%photo"img_url_by_id%">

Где «Фото» это ключ кастомного поля (название моего поля для медиа внутри репитера), такой ключ можно найти прямо в редакторе поста:

После получения нужных полей вы можете правильно их стилизовать, используя Стиль Вкладка Elementor (или правая панель в Гутенберге).

Для добавления полей репитера с ингредиентами я использовал этот макрос:

<span>%ingredient-quantity%  %ingredient-unit% %ingredient-name%</span> 

потому что мне нужно, чтобы все элементы были в одной строке.

Но для добавления шагов приготовления мне нужен был этот код:

<span style="font-weight:800;">%step% </span><span>%step-directions%</span> 

Как видите, вы просто используете нужные вам ключи полей, заключенные в %%, и при необходимости добавляете пользовательские стили, классы и любую HTML-разметку.

Ведь это мой Листинг шаблон, где блоки Ingredients, Photos и Directions являются повторителями:

Создание повторяющихся полей с помощью JetFormBuilder

Создание полей повторителей для форм с помощью бесплатного плагина JetFormBuilder — очень простой процесс. Все, что вам нужно сделать, это добавить Полевой блок повторителя – он будет служить контейнером. После этого просто добавьте все поля, которые вы хотите повторять, и все готово.

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

Когда форма создана, вам может быть интересно, как поступить со значениями полей, которые вы получите от клиентов. Давайте посмотрим на динамический шаблон Crocoblock — демо-сайт для турагентства. Вот вам и ретрансляторы с полями про путешественников. Итак, наша цель — получить результаты и сохранить их не только в записях форм, но и сделать их более удобными для обработки агентом. Допустим, мне нужен специальный тип публикации под названием «Заказ на бронирование».« где есть вся эта информация. Что ж, это проще, чем кажется.

Все, что мне нужно сделать, это:

1. Используя плагин JetEngine, создайте пользовательский тип записи под названием «Заказ на бронирование».” со всеми пользовательскими полями, которые мне нужны.
2. Используя плагин JetFormBuilder, создать форму с полями содержащие информацию о путешественниках внутри блока Repeater.
3. На правой панели формы JetFormBuilder откройте вкладку JetForm и выберите действие «Отправить публикацию».Вставить/обновить публикацию», затем перейдите в настройки (значок карандаша), выберите нужный тип публикации («Заказ заказа”), а потом назначьте соответствующее поле формы каждому метаполю этого типа поста.

Статус публикации «Ожидание», что означает, что она нигде не будет опубликована. Тем не менее, турагент может изменить его после обработки, запустить процесс автоматизации или сделать все, что требует бизнес-процесс.

Другие способы создания повторяющихся полей в WordPress

Создание полей повторителей с помощью ACF Pro по-прежнему остается одним из популярных методов работы с ними. Хорошей новостью является то, что JetEngine полностью совместим с повторителями Advanced Custom Fields, поэтому вы можете отображать их с помощью виджета JetEngine Dynamic Repeater, использовать их в Query Builder и т. д. Это хорошая новость для тех, кто хочет купить Crocoblock, но ранее создал поля с АКФ.

Кроме того, набор инструментов JetEngine предоставляет несравненно больше возможностей и гибкости при выборке полей на внешнем интерфейсе, чем собственный виджет повторителя ACF Elementor, не говоря уже о том, что вы можете точно настраивать значения и создавать списки с помощью Query Builder.

Обернуть

Поля повторителя являются важным инструментом для создания динамических веб-сайтов. Они широко используются многими плагинами, включая WooCommerce, потому что они обеспечивают большую гибкость.

Повторители часто используются в формах, чтобы клиенты могли заполнять всю необходимую информацию, а также в качестве метаполей для постов, у которых есть группа с количеством метаполей, которое невозможно предугадать.