Warm Corner: сайт кавʼярні — з HTML в адмінку WordPress
Невеликий сайт, який ми написали самі: три сторінки й сторінка налаштувань, розмічені атрибутами ThemeForge. Що було на вході, що вийшло на виході й чого нас навчила перша збірка.
3 сторінки (головна, меню, контакти) і сторінка налаштувань для шапки й підвалу перетворилися на 4 групи полів, 53 поля, з них 3 списки: картки на головній, напої та кухня. Усе це клієнт редагує в адмінці WordPress, а дизайн не змінюється.
Який атрибут де стоїть
| Атрибут | Де стоїть і чим стає в адмінці |
|---|---|
wp-fields-group | На <body> кожної сторінки: назва групи полів сторінки |
fld-text | Заголовки, підписи, ціни: звичайні текстові поля |
fld-area | Вступні абзаци: багаторядковий текст |
fld-editor | Блок «Про нас»: візуальний редактор |
fld-image | Картинка першого екрана й значки карток: зображення |
fld-loop | Картки, напої, кухня: списки, до яких клієнт додає рядки й змінює їхній порядок |
fld-link | Кнопки: посилання разом із текстом |
opt-text, opt-area, opt-image | Шапка, підвал і theme-options.html: спільні налаштування, один набір для всіх сторінок |
wp-menu | Навігація: меню WordPress замість незмінного списку |
Меню кавʼярні: від розмітки до адмінки
Наведіть на рядок розмітки, щоб побачити поле, яким він стане.
<body wp-fields-group="Menu"> <h2 fld-text="Title">Menu</h2> <p fld-area="Lead">Espresso runs on our…</p> <div class="cards" fld-loop="Drinks"> <article class="card"> <img fld-image="Image" src="assets/icon-latte.png"> <h3 fld-text="Name">Latte</h3> <p fld-text="Description">Double espresso…</p> <span fld-text="Price">$4.20</span> </article> …ще три картки, розмічені так само </div>
Warm Corner — наш демосайт: 3 сторінки та сторінка налаштувань → 4 групи полів, 53 поля, 3 списки. Клієнт додає, видаляє й переставляє рядки, а дизайн не змінюється.
Що клієнт відкриває у WordPress
Екрани нашого тестового сайту після збирання й «Завантажити дані»: поля з’явилися з атрибутів, значення — з HTML. Адмінка англійською, як і сам приклад.
theme-options.html: одне значення для шапки й підвалу всіх сторінок.Що довелося виправити після першої збірки
Поля без назв
Спершу ми написали fld-text без назви. Усі безіменні поля одного типу злилися в одне, і журнал збирання показав 10 збігів назв на головній. З назвами — нуль.
SVG у полях-зображеннях
WordPress не приймає SVG до медіатеки, тому зображення, привʼязане до поля, має бути растровим. Вихідні SVG ми залишили, а розмітку спрямували на копії в PNG.
Група всередині списку
Рядок списку — це вже група полів. Зайвий fld-group усередині fld-loop дав кожному рядку порожню підгрупу, і на сайті зʼявилися порожні картки. Атрибути потрібні всім карткам списку, а не лише першій.
Зробіть те саме зі своїм сайтом
- Крок 1
Розмітьте
Вручну, у Webflow або з помічником, який прочитав themeforge.pro/ai.
- Крок 2
Перевірте
Безплатна перевірка розмітки виявить безіменні поля та інші описані вище помилки ще до збирання.
- Крок 3
Подивіться адмінку
Зберіть тему й безплатно відкрийте її адмінку WordPress у браузері.