The Поле ретранслятора превращает один набор элементов управления в столько строк, сколько нужно пользователю Вы определяете поля один раз (имя, цена, описание) и любой, кто редактирует виджет в Elementor, может добавлять, дублировать, переупорядочивать и удалять элементы с панели, точно так же, как ретрансляторы в собственном списке значков Elementor или виджетах "Свидетельская карусель". Внутри главных аддонов Виджет Строитель, Повторитель - это то, как вы создаете карточные сетки, меню, списки функций, разделы команд и все остальное, где счетчик элементов зависит от владельца сайта, а не от автора виджета.
Ретранслятор соединяется с обеими сопутствующими системами: Условия показывает или скрывает элемент управления на панели, и Механизм шаблонов Twig-синтаксиса делает свои ряды на переднем конце с {% for item in my_repeater %} петли и пунктирные токены как {{ item.title }}. Оба руководства охватывают настройку и ограничения.
Repeater работает вместе с циклом шаблонов в вашем HTML: a {% for %} блок печатает вашу разметку один раз в строке Три пункта рендеринг трех карт; добавить четвертую в панели и появляется четвертая карта, без изменений кода.
Что делает поле Repeater #
Поле Repeater отображает стандартное управление ретранслятором Elementor на панели опций вашего виджета Когда кто-то выбирает виджет, он видит стопку разборных строк с четырьмя знакомыми действиями:
- Добавить товар: кнопка под строками создает новый элемент со значениями по умолчанию.
- Дубликат: значок копирования клонирует строку, настройки и все такое.
- Повторный заказ: строки перетаскиваются в новый порядок, а страница обновляется для соответствия.
- Удалить: значок удаления выводит строку.
Каждая строка расширяется, чтобы показать подполя, которые вы определили: текст, текстовая область, выбор, медиа, URL, значки и другие типы полей Widget Builder могут жить внутри репитера. Это отличается от полей с одним значением, таких как Текст одним важным способом: соединение с вашим HTML - это цикл, а не разовый короткий код. Если вы новичок в создании виджетов, начните с Обзор виджета-строителя первый.
Прежде чем начать #
- WordPress с Элементор установлен и активен.
- Мастер-аддоны для Elementor установлен и активен. Новое в плагине? Видеть руководство установки.
- Пользовательский виджет, открытый в редакторе Widget Builder Наш пример - ресторан “signature thans” раздел, который отображает 3-колоночную сетку карт, по одной карте на ряд Repeater.
Как добавить поле "Повтор" #
В редакторе Widget Builder прокрутите панель полей слева, пока не найдете Ретранслятор поле, перечисленное вместе с другими структурными областями.
Перетащите репитер в раздел под Содержание вкладка, где принадлежит повторяющийся контент. Как только он приземлится, параметры поля откроются слева, и именно здесь происходит реальная настройка: определение подполей, которые будет нести каждая строка.
Объяснены варианты поля ретранслятора #
- Этикетка: заголовок, показанный над строками в Elementor, например “Signature Dishes”.
- Имя: уникальный идентификатор для всего ретранслятора, букв, цифр, и подчеркивает только. это имя ваш цикл относится, например
signature_dishes. - Поля: подполя, которые содержит каждая строка Добавьте по одному на каждый фрагмент содержимого каждого элемента ♪ в примере с тарелкой: текстовое поле Dish Name, текстовое поле Price, текстовую область Description и выберите Tag Style.
- Название Поле: какое подполе обозначает свернутую строку, написанную как
{{{ dish_name }}}. По умолчанию используется первое подполе, которое обычно соответствует вашему желанию. - По умолчанию: строки, с которых начинается виджет. Отправьте два или три заполненных элемента, чтобы виджет выглядел живым при первой же передаче.
- Текст кнопки: метка на кнопке добавления, например “Add Dish” вместо родового “Add Item”.
- Предотвратить пустоту: останавливает пользователя от удаления последней оставшейся строки.
- Мин/Макс Товары: необязательные границы того, сколько или сколько строк разрешено.
Подключите репитер к вашему HTML с помощью цикла #
Вот часть, которая работает по-разному в каждом поле с одним значением: репитер не имеет простой {{shortcode}}. Его значение представляет собой список строк, поэтому ваш HTML переносит повторяющуюся разметку в a {% for %} блок. внутри цикла каждое подполе доступно на переменной цикла:
<div class="dish-grid">
{% for dish in signature_dishes %}
<article class="dish-card">
<h3>{{ dish.dish_name }}</h3>
<span class="price">{{ dish.dish_price }}</span>
<p>{{ dish.dish_desc }}</p>
</article>
{% endfor %}
</div>signature_dishesимя репитера.dishэто переменная цикла, которую вы изобретаете на месте; называйте это как угодно.{{ dish.dish_name }}печатает имя блюда этой строки. Каждое подполе работает одинаково:{{ dish.<sub_field_name> }}.- Все между
{% for %}и{% endfor %}печатает один раз в ряд, в том порядке, в котором ряды расположены на панели.
Дополнительные поля внутри цикла #
Заверните все необязательное в {% if %} блокируйте так, чтобы пустые поля не оставляли случайную разметку. В примере с блюдом каждая карта имеет дополнительный значок тега:
{% if dish.tag_text %}
<span class="tag tag--{{ dish.tag_style }}">{{ dish.tag_text }}</span>
{% endif %}Строка с пустым текстом тега вообще не отображает значка. The {% if %} блок также принимает сравнения, подобные {% if dish.tag_style == 'spicy' %} когда вам нужна наценка, которая меняется на значение.
Медиа и ссылочные подполя #
Подполе изображения печатает свой URL-адрес напрямую, как в <img src="{{ dish.photo }}">, и URL-подполе таким же образом раскрывает свой адрес Вложенные свойства доступны с точечной записью, когда они вам нужны.
Используйте репитер в Элементоре #
Добавьте свой пользовательский виджет на страницу в Elementor или перезагрузите редактор, если страница уже была открыта. Повторитель отображается в виде стека строк под установленной вами меткой, каждая строка озаглавлена по полю заголовка.
Щелкните строку, чтобы расширить её подполя и отредактировать их; предварительный просмотр обновляется в прямом эфире Если новая строка вообще ничего не отображает, проверьте, соответствует ли имя цикла в вашем HTML полю Имя репитера точно (несовпадение не срабатывает молча вместо того, чтобы выдавать ошибку. Нажмите Добавить блюдо (или что бы ни говорил ваш текст кнопки) и появляется новая строка с вашими значениями по умолчанию, готовая к редактированию. Перетащите дескриптор в любую строку, чтобы изменить порядок, и карты на странице следуют.
Поскольку цикл печатает каждую строку, макет растет вместе с содержимым. В нашей сетке тарелок из 3 столбцов первые три карты заполняют ряд; четвертое блюдо автоматически запускает вторую строку под ним, потому что именно так завертывается сетка CSS виджета.
Обычные случаи использования #
- Карточные сетки indu, функции, цены на блюда или членов команды, одна строка за карту.
- Меню и прайс-листы indouritations, салоны и тренажерные залы, где товары меняются еженедельно.
- Стены логотипа и списки клиентов — подполе.
- Часто задаваемые вопросы и секции аккордеона текст вопроса поле и ответ на строку.
- Сроки и этапы процесса ordered рядов, которые пользователь может перетащить в последовательность.
Советы по работе с полем Repeater #
- Петля - это соединение. Нет
{{repeater_name}}шорткод для печати самостоятельно; ретранслятор имеет смысл только внутри{% for %}…{% endfor %}. - Отправить реальные дефолты. Два или три заполненных ряда делают виджет презентабельным в момент его падения, и они удваиваются как пример того, чего ожидает каждое поле.
- Установите поле заголовка. Свернутые строки с меткой “Margherita del Forno” гораздо проще в управлении, чем три строки с меткой “Item”.
- Защитите дополнительные поля с помощью
{% if %}. Пустые пролеты и пустые обертки невидимы, пока не нарушат ваше расстояние. - Позвольте CSS обрабатывать счетчик строк. Сетка с
repeat(3, 1fr)самостоятельно переносит дополнительные элементы в новые строки; цикл просто печатает карты. - Четко назовите подполя.
{{ dish.dish_price }}читается лучше в шаблоне, чем{{ dish.field_2 }}, для вас и для тех, кто наследует виджет.
Часто задаваемые вопросы #
Что такое поле "Повторитель" в Master Addons Widget Builder?
Поле Repeater добавляет элемент управления повторяемыми строками Elementor в пользовательский виджет. Вы определяете набор подполей один раз, и пользователи добавляют, дублируют, переупорядочивают и удаляют строки с панели Elementor. Ваш HTML печатает каждую строку через цикл for, поэтому макет растет вместе с содержимым.
Как отобразить элементы репитера в HTML-коде виджета?
Заверните повторяющуюся разметку в цикл: {% for item in my_repeater %} … {% endfor %}, где my_repeater имя репитера Внутри цикла печатайте подполя с {{ item.sub_field_name }}. Блок отображается один раз в строке в порядке панелей.
Какие типы полей могут войти в репитер?
Общие типы полей Widget Builder работают как подполя: текст, текстовая область, выбор, выбор, медиа, URL, значки, ползунок и измерения среди них. Каждая строка содержит свои собственные значения для каждого подполя, которое вы определяете.
Могу ли я ограничить количество элементов, которые может добавить пользователь?
Да. Min Items и Max Items связали количество строк, и Prevent Empty останавливает удаление последней строки. оставьте их незаложенными, и список не ограничен.
Как проходят дополнительные карты после заполнения первой строки?
То есть работа виджета CSS, а не Repeater's.Контейнер сетки, скажем, с тремя столбцами, автоматически переносит четвертый элемент в новую строку. цикл просто выводит один блок разметки на строку, и макет забирает его оттуда.
Почему в моем свернутом ряду вместо названия написано “Item”?
Поле заголовка не установлено или указывает на пустое подполе. Установите его на шаблон с тройной скобкой, например {{{ dish_name }}}, используя имя вашего первого подполя, и каждая свернутая строка показывает свое значение.
Завершая #
Поле "Повторитель виджетов" превращает фиксированную компоновку в живую: определите подполя и распечатайте их в формате a {% for %} цикл, и каждое решение контента после этого происходит в панели Элементор: добавить карту, перетащить ее на место, удалить в следующем сезоне. Соедините его с Типографское поле для шрифтов, управляемых редактором, и Пограничное поле для карточного стиля, и один виджет покрывает целый раздел страницы Исследуйте остальную часть Виджеты и расширения Master Addgetsи посмотрите страница ценообразования за то, что включает каждый план.
