L’en-tête du site : logo, menu et téléphone

Ce que vous obtenez

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

Étape par étape

1. La page des réglages du site

   Le fichier theme-options.html, avec un groupe wp-fields-group, devient l’écran des réglages dans l’administration. Tout ce qui y est balisé avec opt- est commun à tout le site.

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

2. Le logo

   opt-image sur la balise <img>, dans les réglages comme dans l’en-tête de chaque page. Le client change le logo une seule fois.

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

3. Le menu

   wp-menu sur le bloc des liens. « Charger les données » crée le menu « Header Menu » à partir de vos liens ; ensuite, le client le modifie dans Apparence → Menus.

   <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. Le téléphone

   Le lien tel: est un opt-link, le numéro à l’intérieur un opt-text, avec des noms différents. Le numéro change d’un coup dans tout l’en-tête.

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

À retenir

• Les éléments du menu reprennent les classes du premier lien ; la page courante reçoit la classe w--current, comme dans Webflow : stylez-la.
• « Charger les données » reconstruit le menu à partir du balisage et remplace les modifications du client : pour les menus, lancez-le une seule fois, au départ.

Erreurs fréquentes

Le journal de génération est l’onglet « Journaux » de votre projet sur themeforge.pro ; la vérification gratuite du balisage affiche les mêmes remarques.

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

Attributs de cette recette

Autres recettes