Первый экран с фоном и кнопкой
Первое, что видит посетитель, и то, что клиенту приходится обновлять: новая акция, другой снимок, другой текст на кнопке. После разметки всё это правится в админке, а вёрстка остаётся вашей.
Что получится
<body wp-fields-group="Home">
<section class="hero" fld-bg-image="Hero background">
<p class="hero__eyebrow" fld-text="Hero eyebrow">Open every day</p>
<h1 fld-text="Hero title">Coffee for slow mornings</h1>
<p class="hero__lead" fld-area="Hero lead">Single-origin espresso, fresh pastries and a table by the window.</p>
<a class="button" href="/menu" fld-link="Hero button">
<span fld-text="Hero button text">See the menu</span>
</a>
</section>
</body>Open every day
Coffee for slow morningsSingle-origin espresso, fresh pastries and a table by the window.
See the menuШесть полей в одной группе: клиент находит их на странице «Home».
Пошагово
Назовите группу полей
Атрибут wp-fields-group на
<body>даёт полям страницы общий заголовок в админке. Без него поля не появятся.<body wp-fields-group="Home">
Сделайте фон полем
fld-bg-image ставится на тот же блок, у которого фон. В админке это поле картинки, на сайте — фон секции.
<section class="hero" fld-bg-image="Hero background">
Разметьте тексты
Короткие строки — fld-text, абзац — fld-area: в нём клиент может переносить строки. У каждого поля своё понятное имя.
<p class="hero__eyebrow" fld-text="Hero eyebrow">Open every day</p> <h1 fld-text="Hero title">Coffee for slow mornings</h1> <p class="hero__lead" fld-area="Hero lead">Single-origin espresso, fresh pastries and a table by the window.</p>
Кнопка — два поля
fld-link на ссылке делает полем адрес, а подпись размечается отдельно, внутри ссылки, под другим именем.
<a class="button" href="/menu" fld-link="Hero button"> <span fld-text="Hero button text">See the menu</span> </a>
Что важно
- Имена полей пишите так, чтобы клиент понял их без вас: «Hero title», а не «Text 1».
- Тексты из вёрстки попадут в поля при «Загрузить данные» — клиенту не придётся набирать их заново.
Частые ошибки
Журнал сборки — вкладка «Логи» вашего проекта на themeforge.pro; те же замечания показывает бесплатная проверка разметки.
<a class="button" href="/menu" fld-link="Hero button">
<span fld-text="Hero button">See the menu</span></a>Ссылка и подпись под одним именем: получается одно поле на две роли, кнопка ломается. Сборка сообщает о коллизии.
<a class="button" href="/menu" fld-link="Hero button">
<span fld-text="Hero button text">See the menu</span></a>Подпись — своё имя, например «Hero button text».