Contents
- 1 Що таке повторювач у WordPress? Способи створення повторювальних полів
- 2 Зміст
- 3 Що таке повторювач WordPress?
- 4 Як використовувати повторювачі в WordPress?
- 5 Створення динамічного повторювача за допомогою JetEngine
- 6 Створення повторюваних полів за допомогою JetFormBuilder
- 7 Інші способи створення полів повторювачів у WordPress
- 8 To Wrap Up
Що таке повторювач у WordPress? Способи створення повторювальних полів
Повторювач, у контексті створення сайту, це екземпляр, який дозволяє повторювати додавання вмісту в той самий набір полів знову і знову, скільки вам потрібно. Вони широко використовуються для мета-полів і полів зовнішніх форм.
Це приклад повторювача для мета-полів:
Зміст
Що таке повторювач WordPress?
Якщо ви хочете створити поля ретранслятора WordPress без плагіна, ви можете використовувати цей код як довідковий код (і змінити «сторінку» на власний тип публікації, до якого ви хочете, щоб цей ретранслятор належав). Однак використовувати плагін набагато простіше – він заощадить вам масу часу, особливо якщо вам потрібен більше одного повторювача з кількома типами полів. Крім того, за допомогою плагіна набагато простіше відобразити ваші повторювачі на інтерфейсі, і я розповім про цей процес нижче.
Але наразі, щоб краще зрозуміти структуру повторювачів, подивіться на цей код, який можна використовувати для відображення повторювачів у інтерфейсі. Це цикл, і ось як це виглядає в ACF.
- Основний:
<?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;
?>
- Ви можете використовувати функція 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?
Повторювачі необхідні в багатьох випадках, тому давайте розглянемо кілька прикладів.
Повторювач для мета полів
Іноді ви не можете передбачити, скільки полів одного типу вам знадобиться. Наприклад, ви створюєте a сайт рецептіва ви не хочете ставити a список інгредієнтів і їх кількість (у грамах/унціях) як суцільний текст, але потрібно створити окреме мета-поле для кожного інгредієнта. Це дасть багато переваг: від правильного стилю кожного рядка до того, щоб зробити кожен інгредієнт клікабельним і отримати список інших рецептів з тим самим інгредієнтом (список переваг можна продовжувати, все залежить від вашої креативності та цілей).
Ще один дуже частий випадок використання повторювачі для додавання фото. Дуже часто ви не знаєте, скільки фотографій буде прикріплено, тому просто необхідно використовувати динамічний повторювач, і, до речі, WooCommerce використовує його для додаткових фотографій товару.
Повторювач у формах
Існує багато типів форм – від простих контактних форм до більш складних форм для бронювання або передавання. Отже, існує безліч випадків, коли повторювачі можуть бути корисними.
З голови: у контакті повторювачі форм можна широко використовувати для прикріплення фотографій чи документів. У формах бронювання вони необхідні для додавання кількох гостей або учасників. Якщо ми маємо справу з зовнішньою формою подання, може бути купа повторювачів, залежно від типу сайту. Якщо це маркетплейс або каталог, то людина може надіслати кілька товарів з описом, фото, цінами тощо.
Ось приклад форми бронювання з повторювачем із динамічного шаблону туристичної агенції Crocoblock:
Створення динамічного повторювача за допомогою JetEngine
Давайте розглянемо процес створення полів Repeater для веб-сайту рецептів за допомогою JetEngine. Я відтворю рецепт із Allrecipes.com, і в Chrome DevTools я бачу, що вони також використовують повторювачі для додавання інгредієнтів із трьома полями в кожному рядку: назва інгредієнта, одиниця та кількість.
Створення власних типів публікацій і полів
Я створюю спеціальний тип публікації під назвою «Рецепт» і додаю всі необхідні спеціальні поля, серед яких є два повторювачі. Процес дуже простий; також можна додати розширені умовні правила, щоб поля відображалися лише за виконання певних умов:
Відображення вмісту на інтерфейсі
Щоб створити шаблон для власного типу публікації «Рецепт», мені потрібен плагін JetThemeCore від Crocoblock (як альтернатива, ви можете створювати шаблони за допомогою Elementor Pro). я йду до Crocoblock > Шаблони тем > Створити новий і додайте новий шаблон. Пізніше, в Crocoblock > Конструктор тем, ви зможете додавати спеціальні колонтитули для цього шаблону, якщо це необхідно, і додавати умови.
ПРИМІТКА
Ще один спосіб відображення користувальницьких типів дописів – це створення списку JetEngine – по суті, багаторазового шаблону для окремого блоку, який пізніше може сформувати сітку списку.
Відмінність шаблону, який ви створюєте за допомогою JetThemeCore, полягає в тому, що в цьому випадку ви не призначаєте певні типи публікацій конкретному шаблону. Елементи переліку існують незалежно і можуть бути додані до будь-якої сторінки чи публікації, до шаблону та поєднані з елементами переліку іншого типу.
Безумовно, варто відзначити, що JetEngine, починаючи з версії 3.1, надає велику гнучкість у роботі з полями повторювача. Окрім створення окремих списків лише для полів повторювача, ви можете використовувати їх із потужним конструктором запитів.
Для відображення полів ретранслятора на інтерфейсі є віджет 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 (або права панель у Gutenberg).
Для додавання полів повторювача з інгредієнтами я використав цей макрос:
<span>%ingredient-quantity% %ingredient-unit% %ingredient-name%</span>
тому що мені потрібно, щоб усі елементи були в одному рядку.
Але для додавання етапів приготування мені знадобився цей код:
<span style="font-weight:800;">%step% </span><span>%step-directions%</span>
Як бачите, ви просто використовуєте ключі полів, які вам потрібні, загорнуті в %% і додаєте власний стиль, класи та будь-яку розмітку HTML, якщо потрібно.
Адже це моє Лістинг шаблон, де блоки «Інгредієнти», «Фотографії» та «Напрямки» є повторювачами:
Створення повторюваних полів за допомогою JetFormBuilder
Створення повторюваних полів для форм за допомогою безкоштовного плагіна JetFormBuilder є дуже простим процесом. Все, що вам потрібно зробити, це додати Блок повторювача поля – служитиме контейнером. Після цього просто додайте всі поля, які потрібно повторювати, і все готово.
Ви можете налаштувати підпис кнопки, додати умови, зробити форму багатокроковою та автоматично обчислювати значення полів:
Коли форму буде створено, у вас може виникнути питання, як працювати зі значеннями полів, які ви отримаєте від клієнтів. Давайте розглянемо динамічний шаблон Crocoblock – демо-сайт для туристичної агенції. У вас є повторювачі з полями про мандрівників. Отже, наша мета — отримати результати та зберегти їх не лише в Записах форми, але й зробити їх зручнішими для обробки агентом. Скажімо, я хочу окремий тип публікації під назвою «Замовлення на бронювання».,” де доступна вся ця інформація. Ну, це простіше, ніж здається.
Усе, що мені потрібно зробити, це:
- Використовуючи плагін JetEngine, створити спеціальний тип публікації під назвою «Замовлення на бронювання».» з усіма необхідними для користувача полями.
- Використовуючи плагін JetFormBuilder, створити форму з полями містить інформацію про мандрівників усередині блоку Repeater.
- На правій панелі форми JetFormBuilder відкрийте вкладку JetForm і виберіть дію після надсилання “Вставити/оновити публікацію”, потім перейдіть до налаштувань (значок олівця), виберіть правильний тип публікації («Замовлення бронювання»), і потім призначити відповідне поле форми кожному мета-полю цього типу посади.
Статус публікації – «Очікує на розгляд», що означає, що вона ніде не буде опублікована. Тим не менш, турагент може змінити його після обробки, запустити процес автоматизації або зробити все, що вимагає бізнес-процес.
Інші способи створення полів повторювачів у WordPress
Створення полів повторювачів за допомогою ACF Pro досі залишається одним із популярних методів боротьби з ними. Хороша новина полягає в тому, що JetEngine ідеально сумісний із повторювачами Advanced Custom Fields, тому ви можете відображати їх за допомогою віджета JetEngine Dynamic Repeater, використовувати в Query Builder тощо. Це гарна новина для тих, хто хоче придбати Crocoblock, але раніше створював поля з ACF.
Крім того, набір інструментів JetEngine надає незрівнянно більше можливостей і гнучкості для отримання полів на інтерфейсі, ніж власний віджет повторювача ACF Elementor, не кажучи вже про те, що ви можете точно налаштовувати значення та створювати списки за допомогою Query Builder.
To Wrap Up
Поля повторювача є важливим інструментом для створення динамічних веб-сайтів. Вони широко використовуються багатьма плагінами, включаючи WooCommerce, оскільки вони надають велику гнучкість.
Повторювачі часто використовуються у формах, щоб клієнти могли заповнити всю необхідну інформацію, а також як мета-поля для публікацій, які мають групу з кількістю мета-полів, які неможливо передбачити.
Якщо вас цікавить послуга “сайт візітка”, заказати можна filandor.com , в веб-студії filandor. Студія працює багато років та надає комплексні послуги.
Джерело: https://crocoblock.com/blog/wordpress-repeater-fields-explained/