La cabecera del sitio: logotipo, menú y teléfono

Qué obtienes

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

Paso a paso

1. La página de ajustes del sitio

   El archivo theme-options.html con un grupo wp-fields-group es la pantalla de ajustes del panel. Todo lo que marques en él con opt- es común a todo el sitio.

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

2. El logotipo

   opt-image en el <img>, tanto en los ajustes como en la cabecera de cada página. El cliente cambia el logotipo una sola vez.

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

3. El menú

   wp-menu en el bloque de enlaces. «Cargar datos» crea el menú «Header Menu» a partir de tus enlaces; después, el cliente lo edita en Apariencia → 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. El teléfono

   El enlace tel: es opt-link, y el número de dentro, opt-text, con nombres distintos. El número cambia en toda la cabecera a la vez.

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

Lo importante

• Los elementos del menú toman las clases del primer enlace; la página actual recibe la clase w--current, como en Webflow: dale estilo a esa clase.
• «Cargar datos» reconstruye el menú a partir del marcado y reemplaza los cambios del cliente: úsalo para los menús una sola vez, al principio.

Errores frecuentes

El registro de la generación es la pestaña «Registros» de tu proyecto en themeforge.pro; la revisión gratuita del marcado muestra los mismos avisos.

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

Atributos de esta receta

Más recetas