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 в браузере.