Der Header: Logo, Menü und Telefon

Das Ergebnis

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

Schritt für Schritt

1. Die Seite mit den Website-Einstellungen

   Die Datei theme-options.html mit einer Gruppe wp-fields-group ist der Einstellungsbildschirm im Adminbereich. Alles, was darin mit opt- markiert ist, gilt für die ganze Website.

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

2. Das Logo

   opt-image am <img>, in den Einstellungen und im Header jeder Seite. Dein Kunde ändert das Logo einmal.

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

3. Das Menü

   wp-menu am Block mit den Links. „Daten laden“ legt aus deinen Links das Menü „Header Menu“ an; danach bearbeitet dein Kunde es unter Design → Menüs.

   <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. Das Telefon

   Der tel:-Link ist opt-link, die Nummer darin opt-text, mit verschiedenen Namen. Die Nummer ändert sich im ganzen Header auf einmal.

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

Worauf es ankommt

• Menüeinträge übernehmen die Klassen des ersten Links. Die aktuelle Seite bekommt wie in Webflow die Klasse w--current: Gestalte diese Klasse.
• „Daten laden“ baut das Menü aus dem Markup neu auf und ersetzt die Änderungen deines Kunden: Führ es für Menüs einmal aus, ganz am Anfang.

Typische Fehler

Das Build-Protokoll ist der Tab „Logs“ deines Projekts auf themeforge.pro; die kostenlose Markup-Prüfung zeigt dieselben Hinweise.

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

Attribute in diesem Rezept

Weitere Rezepte