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

Що вийде

<!-- 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>

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

Ще рецепти