Шапка сайта: логотип, меню и телефон

Что получится

<!-- theme-options.html: what the client edits once -->
<body wp-fields-group="Site settings">
  <img src="images/logo.png" alt="Warm Corner" opt-image="Logo">
  <a href="tel:+15550100199" opt-link="Phone link">
    <span opt-text="Phone">+1 (555) 010-0199</span></a>
</body>

<!-- the header of every page -->
<header class="header">
  <a class="header__logo" href="/"><img src="images/logo.png" alt="Warm Corner" opt-image="Logo"></a>
  <nav class="header__nav" wp-menu="Header Menu">
    <a href="/" class="header__link">Home</a>
    <a href="/menu" class="header__link">Menu</a>
    <a href="/contacts" class="header__link">Contacts</a>
  </nav>
  <a class="header__phone" href="tel:+15550100199" opt-link="Phone link">
    <span opt-text="Phone">+1 (555) 010-0199</span></a>
</header>

Пошагово

1. Страница настроек сайта

   Файл theme-options.html с группой wp-fields-group — это экран настроек в админке. Всё, что размечено в нём с opt-, общее для сайта.

   <body wp-fields-group="Site settings">

2. Логотип

   opt-image на <img> — и в настройках, и в шапке каждой страницы. Клиент меняет логотип один раз.

   <img src="images/logo.png" alt="Warm Corner" opt-image="Logo">

3. Меню

   wp-menu на блоке со ссылками. «Загрузить данные» создаст меню «Header Menu» из ваших ссылок, дальше клиент правит его во Внешний вид → Меню.

   <nav class="header__nav" wp-menu="Header Menu">
     <a href="/" class="header__link">Home</a>
     <a href="/menu" class="header__link">Menu</a>
     <a href="/contacts" class="header__link">Contacts</a>
   </nav>

4. Телефон

   Ссылка tel: — opt-link, номер внутри — opt-text, с разными именами. Номер меняется сразу во всей шапке.

   <a class="header__phone" href="tel:+15550100199" opt-link="Phone link">
     <span opt-text="Phone">+1 (555) 010-0199</span></a>

Что важно

• Пункты меню берут классы первой ссылки; текущая страница получает класс w--current, как в Webflow, — стилизуйте его.
• «Загрузить данные» собирает меню заново по вёрстке и заменяет правки клиента: для меню запускайте его один раз, в начале.

Частые ошибки

Журнал сборки — вкладка «Логи» вашего проекта на themeforge.pro; те же замечания показывает бесплатная проверка разметки.

<nav class="header__nav" wp-menu="Header Menu">
  <a href="/" class="header__link is-active">Home</a>
  <a href="/menu" class="header__link">Menu</a>
</nav>

<nav class="header__nav" wp-menu="Header Menu">
  <a href="/" class="header__link">Home</a>
  <a href="/menu" class="header__link">Menu</a>
</nav>

Атрибуты в рецепте

Ещё рецепты